@warp-ds/elements 2.10.0-next.4 → 2.10.0-next.6

package/dist/docs/expandable/expandable.md

@@ -4,73 +4,113 @@
 
 Expandable is a layout component used for creating expandable content areas on a page.
 
-[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-expandable--docs)
-
 ## Usage
 
 ## Accessibility
 
 ## Examples
 
-## `<w-expandable>` API
+<elements-example>
 
-Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
+```html
+<w-expandable title="I'm expandable" animated>
+  <p>with expanded content</p>
+</w-expandable>
+```
 
-### Properties
+</elements-example>
 
-| Name | Type | Default | Summary |
-|-|-|-|-|
-| _hasTitle | `boolean` | `true` | - |
-| _showChevronUp | `boolean` | `false` | - |
-| animated | `boolean` | `false` | - |
-| bleed | `boolean` | `false` | - |
-| box | `boolean` | `false` | - |
-| button-class | `string` | `-` | - |
-| content-class | `string` | `-` | - |
-| expanded | `boolean` | `false` | - |
-| heading-level | `number` | `-` | - |
-| no-chevron | `boolean` | `false` | - |
-| title | `string` | `-` | - |
+### Expandable box
 
-### Property Details
+<elements-example>
 
-#### _hasTitle
+```html
+<w-expandable title="I'm expandable" animated box>
+  <p>with expanded content</p>
+</w-expandable>
+```
 
+</elements-example>
 
 
-- Type: `boolean`
-- Default: `true`
+### Expandable box with custom title
 
-#### _showChevronUp
+This can be used if more control over styling is needed than the `title` prop allows
 
+<elements-example>
 
+```html
+<w-expandable animated box>
+  <div slot="title" class="flex flex-row items-center">
+    <w-icon-bag-16></w-icon-bag-16>
+    <p class="ml-8 mb-0">This is a title with an icon</p>
+  </div>
+  <p>with expanded content</p>
+</w-expandable>
+```
 
-- Type: `boolean`
-- Default: `false`
+</elements-example>
 
-#### animated
 
+### With expanded prop
+
+<elements-example>
+
+```html
+<w-expandable animated box title="I'm expanded by default" expanded>
+  <p>content should be visible</p>
+</w-expandable>
+```
+
+</elements-example>
+
+## Styling API
+
+## `<w-expandable>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
+
+### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+| animated | `boolean` | `false` | Will animate the expansion/collapse |
+| bleed | `boolean` | `false` | Will make the expandable full-width on the sm breakpoint size |
+| box | `boolean` | `false` | Will make the expandable a Box |
+| button-class | `string` | `-` | **Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. |
+| content-class | `string` | `-` | **Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. |
+| expanded | `boolean` | `false` | Controls component's expanded state |
+| heading-level | `number` | `-` | Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element. |
+| no-chevron | `boolean` | `false` | Controls chevron visibility |
+| title | `string` | `-` | Component title. Used to display the title value which is always present regardless of whether the component is open or closed. |
+
+### Property Details
+
+#### animated
 
+Will animate the expansion/collapse
 
 - Type: `boolean`
 - Default: `false`
 
 #### bleed
 
-
+Will make the expandable full-width on the sm breakpoint size
 
 - Type: `boolean`
 - Default: `false`
 
 #### box
 
-
+Will make the expandable a Box
 
 - Type: `boolean`
 - Default: `false`
 
 #### button-class
 
+**Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.
+
 
 
 - Type: `string`
@@ -78,6 +118,8 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 #### content-class
 
+**Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.
+
 
 
 - Type: `string`
@@ -85,28 +127,28 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 #### expanded
 
-
+Controls component's expanded state
 
 - Type: `boolean`
 - Default: `false`
 
 #### heading-level
 
-
+Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element.
 
 - Type: `number`
 - Default: `-`
 
 #### no-chevron
 
-
+Controls chevron visibility
 
 - Type: `boolean`
 - Default: `false`
 
 #### title
 
-
+Component title. Used to display the title value which is always present regardless of whether the component is open or closed.
 
 - Type: `string`
 - Default: `-`

package/dist/docs/expandable/styling.md

@@ -0,0 +1 @@
+## Styling API

package/dist/docs/icon/icon.md

@@ -2,7 +2,7 @@
 
 ## Description
 
-
+See the Icons overview for a list of available icons. Icon names are case sensitive.
 
 ## Usage
 
@@ -68,6 +68,8 @@ You can set a pixel size as well if none of the presets fit your needs.
 
 </elements-example>
 
+## Styling API
+
 ## `<w-icon>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/icon/styling.md

@@ -0,0 +1 @@
+## Styling API

package/dist/docs/index.md

@@ -0,0 +1,46 @@
+# Warp Elements Component Documentation
+
+Generated by `pnpm build:docs`. This file indexes the Markdown documentation shipped with `@warp-ds/elements`.
+
+- Package export: `@warp-ds/elements/docs`
+- Component docs export pattern: `@warp-ds/elements/docs/<component>/<component>.md`
+
+## Components
+
+| Component | Element / API | Package | Summary | Docs |
+|-|-|-|-|-|
+| Affix | `<w-affix>` | `affix` | This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`. | [affix.md](./affix/affix.md) |
+| Alert | `<w-alert>` | `alert` | Alert is an inline component used for displaying different types of messages. For accessibility reasons, alert should appear close to the element that triggered it. | [alert.md](./alert/alert.md) |
+| Attention | `<w-attention>` | `attention` | Attention is a versatile component for displaying contextual information and messages. It can be used for a wide range of purposes, such as tooltips, callouts, popovers, and highlights. The component is designed to be anchored to a trigger element, providing contextual information related to that element. It supports various placements and styling options to accommodate different use cases and design needs. Note: attention will soon be split into multiple components (tooltip, callout, popover, highlight) at which time this component will be deprecated. For now, use the `tooltip`, `callout`, `popover`, and `highlight` boolean properties to achieve the desired style and behavior. | [attention.md](./attention/attention.md) |
+| Badge | `<w-badge>` | `badge` | `w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count. | [badge.md](./badge/badge.md) |
+| Box | `<w-box>` | `box` | Box is a layout component used for separating content areas on a page. | [box.md](./box/box.md) |
+| Breadcrumbs | `<w-breadcrumbs>` | `breadcrumbs` | Shows the navigation structure for the current page. Renders direct child links and non-link elements as a breadcrumb trail, inserts separators between items, and exposes the trail as navigation. | [breadcrumbs.md](./breadcrumbs/breadcrumbs.md) |
+| Button | `<w-button>` | `button` | Performs an action or renders a link with button styling. Use button variants to match action priority, risk, and context. | [button.md](./button/button.md) |
+| Card | `<w-card>` | `card` | Card is a layout component used for separating content areas on a page. | [card.md](./card/card.md) |
+| Checkbox | `<w-checkbox>` | `checkbox` | Checkbox lets users select one or more options. Use it for independent yes/no choices, multi-select lists, and terms or consent confirmations. | [checkbox.md](./checkbox/checkbox.md) |
+| Checkbox Group | `<w-checkbox-group>` | `checkbox-group` | Use `w-checkbox-group` when several checkboxes share one label, help text, optional indicator, or required validation. | [checkbox-group.md](./checkbox-group/checkbox-group.md) |
+| Combobox | `<w-combobox>` | `combobox` | A combobox element for text input with selectable options. | [combobox.md](./combobox/combobox.md) |
+| Datepicker | `<w-datepicker>` | `datepicker` | An input for dates. Uses the `lang` attribute on either the element or on `<html>` to determine the locale options. | [datepicker.md](./datepicker/datepicker.md) |
+| Expandable | `<w-expandable>` | `expandable` | Expandable is a layout component used for creating expandable content areas on a page. | [expandable.md](./expandable/expandable.md) |
+| Icon | `<w-icon>` | `icon` | See the Icons overview for a list of available icons. Icon names are case sensitive. | [icon.md](./icon/icon.md) |
+| Link | `<w-link>` | `link` | Buttons are used to perform actions, with different visuals for different needs. | [link.md](./link/link.md) |
+| Modal | `<w-modal>` | `modal` | Modals (or dialogs) display important information that users need to acknowledge. | [modal.md](./modal/modal.md) |
+| Modal Footer | `<w-modal-footer>` | `modal-footer` | The footer section of a modal, typically where you place actions. | [modal-footer.md](./modal-footer/modal-footer.md) |
+| Modal Header | `<w-modal-header>` | `modal-header` | The header section of a modal, typically where you place the title and a close button. | [modal-header.md](./modal-header/modal-header.md) |
+| Page Indicator | `<w-page-indicator>` | `page-indicator` | A page indicator component that displays a series of dots representing pages. One dot is highlighted to indicate the currently selected page. | [page-indicator.md](./page-indicator/page-indicator.md) |
+| Pagination | `<w-pagination>` | `pagination` | Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows. | [pagination.md](./pagination/pagination.md) |
+| Pill | `<w-pill>` | `pill` | Pill is a type of button that is often used as a filter, but can also be used as a rounded button for overlays, etc. | [pill.md](./pill/pill.md) |
+| Radio | `<w-radio>` | `radio` | A radio input typically consists of two components: | [radio.md](./radio/radio.md) |
+| Radio Group | `<w-radio-group>` | `radio-group` | Radios allow users to select a single option from a list of choices. Use with `w-radio`. | [radio-group.md](./radio-group/radio-group.md) |
+| Select | `<w-select>` | `select` | A dropdown component for selecting a single value. | [select.md](./select/select.md) |
+| Slider | `<w-slider>` | `slider` | Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`. | [slider.md](./slider/slider.md) |
+| Slider Thumb | `<w-slider-thumb>` | `slider-thumb` | Component to place inside a `<w-slider>`. | [slider-thumb.md](./slider-thumb/slider-thumb.md) |
+| Step | `<w-step>` | `step` | Individual step component that shows a single step in a process | [step.md](./step/step.md) |
+| Step Indicator | `<w-step-indicator>` | `step-indicator` | Steps are used to show progress through a process or to guide users through a multi-step task. | [step-indicator.md](./step-indicator/step-indicator.md) |
+| Switch | `<w-switch>` | `switch` | The Switch component allows users to toggle between two states. | [switch.md](./switch/switch.md) |
+| Tab | `<w-tab>` | `tab` | Individual tab component used within w-tabs container. | [tab.md](./tab/tab.md) |
+| Tab Panel | `<w-tab-panel>` | `tab-panel` | Tab panel component that holds content for individual tabs. Each tab panel should have a name that matches a corresponding tab. | [tab-panel.md](./tab-panel/tab-panel.md) |
+| Tabs | `<w-tabs>` | `tabs` | Tabs are used to organize content by grouping similar information on the same page. | [tabs.md](./tabs/tabs.md) |
+| Textarea | `<w-textarea>` | `textarea` | A multi-line text input with built-in form validation, auto-resizing, and styling support. The component automatically handles: - Form integration - Auto-resizing based on content and row constraints - Built-in validation with customizable error messages - Accessibility attributes and labeling | [textarea.md](./textarea/textarea.md) |
+| Textfield | `<w-textfield>` | `textfield` | A single-line input component used for entering and editing textual or numeric data. | [textfield.md](./textfield/textfield.md) |
+| Toast | `@warp-ds/elements/toast` | `toast` | Toasts are brief user feedback messages that overlay content. | [toast.md](./toast/toast.md) |

package/dist/docs/link/link.md

@@ -4,8 +4,6 @@
 
 Buttons are used to perform actions, with different visuals for different needs.
 
-[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-link--docs)
-
 ## Usage
 
 **Do:**
@@ -105,6 +103,8 @@ All variants can be small.
 
 </elements-example>
 
+## Styling API
+
 ## `<w-link>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/link/styling.md

@@ -0,0 +1 @@
+## Styling API

package/dist/docs/modal/modal.md

@@ -185,6 +185,8 @@ modal.addEventListener('command', function (event: CommandEvent) {
 
 </elements-example>
 
+## Styling API
+
 ## `<w-modal>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/modal/styling.md

@@ -0,0 +1 @@
+## Styling API

package/dist/docs/modal-footer/modal-footer.md

@@ -4,12 +4,6 @@
 
 The footer section of a modal, typically where you place actions.
 
-## Usage
-
-## Accessibility
-
-## Examples
-
 ### `<w-modal-footer>` API
 
 #### Properties

package/dist/docs/modal-header/modal-header.md

@@ -4,12 +4,6 @@
 
 The header section of a modal, typically where you place the title and a close button.
 
-## Usage
-
-## Accessibility
-
-## Examples
-
 ### `<w-modal-header>` API
 
 #### Properties

package/dist/docs/page-indicator/page-indicator.md

@@ -28,6 +28,8 @@ One dot is highlighted to indicate the currently selected page.
 
 </elements-example>
 
+## Styling API
+
 ## `<w-page-indicator>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/page-indicator/styling.md

@@ -0,0 +1 @@
+## Styling API

package/dist/docs/pagination/pagination.md

@@ -48,6 +48,8 @@ If you want to override this in your app and handle things like scroll and focus
 </script>
 ```
 
+## Styling API
+
 ## `<w-pagination>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/pagination/styling.md

@@ -0,0 +1 @@
+## Styling API

package/dist/docs/pill/pill.md

@@ -43,6 +43,8 @@ For example to dismiss or turn off parts of a filter.
 
 </elements-example>
 
+## Styling API
+
 ## `<w-pill>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/pill/styling.md

@@ -0,0 +1 @@
+## Styling API

package/dist/docs/radio/radio.md

@@ -2,13 +2,7 @@
 
 ## Description
 
-
-
-## Usage
-
-## Accessibility
-
-## Examples
+A radio input typically consists of two components:
 
 ### `<w-radio>` API
 

package/dist/docs/select/select.md

@@ -158,6 +158,8 @@ The `readonly` boolean attribute makes the selection immutable. Unlike disabled
 
 </elements-example>
 
+## Styling API
+
 ## `<w-select>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/select/styling.md

@@ -0,0 +1 @@
+## Styling API

package/dist/docs/slider/slider.md

@@ -306,6 +306,8 @@ The text field doubles as a visualization of the exact value, which is difficult
 
 </elements-example>
 
+## Styling API
+
 ## `<w-slider>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/slider/styling.md

@@ -0,0 +1 @@
+## Styling API

package/dist/docs/slider-thumb/slider-thumb.md

@@ -10,6 +10,8 @@ Component to place inside a `<w-slider>`.
 
 ## Examples
 
+## Styling API
+
 ### `<w-slider-thumb>` API
 
 #### Properties

package/dist/docs/slider-thumb/styling.md

@@ -0,0 +1 @@
+## Styling API

package/dist/docs/step-indicator/step-indicator.md

@@ -103,6 +103,8 @@ Each `<w-step>` can be marked as `active` or `completed` to indicate progress. T
 
 </elements-example>
 
+## Styling API
+
 ## `<w-step-indicator>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/step-indicator/styling.md

@@ -0,0 +1 @@
+## Styling API

package/dist/docs/switch/styling.md

@@ -0,0 +1 @@
+## Styling API

package/dist/docs/switch/switch.md

@@ -34,6 +34,8 @@ The internal control is rendered as a native `button` with `role="switch"` and `
 
 </elements-example>
 
+## Styling API
+
 ## `<w-switch>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/tabs/styling.md

@@ -0,0 +1 @@
+## Styling API

package/dist/docs/tabs/tabs.md

@@ -97,6 +97,8 @@ Use the `over` attribute to position icons above the label:
 
 </elements-example>
 
+## Styling API
+
 ## `<w-tabs>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/textarea/styling.md

@@ -0,0 +1 @@
+## Styling API

package/dist/docs/textarea/textarea.md

@@ -111,6 +111,8 @@ Makes the textarea content immutable while remaining focusable. The contents can
 
 </elements-example>
 
+## Styling API
+
 ## `<w-textarea>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/textfield/styling.md

@@ -0,0 +1 @@
+## Styling API

package/dist/docs/textfield/textfield.md

@@ -181,6 +181,8 @@ The readonly boolean attribute makes the w-textfield's text content immutable. U
 
 </elements-example>
 
+## Styling API
+
 ## `<w-textfield>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).