@nuvia-ui/components 4.0.1

package/src/ds-input/ds-input.mdx

@@ -0,0 +1,251 @@
+import { Meta, Canvas, Story, Controls } from '@storybook/blocks';
+import * as InputStories from './ds-input.stories';
+
+<Meta of={InputStories} />
+
+# Input
+
+A comprehensive text input component for forms with label, help text, validation states, and customizable slots.
+
+## Overview
+
+The `ds-input` component provides a fully-featured form input with support for:
+- Labels with optional info buttons
+- Help text and validation messages (error/success)
+- Multiple input types (text, email, password, number)
+- Prefix/suffix content via slots
+- Custom actions (icons, buttons) inside the field
+- Password visibility toggle
+- Number steppers
+- Clearable input (× button on focus)
+- All interaction states (enabled, hover, focus, disabled, read-only, error)
+
+<Canvas of={InputStories.Default} />
+
+## Props
+
+<Controls />
+
+## States
+
+### Default
+Basic input with label and helper text.
+
+<Canvas of={InputStories.Default} />
+
+### Disabled
+Input cannot be interacted with.
+
+<Canvas of={InputStories.Disabled} />
+
+### Read Only
+Value cannot be changed but is readable.
+
+<Canvas of={InputStories.ReadOnly} />
+
+### Error State
+Shows error message with icon and error styling.
+
+<Canvas of={InputStories.Error} />
+
+### Success State
+Shows success message with success styling.
+
+<Canvas of={InputStories.Success} />
+
+## Features
+
+### With Info Button
+Label can include an info button for additional context. The button is positioned outside the label element for accessibility.
+
+<Canvas of={InputStories.WithInfoButton} />
+
+### Clearable Input
+When `clearable` is enabled, a clear button (×) appears when the input is focused and has a value. Users can also press ESC to clear.
+
+<Canvas of={InputStories.Clearable} />
+
+### Password with Toggle
+Password inputs can show a visibility toggle button.
+
+<Canvas of={InputStories.PasswordInput} />
+
+### Number with Steppers
+Number inputs automatically display increment/decrement buttons.
+
+<Canvas of={InputStories.NumberInput} />
+
+### With Prefix
+Add text or content before the input field.
+
+<Canvas of={InputStories.WithPrefix} />
+
+### With Suffix
+Add text or content after the input field.
+
+<Canvas of={InputStories.WithSuffix} />
+
+### With Action Slot
+Add an icon or button inside the field (right side).
+
+<Canvas of={InputStories.WithAction} />
+
+### Prefix and Suffix Combined
+Use both prefix and suffix together.
+
+<Canvas of={InputStories.WithPrefixAndSuffix} />
+
+## Input Types
+
+### Text
+<Canvas of={InputStories.TextInput} />
+
+### Email
+<Canvas of={InputStories.EmailInput} />
+
+### Password
+<Canvas of={InputStories.PasswordInput} />
+
+### Number
+<Canvas of={InputStories.NumberInput} />
+
+### Decimal Numbers
+<Canvas of={InputStories.DecimalInput} />
+
+## Usage
+
+### Basic Usage
+
+```html
+<ds-input 
+  label="Email" 
+  placeholder="your@email.com"
+  helper="We'll never share your email"
+></ds-input>
+```
+
+### With Validation
+
+```html
+<ds-input 
+  label="Email" 
+  value="invalid@" 
+  validation-status="error"
+  validation-message="Please enter a valid email address"
+></ds-input>
+
+<ds-input 
+  label="Username" 
+  value="john_doe" 
+  validation-status="success"
+  validation-message="Username is available"
+></ds-input>
+```
+
+### With Clearable
+
+```html
+<ds-input 
+  label="Search" 
+  placeholder="Type to search..."
+  clearable
+></ds-input>
+```
+
+### With Slots
+
+```html
+<ds-input label="Website" placeholder="example.com">
+  <span slot="prefix">https://</span>
+</ds-input>
+
+<ds-input label="Price" type="number" value="99.99">
+  <span slot="prefix">$</span>
+  <span slot="suffix">USD</span>
+</ds-input>
+
+<ds-input label="Search" placeholder="Type to search..." clearable>
+  <ds-icon-button 
+    slot="action" 
+    icon="search" 
+    variant="action"
+    size="s"
+  ></ds-icon-button>
+</ds-input>
+```
+
+### Password with Toggle
+
+```html
+<ds-input 
+  label="Password" 
+  type="password"
+  show-password-toggle
+  helper="Min. 8 characters"
+></ds-input>
+```
+
+### Number Input
+
+```html
+<ds-input 
+  label="Quantity" 
+  type="number"
+  value="1"
+  step="1"
+></ds-input>
+
+<ds-input 
+  label="Price" 
+  type="number"
+  value="10.00"
+  step="0.5"
+></ds-input>
+```
+
+## Keyboard Shortcuts
+
+| Key | Action |
+|-----|--------|
+| `Tab` | Navigate between input and action buttons |
+| `ESC` | Clear input value (when `clearable` is enabled) |
+| `Ctrl/Cmd + A` | Select all text (native behavior) |
+| `Enter/Space` | Activate focused button (password toggle, clear, etc.) |
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `input` | `{ value }` | Fired when input value changes |
+| `change` | `{ value }` | Fired when input loses focus |
+| `info-click` | `{ info }` | Fired when info button is clicked |
+
+## Accessibility
+
+### ARIA Attributes
+- `aria-invalid="true"` when validation-status is "error"
+- `aria-required="true"` when required
+- `aria-describedby` links to helper text or validation message
+- Icon buttons have descriptive `aria-label` attributes
+
+### Keyboard Navigation
+- All interactive elements (input, info button, action buttons) are keyboard accessible
+- Tab order follows visual layout: info button → input → action buttons
+- Clear button only appears on focus to reduce tab stops
+
+### Screen Reader Support
+- Validation messages are announced when they change
+- Icon button labels clearly describe their purpose ("Clear input", "Show password", etc.)
+- Error icon provides visual indication for sighted users while ARIA attributes convey state to screen readers
+
+### Focus Management
+- Clear focus indicators on all interactive elements
+- Selecting all text on focus helps users quickly replace content
+- Clear button automatically refocuses input after clearing
+
+### Best Practices
+- Always provide a descriptive label
+- Use helper text to provide additional context
+- For password fields, use `show-password-toggle` for better UX
+- Use validation-status and validation-message for form feedback
+- The clearable feature works best for search and filter inputs

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

@@ -0,0 +1,298 @@
+import '../ds-icon/ds-icon.js';
+import '../ds-icon-button/ds-icon-button.js';
+import './ds-input.js';
+
+export default {
+    title: 'Components/Input',
+    component: 'ds-input',
+    tags: ['autodocs'],
+    argTypes: {
+        label: { control: 'text' },
+        info: { control: 'text' },
+        placeholder: { control: 'text' },
+        value: { control: 'text' },
+        type: {
+            control: 'select',
+            options: ['text', 'email', 'password', 'number']
+        },
+        helper: { control: 'text' },
+        validationStatus: {
+            control: 'select',
+            options: [undefined, 'error', 'success']
+        },
+        validationMessage: { control: 'text' },
+        disabled: { control: 'boolean' },
+        readonly: { control: 'boolean' },
+        required: { control: 'boolean' },
+        showPasswordToggle: { control: 'boolean' },
+        clearable: { control: 'boolean' },
+        step: { control: 'number' },
+        min: { control: 'number' },
+        max: { control: 'number' },
+        clamp: { control: 'boolean' },
+        width: { control: 'text' },
+        textAlign: {
+            control: 'select',
+            options: ['left', 'center', 'right']
+        },
+        autocomplete: { control: 'text' },
+        labelPosition: {
+            control: 'select',
+            options: ['top', 'inline-start']
+        },
+        labelWidth: { control: 'text' }
+    }
+};
+
+// Helper to convert camelCase to kebab-case
+const toKebabCase = (str) => str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+
+const Template = (args) => {
+    const input = document.createElement('ds-input');
+
+    Object.keys(args).forEach(key => {
+        if (args[key] !== undefined && args[key] !== null && args[key] !== '') {
+            const attrName = toKebabCase(key);
+            if (attrName === 'min' || attrName === 'max' || attrName === 'step') {
+                // Numeric props need to be passed as properties/attributes carefully
+                input.setAttribute(attrName, args[key]);
+            } else if (typeof args[key] === 'boolean') {
+                if (args[key]) input.setAttribute(attrName, '');
+            } else {
+                input.setAttribute(attrName, args[key]);
+            }
+        }
+    });
+
+    return input;
+};
+
+const TemplateWithSlots = (args, slots = {}) => {
+    const wrapper = document.createElement('div');
+
+    let slotsHTML = '';
+    if (slots.prefix) slotsHTML += `<span slot="prefix">${slots.prefix}</span>`;
+    if (slots.suffix) slotsHTML += `<span slot="suffix">${slots.suffix}</span>`;
+    if (slots.action) slotsHTML += slots.action;
+
+    const attrs = Object.keys(args)
+        .filter(key => args[key] !== undefined && args[key] !== null && args[key] !== '')
+        .map(key => {
+            const attrName = toKebabCase(key);
+            if (typeof args[key] === 'boolean') {
+                return args[key] ? attrName : '';
+            }
+            return `${attrName}="${args[key]}"`;
+        })
+        .join(' ');
+
+    wrapper.innerHTML = `<ds-input ${attrs}>${slotsHTML}</ds-input>`;
+    return wrapper.firstElementChild;
+};
+
+// ============================================================================
+// BASIC EXAMPLES
+// ============================================================================
+
+export const Default = Template.bind({});
+Default.args = {
+    label: 'Email',
+    placeholder: 'Enter your email',
+    helper: 'We\'ll never share your email',
+    autocomplete: 'email'
+};
+
+export const InlineLabel = Template.bind({});
+InlineLabel.args = {
+    label: 'Username',
+    labelPosition: 'inline-start',
+    labelWidth: '120px',
+    placeholder: 'Enter username',
+    helper: 'Label is aligned to the left'
+};
+
+export const WithInfoButton = Template.bind({});
+WithInfoButton.args = {
+    label: 'API Key',
+    info: 'You can find your API key in account settings',
+    placeholder: 'Enter API key'
+};
+
+
+export const LongLabelWithInfo = Template.bind({});
+LongLabelWithInfo.args = {
+    label: 'This is a very long label that will eventually wrap to the next line in a narrow container',
+    info: 'Information about this very long label',
+    placeholder: 'Enter text here'
+};
+LongLabelWithInfo.decorators = [
+    (Story) => {
+        const wrapper = document.createElement('div');
+        wrapper.style.maxWidth = '200px';
+        wrapper.appendChild(Story());
+        return wrapper;
+    }
+];
+
+// ============================================================================
+// STATES
+// ============================================================================
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+    label: 'Email',
+    value: 'user@example.com',
+    disabled: true
+};
+
+export const ReadOnly = Template.bind({});
+ReadOnly.args = {
+    label: 'Username',
+    value: 'john_doe',
+    readonly: true,
+    helper: 'Username cannot be changed'
+};
+
+export const Error = Template.bind({});
+Error.args = {
+    label: 'Email',
+    value: 'invalid@',
+    validationStatus: 'error',
+    validationMessage: 'Please enter a valid email address'
+};
+
+export const Success = Template.bind({});
+Success.args = {
+    label: 'Email',
+    value: 'user@example.com',
+    validationStatus: 'success',
+    validationMessage: 'Email is available'
+};
+
+// ============================================================================
+// INPUT TYPES
+// ============================================================================
+
+export const TextInput = Template.bind({});
+TextInput.args = {
+    label: 'Full Name',
+    type: 'text',
+    placeholder: 'John Doe',
+    required: true,
+    autocomplete: 'name'
+};
+
+export const EmailInput = Template.bind({});
+EmailInput.args = {
+    label: 'Email Address',
+    type: 'email',
+    placeholder: 'you@example.com',
+    helper: 'Enter a valid email',
+    autocomplete: 'email'
+};
+
+export const PasswordInput = Template.bind({});
+PasswordInput.args = {
+    label: 'Password',
+    type: 'password',
+    placeholder: 'Enter password',
+    showPasswordToggle: true,
+    helper: 'Min. 8 characters',
+    autocomplete: 'current-password'
+};
+
+export const NumberInput = Template.bind({});
+NumberInput.args = {
+    label: 'Age',
+    type: 'number',
+    value: '18',
+    min: 0,
+    max: 120,
+    step: 1,
+    clamp: true,
+    helper: 'Enter value between 0-120 (auto-clamps on blur)'
+};
+
+export const DecimalInput = Template.bind({});
+DecimalInput.args = {
+    label: 'Price',
+    type: 'number',
+    value: '10.00',
+    step: 0.5,
+    min: 0,
+    helper: 'Increments by 0.50'
+};
+
+export const Clearable = Template.bind({});
+Clearable.args = {
+    label: 'Search',
+    placeholder: 'Type to search...',
+    clearable: true,
+    value: 'example query',
+    helper: 'Click × to clear or press ESC'
+};
+
+// ============================================================================
+// WITH SLOTS
+// ============================================================================
+
+export const WithPrefix = (args) => {
+    return TemplateWithSlots(
+        {
+            ...args,
+            label: args.label || 'Website',
+            placeholder: args.placeholder || 'example.com'
+        },
+        { prefix: 'https://' }
+    );
+};
+
+export const WithSuffix = (args) => {
+    return TemplateWithSlots(
+        {
+            ...args,
+            label: args.label || 'Domain',
+            placeholder: args.placeholder || 'mysite'
+        },
+        { suffix: '.com' }
+    );
+};
+
+export const WithPrefixAndSuffix = (args) => {
+    return TemplateWithSlots(
+        {
+            ...args,
+            label: args.label || 'Price',
+            type: args.type || 'number',
+            value: args.value || '99.99',
+            step: args.step || 0.01
+        },
+        { prefix: '$', suffix: 'USD' }
+    );
+};
+
+export const WithAction = (args) => {
+    const actionHTML = '<ds-icon-button slot="action" icon="search" variant="action" size="s" aria-label="Search"></ds-icon-button>';
+    return TemplateWithSlots(
+        {
+            ...args,
+            label: args.label || 'Search',
+            placeholder: args.placeholder || 'Search...',
+            clearable: args.clearable !== undefined ? args.clearable : true,
+            value: args.value || 'test query'
+        },
+        { action: actionHTML }
+    );
+};
+
+export const CustomWidth = Template.bind({});
+CustomWidth.args = {
+    label: 'Compact Input',
+    width: '120px',
+    textAlign: 'center',
+    placeholder: '000',
+    type: 'number',
+    helper: 'Centered text, fixed width'
+};
+
+