standards-ui
Version:
A foundational design system built with native Web Components. Includes comprehensive TypeScript types, JSDoc documentation, and component examples.
3,166 lines (1,005 loc) • 50.6 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Home</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Home</h1>
<h3> </h3>
<section>
<header>
<h2>base-component.js</h2>
</header>
<article>
<div class="container-overview">
<div class="description">Provides common functionality for all design system components including
shadow DOM setup, event handling, and attribute management.</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base-component.js.html">base-component.js</a>, <a href="base-component.js.html#line1">line 1</a>
</li></ul></dd>
</dl>
</div>
</article>
</section>
<section>
<header>
<h2>ds-button.js</h2>
</header>
<article>
<div class="container-overview">
<div class="description">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 `<ds-button>...</ds-button>` 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 `<form>`. 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 `<ds-button>` 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.</div>
<h5 class="subsection-title">Properties:</h5>
<table class="props">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>type</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Gets or sets the type of the button.</td>
</tr>
<tr>
<td class="name"><code>disabled</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">Gets or sets the disabled state of the button.</td>
</tr>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Gets or sets the name of the button.</td>
</tr>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Gets or sets the value of the button.</td>
</tr>
<tr>
<td class="name"><code>variant</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Gets or sets the variant of the button.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="ds-button.js.html">ds-button.js</a>, <a href="ds-button.js.html#line1">line 1</a>
</li></ul></dd>
</dl>
<h3>Examples</h3>
<pre class="prettyprint"><code><!-- Basic button -->
<ds-button>Click me</ds-button></code></pre>
<pre class="prettyprint"><code><!-- Submit button with variant -->
<ds-button type="submit" variant="primary">Submit Form</ds-button></code></pre>
<pre class="prettyprint"><code><!-- Disabled button -->
<ds-button disabled variant="secondary">Disabled Button</ds-button></code></pre>
<pre class="prettyprint"><code><!-- Button with ARIA label -->
<ds-button aria-label="Close dialog"></ds-button></code></pre>
<pre class="prettyprint"><code><!-- Listening for click event -->
<ds-button id="myBtn">Save</ds-button>
<script>
document.getElementById('myBtn').addEventListener('click', () => alert('Clicked!'));
</script></code></pre>
</div>
<h3 class="subsection-title">Extends</h3>
<ul>
<li><a href="BaseComponent.html">BaseComponent</a></li>
</ul>
</article>
</section>
<section>
<header>
<h2>ds-card.js</h2>
</header>
<article>
<div class="container-overview">
<div class="description">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 `<ds-card>...</ds-card>` is rendered via the default slot.
- If the `href` attribute is present, the card renders as a clickable link (`<a>`) with keyboard accessibility (Enter/Space to activate).
- If `href` is not present, the card renders as a static `<div>`.
- 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.</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="ds-card.js.html">ds-card.js</a>, <a href="ds-card.js.html#line1">line 1</a>
</li></ul></dd>
</dl>
<h3>Examples</h3>
<pre class="prettyprint"><code><!-- Static card -->
<ds-card>
<h2>Card Title</h2>
<p>Some description or content.</p>
</ds-card></code></pre>
<pre class="prettyprint"><code><!-- Clickable card link -->
<ds-card href="https://example.com">
<h2>Go to Example</h2>
<p>This card acts as a link.</p>
</ds-card></code></pre>
</div>
</article>
</section>
<section>
<header>
<h2>ds-checkbox.js</h2>
</header>
<article>
<div class="container-overview">
<div class="description">The `ds-checkbox` component provides a styled and functional checkbox.
It supports both single checkboxes and groups of checkboxes for multiple selections.</div>
<h5 class="subsection-title">Properties:</h5>
<table class="props">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>checked</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">Gets or sets the checked state of the checkbox.</td>
</tr>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Gets or sets the value of the checkbox.</td>
</tr>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Gets or sets the name of the checkbox.</td>
</tr>
<tr>
<td class="name"><code>disabled</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">Gets or sets the disabled state of the checkbox.</td>
</tr>
<tr>
<td class="name"><code>readonly</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">Gets or sets the readonly state of the checkbox.</td>
</tr>
<tr>
<td class="name"><code>required</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">Gets or sets the required state of the checkbox.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="ds-checkbox.js.html">ds-checkbox.js</a>, <a href="ds-checkbox.js.html#line1">line 1</a>
</li></ul></dd>
</dl>
<h3>Examples</h3>
<pre class="prettyprint"><code><!-- Basic checkbox -->
<ds-checkbox name="agree" value="yes" id="agree-terms">I agree to the terms</ds-checkbox></code></pre>
<pre class="prettyprint"><code><!-- Checkbox with default selection -->
<ds-checkbox name="newsletter" value="subscribe" checked>Subscribe to newsletter</ds-checkbox></code></pre>
<pre class="prettyprint"><code><!-- 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></code></pre>
</div>
<h3 class="subsection-title">Extends</h3>
<ul>
<li><a href="BaseComponent.html">BaseComponent</a></li>
</ul>
</article>
</section>
<section>
<header>
<h2>ds-col.js</h2>
</header>
<article>
<div class="container-overview">
<div class="description">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 `<ds-col>...</ds-col>` 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.</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="ds-col.js.html">ds-col.js</a>, <a href="ds-col.js.html#line1">line 1</a>
</li></ul></dd>
</dl>
<h3>Examples</h3>
<pre class="prettyprint"><code><!-- A basic column with default flex properties -->
<ds-row>
<ds-col>
<div>Content 1</div>
<div>Content 2</div>
</ds-col>
</ds-row></code></pre>
<pre class="prettyprint"><code><!-- 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></code></pre>
<pre class="prettyprint"><code><!-- 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></code></pre>
</div>
</article>
</section>
<section>
<header>
<h2>ds-fieldset.js</h2>
</header>
<article>
<div class="container-overview">
<div class="description">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 `<ds-fieldset>...</ds-fieldset>` is rendered via the default slot as the fieldset content.
- Should contain a `<ds-legend>` or native `<legend>` 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.</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="ds-fieldset.js.html">ds-fieldset.js</a>, <a href="ds-fieldset.js.html#line1">line 1</a>
</li></ul></dd>
</dl>
<h3>Examples</h3>
<pre class="prettyprint"><code><!-- 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></code></pre>
<pre class="prettyprint"><code><!-- 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></code></pre>
<pre class="prettyprint"><code><!-- 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></code></pre>
</div>
</article>
</section>
<section>
<header>
<h2>ds-form.js</h2>
</header>
<article>
<div class="container-overview">
<div class="description">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.</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="ds-form.js.html">ds-form.js</a>, <a href="ds-form.js.html#line1">line 1</a>
</li></ul></dd>
</dl>
<h3>Examples</h3>
<pre class="prettyprint"><code><!-- 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></code></pre>
<pre class="prettyprint"><code><!-- 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></code></pre>
<pre class="prettyprint"><code><!-- 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></code></pre>
</div>
<h3 class="subsection-title">Extends</h3>
<ul>
<li><a href="BaseComponent.html">BaseComponent</a></li>
</ul>
</article>
</section>
<section>
<header>
<h2>ds-label.js</h2>
</header>
<article>
<div class="container-overview">
<div class="description">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 `<ds-label>...</ds-label>` 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 `<label>`).
- Supports ARIA attributes: `aria-label`, `aria-describedby` for accessibility.
- Uses `part="label"` for styling via Shadow DOM.
- Fires a `click` event when the label is clicked (native label behavior).
- Warns in the console if no accessible name is provided, or if `for` references a missing element.</div>
<h5 class="subsection-title">Properties:</h5>
<table class="props">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>htmlFor</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Gets or sets the ID of the associated form control.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="ds-label.js.html">ds-label.js</a>, <a href="ds-label.js.html#line1">line 1</a>
</li></ul></dd>
</dl>
<h3>Examples</h3>
<pre class="prettyprint"><code><!-- Basic label -->
<ds-label>Username</ds-label></code></pre>
<pre class="prettyprint"><code><!-- Label with explicit association -->
<ds-label for="username-input">Username</ds-label>
<ds-text-input id="username-input"></ds-text-input></code></pre>
<pre class="prettyprint"><code><!-- 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></code></pre>
<pre class="prettyprint"><code><!-- 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></code></pre>
</div>
</article>
</section>
<section>
<header>
<h2>ds-legend.js</h2>
</header>
<article>
<div class="container-overview">
<div class="description">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
`<ds-fieldset>` components to describe the group of form controls.
- The content inside `<ds-legend>...</ds-legend>` is rendered via the default slot as the legend text.
- Should be used as the first child of a `<ds-fieldset>` 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.</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="ds-legend.js.html">ds-legend.js</a>, <a href="ds-legend.js.html#line1">line 1</a>
</li></ul></dd>
</dl>
<h3>Examples</h3>
<pre class="prettyprint"><code><!-- 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></code></pre>
<pre class="prettyprint"><code><!-- 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></code></pre>
<pre class="prettyprint"><code><!-- 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></code></pre>
</div>
</article>
</section>
<section>
<header>
<h2>ds-option.js</h2>
</header>
<article>
<div class="container-overview">
<div class="description">The `ds-option` component provides a styled and functional option element
for use within `<ds-select>` components. It maintains proper option behavior
and can be used as an alternative to native `<option>` elements.</div>
<h5 class="subsection-title">Properties:</h5>
<table class="props">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Gets or sets the value of the option.</td>
</tr>
<tr>
<td class="name"><code>selected</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">Gets or sets the selected state of the option.</td>
</tr>
<tr>
<td class="name"><code>disabled</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">Gets or sets the disabled state of the option.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="ds-option.js.html">ds-option.js</a>, <a href="ds-option.js.html#line1">line 1</a>
</li></ul></dd>
</dl>
<h3>Examples</h3>
<pre class="prettyprint"><code><!-- Basic option -->
<ds-option value="option1">Option 1</ds-option></code></pre>
<pre class="prettyprint"><code><!-- Pre-selected option -->
<ds-option value="default" selected>Default Option</ds-option></code></pre>
<pre class="prettyprint"><code><!-- Disabled option -->
<ds-option value="disabled" disabled>Disabled Option</ds-option></code></pre>
<pre class="prettyprint"><code><!-- 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></code></pre>
</div>
<h3 class="subsection-title">Extends</h3>
<ul>
<li><a href="BaseComponent.html">BaseComponent</a></li>
</ul>
</article>
</section>
<section>
<header>
<h2>ds-page.js</h2>
</header>
<article>
<div class="container-overview">
<div class="description">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 `<ds-page>...</ds-page>` is rendered via the default slot.
- Uses a `<main>` 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.</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="ds-page.js.html">ds-page.js</a>, <a href="ds-page.js.html#line1">line 1</a>
</li></ul></dd>
</dl>
<h3>Examples</h3>
<pre class="prettyprint"><code><!-- Basic page wrapper -->
<ds-page>
<h1>Welcome to My App</h1>
<p>This content is wrapped in a consistent page layout.</p>
</ds-page></code></pre>
<pre class="prettyprint"><code><!-- 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></code></pre>
</div>
</article>
</section>
<section>
<header>
<h2>ds-radio.js</h2>
</header>
<article>
<div class="container-overview">
<div class="description">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.</div>
<h5 class="subsection-title">Properties:</h5>
<table class="props">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>checked</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">Gets or sets the checked state of the radio button.</td>
</tr>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Gets or sets the value of the radio button.</td>
</tr>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Gets or sets the name of the radio button.</td>
</tr>
<tr>
<td class="name"><code>disabled</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">Gets or sets the disabled state of the radio button.</td>
</tr>
<tr>
<td class="name"><code>readonly</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">Gets or sets the readonly state of the radio button.</td>
</tr>
<tr>
<td class="name"><code>required</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">Gets or sets the required state of the radio button.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="ds-radio.js.html">ds-radio.js</a>, <a href="ds-radio.js.html#line1">line 1</a>
</li></ul></dd>
</dl>
<h3>Examples</h3>
<pre class="prettyprint"><code><!-- 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></code></pre>
<pre class="prettyprint"><code><!-- 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></code></pre>
<pre class="prettyprint"><code><!-- Disabled radio button -->
<ds-radio name="status" value="inactive" disabled>Inactive</ds-radio></code></pre>
</div>
<h3 class="subsection-title">Extends</h3>
<ul>
<li><a href="BaseComponent.html">BaseComponent</a></li>
</ul>
</article>
</section>
<section>
<header>
<h2>ds-row.js</h2>
</header>
<article>
<div class="container-overview">
<div class="description">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 `<ds-row>...</ds-row>` 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.</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="ds-row.js.html">ds-row.js</a>, <a href="ds-row.js.html#line1">line 1</a>
</li></ul></dd>
</dl>
<h3>Examples</h3>
<pre class="prettyprint"><code><!-- A basic row with default alignment and spacing -->
<ds-row>
<div>Item 1</div>
<div>Item 2</div>
</ds-row></code></pre>
<pre class="prettyprint"><code><!-- 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></code></pre>
<pre class="prettyprint"><code><!-- 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></code></pre>
</div>
</article>
</section>
<section>
<header>
<h2>ds-select.js</h2>
</header>
<article>
<div class="container-overview">
<div class="description">The `ds-select` component provides a styled and functional select dropdown.
It supports both single and multiple selection, and can work with both native
`<option>` elements and custom `<ds-option>` components.</div>
<h5 class="subsection-title">Properties:</h5>
<table class="props">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Gets or sets the currently selected option's value.</td>
</tr>
<tr>
<td class="name"><code>disabled</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">Gets or sets the disabled state of the select.</td>
</tr>
<tr>
<td class="name"><code>required</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">Gets or sets the required state of the select.</td>
</tr>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Gets or sets the name of the select.</td>
</tr>
<tr>
<td class="name"><code>multiple</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">Gets or sets the multiple selection state.</td>
</tr>
<tr>
<td class="name"><code>size</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">Gets or sets the number of visible options.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="ds-select.js.html">ds-select.js</a>, <a href="ds-select.js.html#line1">line 1</a>
</li></ul></dd>
</dl>
<h3>Examples</h3>
<pre class="prettyprint"><code><!-- 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></code></pre>
<pre class="prettyprint"><code><!-- 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></code></pre>
<pre class="prettyprint"><code><!-- 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></code></pre>
</div>
<h3 class="subsection-title">Extends</h3>
<ul>
<li><a href="BaseComponent.html">BaseComponent</a></li>
</ul>
</article>
</section>
<section>
<header>
<h2>ds-text-input.js</h2>
</header>
<article>
<div class="container-overview">
<div class="description">The `ds-text-input` component provides a styled and functional text input field.
It mirrors common `<input>` attributes and properties, making it easy to use
within forms while leveraging the design system's styling.</div>
<h5 class="subsection-title">Properties:</h5>
<table class="props">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Gets or sets the current value of the input.</td>
</tr>
<tr>
<td class="name"><code>type</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Gets or sets the type of the input.</td>
</tr>
<tr>
<td class="name"><code>disabled</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">Gets or sets the disabled state of the input.</td>
</tr>
<tr>
<td class="name"><code>readonly</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">Gets or sets the readonly state of the input.</td>
</tr>
<tr>
<td class="name"><code>required</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">Gets or sets the required state of the input.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="ds-text-input.js.html">ds-text-input.js</a>, <a href="ds-text-input.js.html#line1">line 1</a>
</li></ul></dd>
</dl>
<h3>Examples</h3>
<pre class="prettyprint"><code><!-- Basic text input -->
<ds-text-input placeholder="Enter your name" id="username-input"></ds-text-input>
<ds-label for="username-input">Username</ds-label></code></pre>
<pre class="prettyprint"><code><!-- Password input that is required -->
<ds-text-input type="password" required placeholder="Your password"></ds-text-input></code></pre>
<pre class="prettyprint"><code><!-- Disabled email input with a pre-filled value -->
<ds-text-input type="email" value="example@domain.com" disabled></ds-text-input></code></pre>
</div>
<h3 class="subsection-title">Extends</h3>
<ul>
<li><a href="BaseComponent.html">BaseComponent</a></li>
</ul>
</article>
</section>
<section>
<header>
<h2>ds-textarea.js</h2>
</header>
<article>
<div class="container-overview">
<div class="description">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.</div>
<h5 class="subsection-title">Properties:</h5>
<table class="props">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Gets or sets the current value of the textarea.</td>
</tr>
<tr>
<td class="name"><code>placeholder</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Gets or sets the placeholder text of the textarea.</td>
</tr>
<tr>
<td class="name"><code>rows</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">Gets or sets the number of rows in the textarea.</td>
</tr>
<tr>
<td class="name"><code>cols</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">Gets or sets the number of columns in the textarea.</td>
</tr>
<tr>
<td class="name"><code>disabled</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">Gets or sets the disabled state of the textarea.</td>
</tr>
<tr>
<td class="name"><code>readonly</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">Gets or sets the readonly state of the textarea.</td>
</tr>
<tr>
<td class="name"><code>required</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">Gets or sets the required state of the textarea.</td>
</tr>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Gets or sets the name of the textarea.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="ds-textarea.js.html">ds-textarea.js</a>, <a href="ds-textarea.js.html#line1">line 1</a>
</li></ul></dd>
</dl>
<h3>Examples</h3>
<pre class="prettyprint"><code><!-- Basic textarea -->
<ds-textarea placeholder="Enter your message" rows="4" cols="50"></ds-textarea></code></pre>
<pre class="prettyprint"><code><!-- Required textarea with pre-filled value -->
<ds-textarea value="Default text" required rows="6">Enter description</ds-textarea></code></pre>
<pre class="prettyprint"><code><!-- Disabled textarea -->
<ds-textarea value="Read-only content" disabled rows="3"></ds-textarea></code></pre>
</div>
<h3 class="subsection-title">Extends</h3>