@prioticket/design-system-web 1.0.3 → 1.0.6

package/COMPONENT-DOCUMENTATION.md

@@ -1,610 +1,741 @@
-# Prioticket Design System Web Components
+# @prioticket/design-system-web Components
 
-## Installation
+Version: 1.0.6
 
-```bash
-npm install @prioticket/design-system-web
-```
+### <pd-button> (PdButton)
 
-## NPM Registry Configuration
+The Prioticket button component using Material Web Components.
 
-```ini
-@prioticket:registry=https://gitlab.prioticket.dev/api/v4/projects/193/packages/npm/
-//gitlab.prioticket.dev/api/v4/projects/193/packages/npm/:_authToken=TcG8u2Ryebr6v3x3D19y
-```
+**Properties**
 
-## Usage
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `variant` | `variant` | `'filled' \| 'outlined' \| 'text' \| 'elevated' \| 'tonal'` | `'filled'` | The style variant of the button. |
+| `size` | `size` | `'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` | The size of the button, controlling height, padding, and font size. |
+| `icon` | `icon` | `string` | `''` | The name of the Material Icon to display. |
+| `iconTrailing` | `icon-trailing` | `boolean` | `false` | If true, the icon will be placed after the label. |
+| `disabled` | `disabled` | `boolean` | `false` | If true, the button is disabled. |
 
-```typescript
-import { PdButton, PdCard, PdTextField } from '@prioticket/design-system-web';
-```
+**Slots**
 
-## Components
+| Slot | Description |
+|------|-------------|
+| `default` | The default slot for the button's label. |
 
+**CSS Custom Properties**
 
-### src\components\pd-text-field
+| Property | Description |
+|----------|-------------|
+| `--shape-corner` | Overrides the default border radius. |
 
-**Tag:** `<src\components\text-field>`
+### <pd-card> (PdCard)
 
-Component description not available
+No description available.
 
-#### Properties
-- `variant`: 'filled' | 'outlined'
-- `label`: any
-- `placeholder`: any
-- `value`: any
-- `supportingText`: any
-- `errorText`: any
-- `prefixText`: any
-- `suffixText`: any
-- `disabled`: any
-- `readonly`: any
-- `required`: any
-- `error`: any
-- `type`: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'textarea'
-- `rows`: any
-- `cols`: any
-- `leadingIcon`: any
-- `trailingIcon`: any
-- `maxlength`: any
-- `minlength`: any
+**Properties**
 
-#### Events
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `variant` | `variant` | `'elevated' \| 'filled' \| 'outlined'` | `'elevated'` |  |
+| `clickable` | `clickable` | `boolean` | `false` |  |
 
+**Events**
 
-#### Example
-```html
-<src\components\pd-text-field></src\components\pd-text-field>
-```
+| Event | Type | Description |
+|-------|------|-------------|
+| `click` | `CustomEvent` |  |
 
+### <pd-checkbox> (PdCheckbox)
 
-### src\components\pd-tabs
+No description available.
 
-**Tag:** `<src\components\tabs>`
+**Properties**
 
-Component description not available
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `checked` | `checked` | `boolean` | `false` |  |
+| `indeterminate` | `indeterminate` | `boolean` | `false` |  |
+| `disabled` | `disabled` | `boolean` | `false` |  |
+| `required` | `required` | `boolean` | `false` |  |
+| `value` | `value` | `string` | `''` |  |
+| `name` | `name` | `string` | `''` |  |
+| `label` | `label` | `string` | `''` |  |
+| `touchTarget` | `touch-target` | `boolean` | `false` |  |
 
-#### Properties
-- `activeTabIndex`: any
-- `autoActivate`: any
-- `tabs`: TabData[]
-- `secondary`: any
-- `inlineIcon`: any
-- `icon`: any
-- `ariaLabel`: any
+**Events**
 
-#### Events
+| Event | Type | Description |
+|-------|------|-------------|
+| `change` | `CustomEvent` |  |
+| `input` | `CustomEvent` |  |
 
+### <pd-chip> (PdChip)
 
-#### Example
-```html
-<src\components\pd-tabs></src\components\pd-tabs>
-```
+No description available.
 
+**Properties**
 
-### src\components\pd-switch
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `variant` | `variant` | `'assist' \| 'filter' \| 'input' \| 'suggestion'` | `'assist'` |  |
+| `label` | `label` | `string` | `''` |  |
+| `disabled` | `disabled` | `boolean` | `false` |  |
+| `alwaysFocusable` | `always-focusable` | `boolean` | `false` |  |
+| `hasIcon` | `has-icon` | `boolean` | `false` |  |
+| `icon` | `icon` | `string` | `''` |  |
+| `selected` | `selected` | `boolean` | `false` |  |
+| `removable` | `removable` | `boolean` | `false` |  |
+| `elevated` | `elevated` | `boolean` | `false` |  |
+| `href` | `href` | `string` | `''` |  |
+| `target` | `target` | `string` | `''` |  |
+| `avatar` | `avatar` | `boolean` | `false` |  |
+| `removeOnly` | `remove-only` | `boolean` | `false` |  |
 
-**Tag:** `<src\components\switch>`
+**Events**
 
-Component description not available
+| Event | Type | Description |
+|-------|------|-------------|
+| `chip-click` | `CustomEvent` |  |
+| `chip-remove` | `CustomEvent` |  |
 
-#### Properties
-- `selected`: any
-- `disabled`: any
-- `selectedIcon`: any
-- `unselectedIcon`: any
-- `showOnlySelectedIcon`: any
-- `name`: any
-- `value`: any
-- `ariaLabel`: any
-- `required`: any
+### <pd-dialog> (PdDialog)
 
-#### Events
+The Prioticket dialog component using Material Web Components.
 
+**Properties**
 
-#### Example
-```html
-<src\components\pd-switch></src\components\pd-switch>
-```
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `open` | `open` | `boolean` | `false` | Whether the dialog is currently open. |
+| `size` | `size` | `'small' \| 'medium' \| 'large' \| 'fullscreen'` | `'medium'` | The size/width variant of the dialog. |
+| `variant` | `variant` | `'alert' \| 'confirm' \| 'form' \| 'custom'` | `'custom'` | The type of dialog - affects styling and behavior. |
+| `headline` | `headline` | `string` | `''` | The dialog headline/title text. |
+| `primaryAction` | `primary-action` | `string` | `''` | Primary action button text. |
+| `secondaryAction` | `secondary-action` | `string` | `''` | Secondary action button text (usually "Cancel"). |
+| `closableByBackdrop` | `closable-by-backdrop` | `boolean` | `true` | Whether the dialog is closable by clicking outside or pressing ESC. |
+| `showCloseButton` | `show-close-button` | `boolean` | `false` | Whether to show a close button in the header. |
 
+**Events**
 
-### src\components\pd-stepper
+| Event | Type | Description |
+|-------|------|-------------|
+| `open` | `CustomEvent` | Fired when the dialog is opened. |
+| `closed` | `CustomEvent` | Fired when the dialog is closed. |
+| `primary-action` | `CustomEvent` |  |
+| `secondary-action` | `CustomEvent` |  |
 
-**Tag:** `<src\components\stepper>`
+**Slots**
 
-Component description not available
+| Slot | Description |
+|------|-------------|
+| `default` | The main content of the dialog. |
+| `headline` | The dialog title/headline. |
+| `actions` | Action buttons (typically in the bottom area). |
 
-#### Properties
-- `steps`: StepData[]
-- `currentStep`: any
-- `orientation`: 'horizontal' | 'vertical'
-- `linear`: any
-- `showContent`: any
-- `alternativeLabel`: any
+**CSS Custom Properties**
 
-#### Events
+| Property | Description |
+|----------|-------------|
+| `--shape-corner` | Overrides the default border radius. |
 
+### <pd-expandable-card> (PdExpandableCard)
 
-#### Example
-```html
-<src\components\pd-stepper></src\components\pd-stepper>
-```
+An expandable card component that can show/hide content with animation.
 
+**Properties**
 
-### src\components\pd-slider
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `variant` | `variant` | `'elevated' \| 'filled' \| 'outlined'` | `'elevated'` | The style variant of the card. |
+| `expanded` | `expanded` | `boolean` | `false` | Whether the card is expanded by default. |
+| `expandIcon` | `expand-icon` | `string` | `'keyboard_arrow_down'` | The icon to show when collapsed (pointing down). |
+| `collapseIcon` | `collapse-icon` | `string` | `'keyboard_arrow_up'` | The icon to show when expanded (pointing up). |
+| `headerClickable` | `header-clickable` | `boolean` | `false` | If true, the entire header area becomes clickable. |
 
-**Tag:** `<src\components\slider>`
+**Events**
 
-Component description not available
+| Event | Type | Description |
+|-------|------|-------------|
+| `eventName` | `CustomEvent` |  |
+| `expand` | `CustomEvent` | Fired when the card is expanded |
+| `collapse` | `CustomEvent` | Fired when the card is collapsed |
 
-#### Properties
-- `disabled`: any
-- `min`: any
-- `max`: any
-- `value`: any
-- `step`: any
-- `ticks`: any
-- `labeled`: any
-- `valueIndicator`: any
-- `valueStart`: any
-- `valueEnd`: any
-- `ariaLabel`: any
-- `ariaLabelStart`: any
-- `ariaLabelEnd`: any
+**Slots**
 
-#### Events
+| Slot | Description |
+|------|-------------|
+| `header` | The main header content (always visible) |
+| `default` | The expandable content (shown when expanded) |
 
+### <pd-fab> (PdFab)
 
-#### Example
-```html
-<src\components\pd-slider></src\components\pd-slider>
-```
+No description available.
 
+**Properties**
 
-### src\components\pd-select
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `variant` | `variant` | `'surface' \| 'primary' \| 'secondary' \| 'tertiary' \| 'branded'` | `'primary'` |  |
+| `size` | `size` | `'small' \| 'medium' \| 'large'` | `'medium'` |  |
+| `icon` | `icon` | `string` | `''` |  |
+| `label` | `label` | `string` | `''` |  |
+| `lowered` | `lowered` | `boolean` | `false` |  |
+| `disabled` | `disabled` | `boolean` | `false` |  |
+| `ariaLabel` | `aria-label` | `string` | `''` |  |
 
-**Tag:** `<src\components\select>`
+**Events**
 
-Component description not available
+| Event | Type | Description |
+|-------|------|-------------|
+| `fab-click` | `CustomEvent` |  |
 
-#### Properties
-- `variant`: 'filled' | 'outlined'
-- `label`: any
-- `value`: any
-- `disabled`: any
-- `required`: any
-- `errorText`: any
-- `error`: any
-- `supportingText`: any
-- `options`: SelectOption[]
-- `leadingIcon`: any
+### <pd-icon> (PdIcon)
 
-#### Events
+No description available.
 
+**Properties**
 
-#### Example
-```html
-<src\components\pd-select></src\components\pd-select>
-```
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `name` | `name` | `string` | `''` |  |
+| `size` | `size` | `'small' \| 'medium' \| 'large'` | `'medium'` |  |
+| `variant` | `variant` | `'filled' \| 'outlined' \| 'round' \| 'sharp' \| 'two-tone'` | `'filled'` |  |
 
+### <pd-icon-button> (PdIconButton)
 
-### src\components\pd-segmented-stepper
+No description available.
 
-**Tag:** `<src\components\segmented-stepper>`
+**Properties**
 
-Component description not available
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `variant` | `variant` | `'standard' \| 'filled' \| 'tonal' \| 'outlined'` | `'standard'` |  |
+| `icon` | `icon` | `string` | `''` |  |
+| `selectedIcon` | `selected-icon` | `string` | `''` |  |
+| `disabled` | `disabled` | `boolean` | `false` |  |
+| `toggle` | `toggle` | `boolean` | `false` |  |
+| `selected` | `selected` | `boolean` | `false` |  |
+| `href` | `href` | `string` | `''` |  |
+| `target` | `target` | `string` | `''` |  |
+| `ariaLabel` | `aria-label` | `string` | `''` |  |
+| `ariaLabelSelected` | `aria-label-selected` | `string` | `''` |  |
 
-#### Properties
-- `activeStep`: any
-- `completedSteps`: number[]
-- `size`: 'small' | 'medium' | 'large'
-- `disabled`: any
-- `allowStepNavigation`: any
-- `linear`: any
-- `stepNumber`: any
-- `state`: 'pending' | 'active' | 'completed' | 'disabled'
-- `disabled`: any
-- `clickable`: any
-- `icon`: any
+**Events**
 
-#### Events
-- `step`: change - Fired when the active step changes (consistent with pd-stepper).
-- `stepchange`: Fired when the active step changes (backwards compatibility).
-- `stepcomplete`: Fired when a step is marked as completed.
+| Event | Type | Description |
+|-------|------|-------------|
+| `pd-icon-button-click` | `CustomEvent` |  |
+| `change` | `CustomEvent` |  |
 
-#### Example
-```html
-<src\components\pd-segmented-stepper></src\components\pd-segmented-stepper>
-```
+### <pd-list> (PdList)
 
+No description available.
 
-### src\components\pd-segmented-button
+**Properties**
 
-**Tag:** `<src\components\segmented-button>`
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `role` | `role` | `string` | `'list'` |  |
+| `tabindex` | `tabindex` | `number` | `-1` |  |
 
-Component description not available
+### <pd-list-divider> (PdListDivider)
 
-#### Properties
-- `multiSelect`: any
-- `size`: 'small' | 'medium' | 'large'
-- `disabled`: any
-- `selectedValues`: string[]
-- `value`: any
-- `selected`: any
-- `disabled`: any
-- `icon`: any
-- `iconOnly`: any
+No description available.
 
-#### Events
-- `selectionchange`: Fired when the selection changes.
+**Properties**
 
-#### Example
-```html
-<src\components\pd-segmented-button></src\components\pd-segmented-button>
-```
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `inset` | `inset` | `boolean` | `false` |  |
+| `role` | `role` | `string` | `'separator'` |  |
 
+### <pd-list-item> (PdListItem)
 
-### src\components\pd-radio
+No description available.
 
-**Tag:** `<src\components\radio>`
+**Properties**
 
-Component description not available
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `type` | `type` | `'text' \| 'link' \| 'button'` | `'text'` |  |
+| `headline` | `headline` | `string` | `''` |  |
+| `supportingText` | `supporting-text` | `string` | `''` |  |
+| `trailingSupportingText` | `trailing-supporting-text` | `string` | `''` |  |
+| `href` | `href` | `string` | `''` |  |
+| `target` | `target` | `string` | `''` |  |
+| `disabled` | `disabled` | `boolean` | `false` |  |
+| `icon` | `icon` | `string` | `''` |  |
+| `trailingIcon` | `trailing-icon` | `string` | `''` |  |
+| `avatar` | `avatar` | `string` | `''` |  |
+| `image` | `image` | `string` | `''` |  |
+| `tabindex` | `tabindex` | `number \| undefined` |  |  |
 
-#### Properties
-- `checked`: any
-- `disabled`: any
-- `name`: any
-- `value`: any
-- `ariaLabel`: any
-- `ariaDescribedby`: any
-- `required`: any
-- `name`: any
-- `value`: any
-- `disabled`: any
-- `required`: any
-- `ariaLabel`: any
-- `ariaLabelledby`: any
+**Events**
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `list-item-click` | `CustomEvent` |  |
 
-#### Events
+### <pd-menu> (PdMenu)
 
+A thin wrapper around the Material Web Menu component.
 
-#### Example
-```html
-<src\components\pd-radio></src\components\pd-radio>
-```
+**Properties**
 
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `anchor` | `anchor` | `string` | `''` | The ID of the element to anchor the menu to.
+The element must be in the same root node as the menu. |
+| `anchorElement` |  | `HTMLElement \| undefined` |  | Reference to the element to anchor the menu to.
+Overrides `anchor`. |
+| `open` | `open` | `boolean` | `false` | Controls whether the menu is open or closed. |
+| `positioning` | `positioning` | `'absolute' \| 'fixed' \| 'document' \| 'popover'` | `'popover'` | The positioning strategy for the menu. |
+| `anchorCorner` | `anchor-corner` | `'end-start' \| 'end-end' \| 'start-start' \| 'start-end'` | `'start-start'` | Corner of the anchor to align the menu to. |
+| `menuCorner` | `menu-corner` | `'end-start' \| 'end-end' \| 'start-start' \| 'start-end'` | `'start-start'` | Corner of the menu to align with the anchor corner. |
+| `quick` | `quick` | `boolean` | `false` | Skips the opening and closing animations. |
+| `hasOverflow` | `has-overflow` | `boolean` | `false` | Whether the menu has an overflow submenu. |
+| `xOffset` | `x-offset` | `number` | `0` | Horizontal offset of the menu from the anchor. |
+| `yOffset` | `y-offset` | `number` | `0` | Vertical offset of the menu from the anchor. |
+| `defaultFocus` | `default-focus` | `'none' \| 'list-root' \| 'first-item' \| 'last-item'` | `'list-root'` | Determines the default focus state of the menu. |
+| `stayOpenOnFocusout` | `stay-open-on-focusout` | `boolean` | `false` | Whether the menu should remain open when focus leaves the menu. |
+| `stayOpenOnOutsideClick` | `stay-open-on-outside-click` | `boolean` | `false` | Whether the menu should remain open when clicking outside the menu. |
+| `skipRestoreFocus` | `skip-restore-focus` | `boolean` | `false` | Whether to skip restoring focus to the anchor when the menu closes. |
 
-### src\components\pd-progress
+**Slots**
+
+| Slot | Description |
+|------|-------------|
+| `default` | Default slot for `pd-menu-item` elements. |
+
+**CSS Custom Properties**
+
+| Property | Description |
+|----------|-------------|
+| `--pd-menu-container-shape` | The shape of the menu container. |
+| `--pd-menu-container-color` | The background color of the menu. |
+| `--pd-menu-container-elevation` | The box-shadow for the menu container. |
 
-**Tag:** `<src\components\progress>`
+### <pd-menu-item> (PdMenuItemM)
 
-Component description not available
+A menu item component for use within pd-menu.
 
-#### Properties
-- `type`: 'linear' | 'circular'
-- `value`: any
-- `max`: any
-- `buffer`: any
-- `indeterminate`: any
-- `visible`: any
-- `size`: 'small' | 'medium' | 'large'
-- `ariaLabel`: any
+**Properties**
 
-#### Events
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `disabled` | `disabled` | `boolean` | `false` | Whether the menu item is disabled |
+| `type` | `type` | `'menuitem' \| 'option' \| 'button'` | `'menuitem'` | The type of menu item |
+| `href` | `href` | `string` | `''` | The href for link-type menu items |
+| `target` | `target` | `string` | `''` | The target for link-type menu items |
+| `keepOpen` | `keep-open` | `boolean` | `false` | Whether to keep the menu open after selection |
+| `selected` | `selected` | `boolean` | `false` | Whether the menu item is selected (for option type) |
+| `leadingIcon` | `leading-icon` | `string` | `''` | Leading icon name |
+| `trailingIcon` | `trailing-icon` | `string` | `''` | Trailing icon name |
+| `text` | `text` | `string` | `''` | Text content for simple menu items |
+| `supportingText` | `supporting-text` | `string` | `''` | Supporting text (subtitle) |
 
+**Events**
 
-#### Example
-```html
-<src\components\pd-progress></src\components\pd-progress>
-```
+| Event | Type | Description |
+|-------|------|-------------|
+| `close-menu` | `CustomEvent` | Fired when the menu should be closed (usually on selection) |
+| `menu-item-selected` | `CustomEvent` |  |
 
+**Slots**
+
+| Slot | Description |
+|------|-------------|
+| `default` | The main content of the menu item |
+| `start` | Content at the start of the menu item (e.g., icon) |
+| `end` | Content at the end of the menu item (e.g., shortcut text) |
 
-### src\components\pd-menu
+### <pd-progress> (PdProgress)
+
+A thin wrapper around the Material Web Progress components.
+
+**Properties**
+
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `type` | `type` | `'linear' \| 'circular'` | `'linear'` | The type of progress indicator. |
+| `value` | `value` | `number \| undefined` |  | The progress value (0-1). When undefined, shows indeterminate progress. |
+| `max` | `max` | `number` | `1` | The maximum value for the progress (used for buffer). |
+| `buffer` | `buffer` | `number \| undefined` |  | The buffer value (0-max) for linear progress showing buffered content. |
+| `indeterminate` | `indeterminate` | `boolean` | `false` | Whether the progress indicator should be indeterminate. |
+| `visible` | `visible` | `boolean` | `true` | Whether the progress indicator is visible. |
+| `size` | `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Size variant for circular progress. |
+| `ariaLabel` | `aria-label` | `string` | `''` | The aria label for accessibility. |
 
-**Tag:** `<src\components\menu>`
+**CSS Custom Properties**
 
-Component description not available
+| Property | Description |
+|----------|-------------|
+| `--pd-progress-active-indicator-color` | The color of the active progress indicator. |
+| `--pd-progress-track-color` | The color of the progress track. |
 
-#### Properties
-- `anchor`: any
-- `anchorElement`: any
-- `open`: any
-- `positioning`: 'absolute' | 'fixed' | 'document' | 'popover'
-- `anchorCorner`: 'end-start' | 'end-end' | 'start-start' | 'start-end'
-- `menuCorner`: 'end-start' | 'end-end' | 'start-start' | 'start-end'
-- `quick`: any
-- `hasOverflow`: any
-- `xOffset`: any
-- `yOffset`: any
-- `defaultFocus`: 'none' | 'list-root' | 'first-item' | 'last-item'
-- `stayOpenOnFocusout`: any
-- `stayOpenOnOutsideClick`: any
-- `skipRestoreFocus`: any
+### <pd-radio> (PdRadio)
 
-#### Events
+A thin wrapper around the Material Web Radio component.
 
+**Properties**
 
-#### Example
-```html
-<src\components\pd-menu></src\components\pd-menu>
-```
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `checked` | `checked` | `boolean` | `false` | Whether the radio is checked. |
+| `disabled` | `disabled` | `boolean` | `false` | Whether the radio is disabled. |
+| `name` | `name` | `string` | `''` | The name attribute for form grouping. |
+| `value` | `value` | `string` | `''` | The value attribute for form submission. |
+| `ariaLabel` | `aria-label` | `string` | `''` | The aria label for accessibility. |
+| `ariaDescribedby` | `aria-describedby` | `string` | `''` | The aria-describedby attribute for accessibility. |
+| `required` | `required` | `boolean` | `false` | Whether the radio is required in a form. |
 
+**Events**
 
-### src\components\pd-menu-item
+| Event | Type | Description |
+|-------|------|-------------|
+| `change` | `CustomEvent` |  |
+| `input` | `CustomEvent` |  |
 
-**Tag:** `<src\components\menu-item>`
+**CSS Custom Properties**
 
-Component description not available
+| Property | Description |
+|----------|-------------|
+| `--pd-radio-selected-icon-color` | The color of the selected radio icon. |
+| `--pd-radio-unselected-icon-color` | The color of the unselected radio icon. |
+| `--pd-radio-icon-size` | The size of the radio icon. |
 
-#### Properties
-- `disabled`: any
-- `type`: 'menuitem' | 'option' | 'button'
-- `href`: any
-- `target`: any
-- `keepOpen`: any
-- `selected`: any
-- `leadingIcon`: any
-- `trailingIcon`: any
-- `text`: any
-- `supportingText`: any
+### <pd-radio-group> (PdRadioGroup)
 
-#### Events
-- `close`: menu - Fired when the menu should be closed (usually on selection)
+A container for grouping pd-radio elements.
 
-#### Example
-```html
-<src\components\pd-menu-item></src\components\pd-menu-item>
-```
+**Properties**
 
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `name` | `name` | `string` | `''` | The name for all radio buttons in this group. |
+| `value` | `value` | `string` | `''` | The currently selected value. |
+| `disabled` | `disabled` | `boolean` | `false` | Whether the radio group is disabled. |
+| `required` | `required` | `boolean` | `false` | Whether the radio group is required. |
+| `ariaLabel` | `aria-label` | `string` | `''` | The aria-label for the radio group. |
+| `ariaLabelledby` | `aria-labelledby` | `string` | `''` | The aria-labelledby for the radio group. |
 
-### src\components\pd-list
+**Events**
 
-**Tag:** `<src\components\list>`
+| Event | Type | Description |
+|-------|------|-------------|
+| `change` | `CustomEvent` |  |
 
-Component description not available
+### <pd-segment-item> (PdSegmentItem)
 
-#### Properties
-- `role`: any
-- `tabindex`: any
-- `type`: 'text' | 'link' | 'button'
-- `headline`: any
-- `supportingText`: any
-- `trailingSupportingText`: any
-- `href`: any
-- `target`: any
-- `disabled`: any
-- `icon`: any
-- `trailingIcon`: any
-- `avatar`: any
-- `image`: any
-- `tabindex`: any
-- `inset`: any
-- `role`: any
+An individual segment item for use within pd-segmented-button.
 
-#### Events
+**Properties**
 
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `value` | `value` | `string` | `''` | The value associated with this segment. |
+| `selected` | `selected` | `boolean` | `false` | Whether this segment is selected. |
+| `disabled` | `disabled` | `boolean` | `false` | Whether this segment is disabled. |
+| `icon` | `icon` | `string` | `''` | The icon to display in the segment. |
+| `iconOnly` | `icon-only` | `boolean` | `false` | Whether to show only the icon (no text). |
 
-#### Example
-```html
-<src\components\pd-list></src\components\pd-list>
-```
+**Events**
 
+| Event | Type | Description |
+|-------|------|-------------|
+| `segment-click` | `CustomEvent` |  |
 
-### src\components\pd-icon
+**Slots**
 
-**Tag:** `<src\components\icon>`
+| Slot | Description |
+|------|-------------|
+| `default` | The default slot for the segment's content. |
+| `icon` | The slot for an icon. |
 
-Component description not available
+### <pd-segmented-button> (PdSegmentedButton)
 
-#### Properties
-- `name`: any
-- `size`: 'small' | 'medium' | 'large'
-- `variant`: 'filled' | 'outlined' | 'round' | 'sharp' | 'two-tone'
+A segmented button component that allows users to select from multiple options.
 
-#### Events
+**Properties**
 
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `multiSelect` | `multi-select` | `boolean` | `false` | Whether multiple segments can be selected simultaneously. |
+| `size` | `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | The size of the segmented button. |
+| `disabled` | `disabled` | `boolean` | `false` | Whether the segmented button is disabled. |
+| `selectedValues` | `selectedValues` | `string[]` | `[]` | Array of selected segment values. |
 
-#### Example
-```html
-<src\components\pd-icon></src\components\pd-icon>
-```
+**Events**
 
+| Event | Type | Description |
+|-------|------|-------------|
+| `selectionchange` | `CustomEvent` | Fired when the selection changes. |
 
-### src\components\pd-icon-button
+**Slots**
 
-**Tag:** `<src\components\icon-button>`
+| Slot | Description |
+|------|-------------|
+| `default` | The default slot for pd-segment-item elements. |
 
-Component description not available
+**CSS Custom Properties**
 
-#### Properties
-- `variant`: 'standard' | 'filled' | 'tonal' | 'outlined'
-- `icon`: any
-- `selectedIcon`: any
-- `disabled`: any
-- `toggle`: any
-- `selected`: any
-- `href`: any
-- `target`: any
-- `ariaLabel`: any
-- `ariaLabelSelected`: any
+| Property | Description |
+|----------|-------------|
+| `--md-segmented-button-container-height` | Override the default container height. |
+| `--md-segmented-button-shape` | Override the default border radius. |
 
-#### Events
+### <pd-segmented-stepper> (PdSegmentedStepper)
 
+A segmented button variant that functions as a stepper with completion tracking.
 
-#### Example
-```html
-<src\components\pd-icon-button></src\components\pd-icon-button>
-```
+**Properties**
 
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `activeStep` | `active-step` | `number` | `0` | The currently active step index (0-based). |
+| `completedSteps` | `completed-steps` | `number[]` | `[]` | Array of completed step indices. |
+| `size` | `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | The size of the stepper. |
+| `disabled` | `disabled` | `boolean` | `false` | Whether the stepper is disabled. |
+| `allowStepNavigation` | `allow-step-navigation` | `boolean` | `true` | Whether users can click on completed steps to go back. |
+| `linear` | `linear` | `boolean` | `true` | Whether the stepper is linear (steps must be completed in order). |
 
-### src\components\pd-fab
+**Events**
 
-**Tag:** `<src\components\fab>`
+| Event | Type | Description |
+|-------|------|-------------|
+| `step-change` | `CustomEvent` | Fired when the active step changes. Detail: `{ currentStep, previousStep, totalSteps }`. |
+| `step-complete` | `CustomEvent` | Fired when a step is marked as completed. Detail: `{ completedStep, completedSteps, totalSteps }`. |
 
-Component description not available
+**Slots**
 
-#### Properties
-- `variant`: 'surface' | 'primary' | 'secondary' | 'tertiary' | 'branded'
-- `size`: 'small' | 'medium' | 'large'
-- `icon`: any
-- `label`: any
-- `lowered`: any
-- `disabled`: any
-- `ariaLabel`: any
+| Slot | Description |
+|------|-------------|
+| `default` | The default slot for pd-stepper-item elements. |
 
-#### Events
+### <pd-select> (PdSelect)
 
+A thin wrapper around the Material Web Select component.
 
-#### Example
-```html
-<src\components\pd-fab></src\components\pd-fab>
-```
+**Properties**
 
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `variant` | `variant` | `'filled' \| 'outlined'` | `'outlined'` | The variant of the select field. |
+| `label` | `label` | `string` | `''` | The label for the select field. |
+| `value` | `value` | `string` | `''` | The selected value. |
+| `disabled` | `disabled` | `boolean` | `false` | Whether the select is disabled. |
+| `required` | `required` | `boolean` | `false` | Whether the select is required. |
+| `errorText` | `error-text` | `string` | `''` | The error message to display when `error` is true. |
+| `error` | `error` | `boolean` | `false` | Whether the select has an error state. |
+| `supportingText` | `supporting-text` | `string` | `''` | The supporting text to display below the select. |
+| `options` | `options` | `SelectOption[]` | `[]` | An array of options to be rendered. |
+| `leadingIcon` | `leading-icon` | `string` | `''` | The leading icon name. |
 
-### src\components\pd-expandable-card
+**Events**
 
-**Tag:** `<src\components\expandable-card>`
+| Event | Type | Description |
+|-------|------|-------------|
+| `change` | `CustomEvent` | Fired when the selected value changes. |
 
-Component description not available
+### <pd-slider> (PdSlider)
 
-#### Properties
-- `variant`: 'elevated' | 'filled' | 'outlined'
-- `expanded`: any
-- `expandIcon`: any
-- `collapseIcon`: any
-- `headerClickable`: any
+A thin wrapper around the Material Web Slider component.
 
-#### Events
-- `expand`: Fired when the card is expanded
-- `collapse`: Fired when the card is collapsed
+**Properties**
 
-#### Example
-```html
-<src\components\pd-expandable-card></src\components\pd-expandable-card>
-```
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `disabled` | `disabled` | `boolean` | `false` | Whether the slider is disabled. |
+| `min` | `min` | `number` | `0` | The minimum value of the slider. |
+| `max` | `max` | `number` | `100` | The maximum value of the slider. |
+| `value` | `value` | `number` | `0` | The current value of the slider. |
+| `step` | `step` | `number` | `1` | The step increment of the slider. |
+| `ticks` | `ticks` | `boolean` | `false` | Whether the slider should show tick marks. |
+| `labeled` | `labeled` | `boolean` | `false` | Whether the slider should show labels. |
+| `valueIndicator` | `value-indicator` | `boolean` | `false` | Whether the slider should show value indicators on focus/hover. |
+| `valueStart` | `value-start` | `number \| undefined` |  | The start value for a range slider (when provided, creates a range slider). |
+| `valueEnd` | `value-end` | `number \| undefined` |  | The end value for a range slider. |
+| `ariaLabel` | `aria-label` | `string` | `''` | The aria label for the slider. |
+| `ariaLabelStart` | `aria-label-start` | `string` | `''` | The aria label for the start handle in range mode. |
+| `ariaLabelEnd` | `aria-label-end` | `string` | `''` | The aria label for the end handle in range mode. |
 
+**Events**
 
-### src\components\pd-dialog
+| Event | Type | Description |
+|-------|------|-------------|
+| `input` | `CustomEvent` |  |
+| `change` | `CustomEvent` |  |
 
-**Tag:** `<src\components\dialog>`
+**CSS Custom Properties**
 
-Component description not available
+| Property | Description |
+|----------|-------------|
+| `--pd-slider-handle-color` | The color of the slider handle. |
+| `--pd-slider-track-color` | The color of the active slider track. |
+| `--pd-slider-track-inactive-color` | The color of the inactive slider track. |
 
-#### Properties
-- `open`: any
-- `size`: 'small' | 'medium' | 'large' | 'fullscreen'
-- `variant`: 'alert' | 'confirm' | 'form' | 'custom'
-- `headline`: any
-- `primaryAction`: any
-- `secondaryAction`: any
-- `closableByBackdrop`: any
-- `showCloseButton`: any
+### <pd-stepper> (PdStepper)
 
-#### Events
-- `open`: Fired when the dialog is opened.
-- `closed`: Fired when the dialog is closed.
+A Material Design stepper component that displays progress through a sequence of steps.
 
-#### Example
-```html
-<src\components\pd-dialog></src\components\pd-dialog>
-```
+**Properties**
 
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `steps` | `steps` | `StepData[]` | `[]` | The steps data array |
+| `currentStep` | `currentStep` | `number` | `0` | The current active step index (0-based) |
+| `orientation` | `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | The orientation of the stepper |
+| `linear` | `linear` | `boolean` | `true` | Whether the stepper is linear (steps must be completed in order) |
+| `showContent` | `showContent` | `boolean` | `true` | Whether to show step content |
+| `alternativeLabel` | `alternativeLabel` | `boolean` | `false` | Alternative labels layout for horizontal stepper |
 
-### src\components\pd-chip
+**Events**
 
-**Tag:** `<src\components\chip>`
+| Event | Type | Description |
+|-------|------|-------------|
+| `step-change` | `CustomEvent` | Fired when the active step changes. Detail: `{ currentStep, previousStep, totalSteps }`. |
 
-Component description not available
+**CSS Custom Properties**
 
-#### Properties
-- `variant`: 'assist' | 'filter' | 'input' | 'suggestion'
-- `label`: any
-- `disabled`: any
-- `alwaysFocusable`: any
-- `hasIcon`: any
-- `icon`: any
-- `selected`: any
-- `removable`: any
-- `elevated`: any
-- `href`: any
-- `target`: any
-- `avatar`: any
-- `removeOnly`: any
+| Property | Description |
+|----------|-------------|
+| `--pd-stepper-active-color` | The color of the active step indicator |
+| `--pd-stepper-completed-color` | The color of completed step indicators |
+| `--pd-stepper-inactive-color` | The color of inactive step indicators |
+| `--pd-stepper-error-color` | The color of error step indicators |
+| `--pd-stepper-connector-color` | The color of step connectors |
 
-#### Events
+### <pd-stepper-item> (PdStepperItem)
 
+An individual step item for use within pd-segmented-stepper.
 
-#### Example
-```html
-<src\components\pd-chip></src\components\pd-chip>
-```
+**Properties**
 
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `stepNumber` | `step-number` | `number` | `1` | The step number (1-based, auto-assigned by parent). |
+| `state` | `state` | `'pending' \| 'active' \| 'completed' \| 'disabled'` | `'pending'` | The state of this step. |
+| `disabled` | `disabled` | `boolean` | `false` | Whether this step is disabled. |
+| `clickable` | `clickable` | `boolean` | `false` | Whether this step can be clicked. |
+| `icon` | `icon` | `string` | `''` | Optional icon to display instead of step number. |
 
-### src\components\pd-checkbox
+**Events**
 
-**Tag:** `<src\components\checkbox>`
+| Event | Type | Description |
+|-------|------|-------------|
+| `stepper-item-click` | `CustomEvent` |  |
 
-Component description not available
+**Slots**
 
-#### Properties
-- `checked`: any
-- `indeterminate`: any
-- `disabled`: any
-- `required`: any
-- `value`: any
-- `name`: any
-- `label`: any
-- `touchTarget`: any
+| Slot | Description |
+|------|-------------|
+| `default` | The default slot for the step's content. |
 
-#### Events
+### <pd-switch> (PdSwitch)
 
+A thin wrapper around the Material Web Switch component.
 
-#### Example
-```html
-<src\components\pd-checkbox></src\components\pd-checkbox>
-```
+**Properties**
 
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `selected` | `selected` | `boolean` | `false` | Whether the switch is selected (on). |
+| `disabled` | `disabled` | `boolean` | `false` | Whether the switch is disabled. |
+| `selectedIcon` | `selected-icon` | `string` | `''` | The icon to display when the switch is selected. |
+| `unselectedIcon` | `unselected-icon` | `string` | `''` | The icon to display when the switch is unselected. |
+| `showOnlySelectedIcon` | `show-only-selected-icon` | `boolean` | `false` | Whether to show only the selected icon (hides unselected icon). |
+| `name` | `name` | `string` | `''` | The name attribute for form submission. |
+| `value` | `value` | `string` | `'on'` | The value attribute for form submission. |
+| `ariaLabel` | `aria-label` | `string` | `''` | The aria label for accessibility. |
+| `required` | `required` | `boolean` | `false` | Whether the switch is required in a form. |
 
-### src\components\pd-card
+**Events**
 
-**Tag:** `<src\components\card>`
+| Event | Type | Description |
+|-------|------|-------------|
+| `change` | `CustomEvent` |  |
+| `input` | `CustomEvent` |  |
 
-Component description not available
+**CSS Custom Properties**
 
-#### Properties
-- `variant`: 'elevated' | 'filled' | 'outlined'
-- `clickable`: any
+| Property | Description |
+|----------|-------------|
+| `--pd-switch-selected-track-color` | The color of the track when selected. |
+| `--pd-switch-selected-handle-color` | The color of the handle when selected. |
+| `--pd-switch-unselected-track-color` | The color of the track when unselected. |
+| `--pd-switch-unselected-handle-color` | The color of the handle when unselected. |
 
-#### Events
+### <pd-tab> (PdTab)
 
+A placeholder element that provides tab data to pd-tabs.
+This element is not rendered directly but is used to collect tab information.
 
-#### Example
-```html
-<src\components\pd-card></src\components\pd-card>
-```
+**Properties**
 
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `secondary` | `secondary` | `boolean` | `false` | Whether this is a secondary tab variant. |
+| `inlineIcon` | `inline-icon` | `boolean` | `false` | Whether the tab is inlined with the text. |
+| `icon` | `icon` | `string` | `''` | The icon to display in the tab. |
+| `ariaLabel` | `aria-label` | `string` | `''` | The aria label for accessibility. |
 
-### src\components\pd-button
+### <pd-tabs> (PdTabs)
 
-**Tag:** `<src\components\button>`
+A thin wrapper around the Material Web Tabs component.
 
-Component description not available
+**Properties**
 
-#### Properties
-- `variant`: 'filled' | 'outlined' | 'text' | 'elevated' | 'tonal'
-- `size`: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'
-- `icon`: any
-- `iconTrailing`: any
-- `disabled`: any
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `activeTabIndex` | `active-tab-index` | `number` | `0` | The index of the currently active tab. |
+| `autoActivate` | `auto-activate` | `boolean` | `false` | Whether to automatically activate tabs on focus (vs requiring click/enter). |
+| `tabs` | `tabs` | `TabData[]` | `[]` | Array of tab data objects |
 
-#### Events
+**Events**
 
+| Event | Type | Description |
+|-------|------|-------------|
+| `change` | `CustomEvent` |  |
 
-#### Example
-```html
-<src\components\pd-button></src\components\pd-button>
-```
+**CSS Custom Properties**
 
+| Property | Description |
+|----------|-------------|
+| `--pd-tabs-divider-color` | The color of the divider line. |
+| `--pd-tabs-active-indicator-color` | The color of the active tab indicator. |
+
+### <pd-text-field> (PdTextField)
+
+No description available.
+
+**Properties**
+
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `variant` | `variant` | `'filled' \| 'outlined'` | `'outlined'` |  |
+| `label` | `label` | `string` | `''` |  |
+| `placeholder` | `placeholder` | `string` | `''` |  |
+| `value` | `value` | `string` | `''` |  |
+| `supportingText` | `supporting-text` | `string` | `''` |  |
+| `errorText` | `error-text` | `string` | `''` |  |
+| `prefixText` | `prefix-text` | `string` | `''` |  |
+| `suffixText` | `suffix-text` | `string` | `''` |  |
+| `disabled` | `disabled` | `boolean` | `false` |  |
+| `readonly` | `readonly` | `boolean` | `false` |  |
+| `required` | `required` | `boolean` | `false` |  |
+| `error` | `error` | `boolean` | `false` |  |
+| `type` | `type` | `'text' \| 'email' \| 'password' \| 'number' \| 'tel' \| 'url' \| 'search' \| 'textarea'` | `'text'` |  |
+| `rows` | `rows` | `number` | `2` |  |
+| `cols` | `cols` | `number` | `20` |  |
+| `leadingIcon` | `leadingIcon` | `string` | `''` |  |
+| `trailingIcon` | `trailingIcon` | `string` | `''` |  |
+| `maxlength` | `maxlength` | `number \| undefined` |  |  |
+| `minlength` | `minlength` | `number \| undefined` |  |  |
+
+**Events**
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `input` | `CustomEvent` |  |
+| `change` | `CustomEvent` |  |
 
-## Storybook
-View interactive documentation: https://68af3f22b44ad2acc02b3370-smrhgwrsuh.chromatic.com/