Home

base-component.js

Provides common functionality for all design system components including shadow DOM setup, event handling, and attribute management.
Source:

ds-button.js

The `ds-button` component provides a styled and functional button element. It supports various button types and variants while maintaining accessibility and proper event handling. The content inside `...` is rendered as the button label via the default slot. Allowed `variant` values: `primary`, `secondary`, `danger`. These control the button's visual style. Can be used inside a `
`. When `type="submit"`, it will submit the form like a native button. `name` and `value` attributes are included in form data. You can listen for standard events (`click`, `focus`, `blur`) on `` just like a native button, e.g. `addEventListener('click', ...)`. If no accessible name is provided (text content or ARIA), the component will warn in the console for accessibility compliance. The button is fully keyboard accessible and focusable by default. The native button uses `part="button"` for styling via the Shadow DOM: you can use `::part(button)` in your CSS.
Properties:
Name Type Description
type string Gets or sets the type of the button.
disabled boolean Gets or sets the disabled state of the button.
name string Gets or sets the name of the button.
value string Gets or sets the value of the button.
variant string Gets or sets the variant of the button.
Source:

Examples

<!-- Basic button -->
<ds-button>Click me</ds-button>
<!-- Submit button with variant -->
<ds-button type="submit" variant="primary">Submit Form</ds-button>
<!-- Disabled button -->
<ds-button disabled variant="secondary">Disabled Button</ds-button>
<!-- Button with ARIA label -->
<ds-button aria-label="Close dialog"></ds-button>
<!-- Listening for click event -->
<ds-button id="myBtn">Save</ds-button>
<script>
  document.getElementById('myBtn').addEventListener('click', () => alert('Clicked!'));
</script>

Extends

ds-card.js

The `ds-card` component displays its content in a styled card. It can be used as a static card or as a clickable card link. - The content inside `...` is rendered via the default slot. - If the `href` attribute is present, the card renders as a clickable link (``) with keyboard accessibility (Enter/Space to activate). - If `href` is not present, the card renders as a static `
`. - The card is always focusable and accessible by keyboard. - Uses CSS custom properties for background, border, radius, shadow, padding, and text color. - The card is styled via Shadow DOM; no `part` attribute is exposed.
Source:

Examples

<!-- Static card -->
<ds-card>
  <h2>Card Title</h2>
  <p>Some description or content.</p>
</ds-card>
<!-- Clickable card link -->
<ds-card href="https://example.com">
  <h2>Go to Example</h2>
  <p>This card acts as a link.</p>
</ds-card>

ds-checkbox.js

The `ds-checkbox` component provides a styled and functional checkbox. It supports both single checkboxes and groups of checkboxes for multiple selections.
Properties:
Name Type Description
checked boolean Gets or sets the checked state of the checkbox.
value string Gets or sets the value of the checkbox.
name string Gets or sets the name of the checkbox.
disabled boolean Gets or sets the disabled state of the checkbox.
readonly boolean Gets or sets the readonly state of the checkbox.
required boolean Gets or sets the required state of the checkbox.
Source:

Examples

<!-- Basic checkbox -->
<ds-checkbox name="agree" value="yes" id="agree-terms">I agree to the terms</ds-checkbox>
<!-- Checkbox with default selection -->
<ds-checkbox name="newsletter" value="subscribe" checked>Subscribe to newsletter</ds-checkbox>
<!-- Multiple checkboxes for preferences -->
<ds-checkbox name="preferences" value="email">Email notifications</ds-checkbox>
<ds-checkbox name="preferences" value="sms">SMS notifications</ds-checkbox>
<ds-checkbox name="preferences" value="push">Push notifications</ds-checkbox>

Extends

ds-col.js

The `ds-col` component serves dual purposes: as a flex item within a row and as a flex container for its own children. It exposes both flex item properties (for positioning within parent rows) and flex container properties (for its own children). - The content inside `...` is rendered via the default slot. - The column is a flex item (relative to its parent) and a flex container (`display: flex; flex-direction: column`) for its children. - Supports ARIA attributes: `aria-label`, `aria-describedby` for accessibility. - No role is set by default; set ARIA attributes as needed for context. - The component is styled via Shadow DOM; no `part` attribute is exposed. - No custom events are fired.
Source:

Examples

<!-- A basic column with default flex properties -->
<ds-row>
  <ds-col>
    <div>Content 1</div>
    <div>Content 2</div>
  </ds-col>
</ds-row>
<!-- A column that takes up 2/3 of available space with centered content -->
<ds-row>
  <ds-col flex-grow="2" justify-content="center" align-items="center">
    <div>Main Content</div>
  </ds-col>
  <ds-col flex-grow="1">
    <div>Sidebar</div>
  </ds-col>
</ds-row>
<!-- A column with specific width and gap between items -->
<ds-col flex-basis="300px" gap="16px">
  <div>Item A</div>
  <div>Item B</div>
  <div>Item C</div>
</ds-col>

ds-fieldset.js

The `ds-fieldset` component provides a styled and functional fieldset element for grouping related form controls together. It creates a visual and semantic grouping that improves form organization and accessibility. - The content inside `...` is rendered via the default slot as the fieldset content. - Should contain a `` or native `` as the first child for accessibility. - Supports ARIA attributes: `aria-label`, `aria-describedby` for accessibility. - Uses `part="fieldset"` for styling via Shadow DOM. - Warns in the console if no accessible name (legend or `aria-label`) is provided. - No custom events are fired.
Source:

Examples

<!-- Basic fieldset -->
<ds-fieldset>
  <ds-legend>Personal Information</ds-legend>
  <ds-label for="first-name">First Name</ds-label>
  <ds-text-input id="first-name" name="firstName"></ds-text-input>
  <ds-label for="last-name">Last Name</ds-label>
  <ds-text-input id="last-name" name="lastName"></ds-text-input>
</ds-fieldset>
<!-- Fieldset with radio buttons -->
<ds-fieldset>
  <ds-legend>Gender</ds-legend>
  <ds-radio name="gender" value="male" id="male">Male</ds-radio>
  <ds-radio name="gender" value="female" id="female">Female</ds-radio>
  <ds-radio name="gender" value="other" id="other">Other</ds-radio>
</ds-fieldset>
<!-- Fieldset with checkboxes -->
<ds-fieldset>
  <ds-legend>Interests</ds-legend>
  <ds-checkbox name="interests" value="sports" id="sports">Sports</ds-checkbox>
  <ds-checkbox name="interests" value="music" id="music">Music</ds-checkbox>
  <ds-checkbox name="interests" value="reading" id="reading">Reading</ds-checkbox>
</ds-fieldset>

ds-form.js

The `ds-form` component provides a styled and functional form element with enhanced accessibility features, validation support, and error state management. It wraps a native form element to maintain full HTML form semantics while adding design system styling and ARIA compliance features.
Source:

Examples

<!-- Basic form -->
<ds-form action="/api/login" method="post">
  <ds-fieldset>
    <ds-legend>Login Information</ds-legend>
    <ds-label for="username">Username</ds-label>
    <ds-text-input id="username" name="username" required></ds-text-input>
    <ds-label for="password">Password</ds-label>
    <ds-text-input id="password" name="password" type="password" required></ds-text-input>
  </ds-fieldset>
  <ds-button type="submit">Login</ds-button>
</ds-form>
<!-- Form with ARIA attributes -->
<ds-form 
  action="/api/register" 
  method="post" 
  aria-label="User registration form"
  aria-describedby="form-instructions">
  <div id="form-instructions">Please fill out all required fields marked with an asterisk (*)</div>
  <ds-fieldset>
    <ds-legend>Personal Information</ds-legend>
    <ds-label for="firstName">First Name *</ds-label>
    <ds-text-input id="firstName" name="firstName" required></ds-text-input>
  </ds-fieldset>
  <ds-button type="submit">Register</ds-button>
</ds-form>
<!-- Form with custom validation -->
<ds-form 
  action="/api/contact" 
  method="post"
  novalidate
  data-validation="custom">
  <ds-fieldset>
    <ds-legend>Contact Information</ds-legend>
    <ds-label for="email">Email Address</ds-label>
    <ds-text-input id="email" name="email" type="email" required></ds-text-input>
  </ds-fieldset>
  <ds-button type="submit">Send Message</ds-button>
</ds-form>

Extends

ds-label.js

The `ds-label` component provides a styled and functional label element for associating text with form controls. It supports the `for` attribute to create explicit associations with form elements. - The content inside `...` is rendered via the default slot as the label text. - Supports the `for` attribute to associate the label with a form control by ID (like native `
Properties:
Name Type Description
htmlFor string Gets or sets the ID of the associated form control.
Source:

Examples

<!-- Basic label -->
<ds-label>Username</ds-label>
<!-- Label with explicit association -->
<ds-label for="username-input">Username</ds-label>
<ds-text-input id="username-input"></ds-text-input>
<!-- Label with form control -->
<ds-label for="email-field">Email Address</ds-label>
<ds-text-input type="email" id="email-field" required></ds-text-input>
<!-- Label with checkbox -->
<ds-label for="agree-terms">I agree to the terms and conditions</ds-label>
<ds-checkbox id="agree-terms" name="agree" value="yes"></ds-checkbox>

ds-legend.js

The `ds-legend` component provides a styled and functional legend element for providing a caption or title for a fieldset. It should be used within `` components to describe the group of form controls. - The content inside `...` is rendered via the default slot as the legend text. - Should be used as the first child of a `` for proper semantics. - Supports ARIA attributes: `aria-label`, `aria-describedby` for accessibility. - Uses `part="legend"` for styling via Shadow DOM. - Warns in the console if no accessible name (text or `aria-label`) is provided. - No custom events are fired.
Source:

Examples

<!-- Basic legend within fieldset -->
<ds-fieldset>
  <ds-legend>Contact Information</ds-legend>
  <ds-label for="email">Email</ds-label>
  <ds-text-input type="email" id="email" name="email"></ds-text-input>
</ds-fieldset>
<!-- Legend with form controls -->
<ds-fieldset>
  <ds-legend>Shipping Address</ds-legend>
  <ds-label for="street">Street Address</ds-label>
  <ds-text-input id="street" name="street"></ds-text-input>
  <ds-label for="city">City</ds-label>
  <ds-text-input id="city" name="city"></ds-text-input>
  <ds-label for="zip">ZIP Code</ds-label>
  <ds-text-input id="zip" name="zip"></ds-text-input>
</ds-fieldset>
<!-- Legend with radio button group -->
<ds-fieldset>
  <ds-legend>Preferred Contact Method</ds-legend>
  <ds-radio name="contact" value="email" id="contact-email">Email</ds-radio>
  <ds-radio name="contact" value="phone" id="contact-phone">Phone</ds-radio>
  <ds-radio name="contact" value="mail" id="contact-mail">Mail</ds-radio>
</ds-fieldset>

ds-option.js

The `ds-option` component provides a styled and functional option element for use within `` components. It maintains proper option behavior and can be used as an alternative to native `
Properties:
Name Type Description
value string Gets or sets the value of the option.
selected boolean Gets or sets the selected state of the option.
disabled boolean Gets or sets the disabled state of the option.
Source:

Examples

<!-- Basic option -->
<ds-option value="option1">Option 1</ds-option>
<!-- Pre-selected option -->
<ds-option value="default" selected>Default Option</ds-option>
<!-- Disabled option -->
<ds-option value="disabled" disabled>Disabled Option</ds-option>
<!-- Usage within ds-select -->
<ds-select name="category">
  <ds-option value="electronics">Electronics</ds-option>
  <ds-option value="clothing">Clothing</ds-option>
  <ds-option value="books">Books</ds-option>
</ds-select>

Extends

ds-page.js

The `ds-page` component handles page-level layout and margins, providing a consistent foundation for application pages. It uses CSS custom properties for customization and ensures proper viewport handling. - The content inside `...` is rendered via the default slot. - Uses a `
` element for the page container, providing a landmark for accessibility/screen readers. - Uses CSS custom properties for layout customization: - `--ds-spacing-page-padding` (default: 20px) — padding for the page container - `--ds-page-max-width` (default: 1200px) — max width for the content - The component is styled via Shadow DOM; no `part` attribute is exposed. - No custom events are fired.
Source:

Examples

<!-- Basic page wrapper -->
<ds-page>
  <h1>Welcome to My App</h1>
  <p>This content is wrapped in a consistent page layout.</p>
</ds-page>
<!-- Page with nested layout components -->
<ds-page>
  <ds-row justify-content="space-between" align-items="center">
    <ds-col>
      <h1>Page Title</h1>
    </ds-col>
    <ds-col>
      <ds-button>Action</ds-button>
    </ds-col>
  </ds-row>
  <ds-row>
    <ds-col>
      <p>Main content area</p>
    </ds-col>
  </ds-row>
</ds-page>

ds-radio.js

The `ds-radio` component provides a styled and functional radio button. It maintains proper radio button behavior where only one option in a group can be selected.
Properties:
Name Type Description
checked boolean Gets or sets the checked state of the radio button.
value string Gets or sets the value of the radio button.
name string Gets or sets the name of the radio button.
disabled boolean Gets or sets the disabled state of the radio button.
readonly boolean Gets or sets the readonly state of the radio button.
required boolean Gets or sets the required state of the radio button.
Source:

Examples

<!-- Basic radio button group -->
<ds-radio name="gender" value="male" id="male">Male</ds-radio>
<ds-radio name="gender" value="female" id="female">Female</ds-radio>
<ds-radio name="gender" value="other" id="other">Other</ds-radio>
<!-- Radio button with default selection -->
<ds-radio name="preference" value="option1" checked>Option 1</ds-radio>
<ds-radio name="preference" value="option2">Option 2</ds-radio>
<!-- Disabled radio button -->
<ds-radio name="status" value="inactive" disabled>Inactive</ds-radio>

Extends

ds-row.js

The `ds-row` component provides a flexible container for arranging items in a row. It leverages CSS Flexbox properties, exposing them as attributes for easy configuration. - The content inside `...` is rendered via the default slot. - The row is a flex container (`display: flex; flex-direction: row`). - Supports ARIA attributes: `aria-label`, `aria-describedby` for accessibility. - No role is set by default; set ARIA attributes as needed for context. - The component is styled via Shadow DOM; no `part` attribute is exposed. - No custom events are fired.
Source:

Examples

<!-- A basic row with default alignment and spacing -->
<ds-row>
<div>Item 1</div>
<div>Item 2</div>
</ds-row>
<!-- A row with items centered and a specific gap -->
<ds-row justify-content="center" align-items="center" gap="20px">
<div>Centered Item A</div>
<div>Centered Item B</div>
</ds-row>
<!-- A wrapping row with space between items -->
<ds-row justify-content="space-between" wrap>
<div>Long Item 1</div>
<div>Item 2</div>
<div>Another Item 3</div>
<div>Short Item 4</div>
</ds-row>

ds-select.js

The `ds-select` component provides a styled and functional select dropdown. It supports both single and multiple selection, and can work with both native `
Properties:
Name Type Description
value string Gets or sets the currently selected option's value.
disabled boolean Gets or sets the disabled state of the select.
required boolean Gets or sets the required state of the select.
name string Gets or sets the name of the select.
multiple boolean Gets or sets the multiple selection state.
size number Gets or sets the number of visible options.
Source:

Examples

<!-- Basic select with native options -->
<ds-select name="country">
  <option value="us">United States</option>
  <option value="ca">Canada</option>
  <option value="uk">United Kingdom</option>
</ds-select>
<!-- Select with custom ds-option components -->
<ds-select name="category" required>
  <ds-option value="electronics">Electronics</ds-option>
  <ds-option value="clothing">Clothing</ds-option>
  <ds-option value="books">Books</ds-option>
</ds-select>
<!-- Multiple selection select -->
<ds-select name="interests" multiple size="4">
  <ds-option value="sports">Sports</ds-option>
  <ds-option value="music">Music</ds-option>
  <ds-option value="reading">Reading</ds-option>
  <ds-option value="travel">Travel</ds-option>
</ds-select>

Extends

ds-text-input.js

The `ds-text-input` component provides a styled and functional text input field. It mirrors common `` attributes and properties, making it easy to use within forms while leveraging the design system's styling.
Properties:
Name Type Description
value string Gets or sets the current value of the input.
type string Gets or sets the type of the input.
disabled boolean Gets or sets the disabled state of the input.
readonly boolean Gets or sets the readonly state of the input.
required boolean Gets or sets the required state of the input.
Source:

Examples

<!-- Basic text input -->
<ds-text-input placeholder="Enter your name" id="username-input"></ds-text-input>
<ds-label for="username-input">Username</ds-label>
<!-- Password input that is required -->
<ds-text-input type="password" required placeholder="Your password"></ds-text-input>
<!-- Disabled email input with a pre-filled value -->
<ds-text-input type="email" value="example@domain.com" disabled></ds-text-input>

Extends

ds-textarea.js

The `ds-textarea` component provides a styled and functional textarea for multi-line text input. It supports various textarea attributes and properties while maintaining accessibility and proper event handling.
Properties:
Name Type Description
value string Gets or sets the current value of the textarea.
placeholder string Gets or sets the placeholder text of the textarea.
rows number Gets or sets the number of rows in the textarea.
cols number Gets or sets the number of columns in the textarea.
disabled boolean Gets or sets the disabled state of the textarea.
readonly boolean Gets or sets the readonly state of the textarea.
required boolean Gets or sets the required state of the textarea.
name string Gets or sets the name of the textarea.
Source:

Examples

<!-- Basic textarea -->
<ds-textarea placeholder="Enter your message" rows="4" cols="50"></ds-textarea>
<!-- Required textarea with pre-filled value -->
<ds-textarea value="Default text" required rows="6">Enter description</ds-textarea>
<!-- Disabled textarea -->
<ds-textarea value="Read-only content" disabled rows="3"></ds-textarea>

Extends