@warp-ds/elements 2.9.0-next.2 → 2.9.0-next.3

package/dist/docs/card/card.md

@@ -0,0 +1,52 @@
+# Card (w-card)
+
+## Description
+
+Card is a layout component used for separating content areas on a page.
+
+[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-card--docs)
+
+## API Documentation
+
+### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+| selected | `boolean` | `false` | - |
+| flat | `boolean` | `false` | - |
+| clickable | `boolean` | `false` | - |
+| buttonText | `unknown` | `-` | - |
+
+### Property Details
+
+#### selected
+
+
+
+- Type: `boolean`
+- Default: `false`
+
+#### flat
+
+
+
+- Type: `boolean`
+- Default: `false`
+
+#### clickable
+
+
+
+- Type: `boolean`
+- Default: `false`
+
+#### buttonText
+
+
+
+- Type: `unknown`
+- Default: `-`
+
+### Types
+
+No types documented.

package/dist/docs/combobox/api.md

@@ -0,0 +1,132 @@
+## API Documentation
+
+### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+| options | `ComboboxOption[]` | `[]` | - |
+| label | `string | undefined` | `''` | - |
+| placeholder | `string | undefined` | `''` | - |
+| value | `string` | `''` | - |
+| openOnFocus | `boolean` | `false` | - |
+| selectOnBlur | `boolean` | `true` | - |
+| matchTextSegments | `boolean` | `false` | - |
+| disableStaticFiltering | `boolean` | `false` | - |
+| invalid | `boolean` | `false` | - |
+| helpText | `string | undefined` | `''` | - |
+| disabled | `boolean` | `false` | - |
+| required | `boolean` | `false` | - |
+| optional | `boolean` | `false` | - |
+| name | `string | undefined` | `''` | - |
+| autocomplete | `string | undefined` | `'off'` | - |
+
+### Property Details
+
+#### options
+
+The available options to select from
+
+- Type: `ComboboxOption[]`
+- Default: `[]`
+
+#### label
+
+Label above input
+
+- Type: `string | undefined`
+- Default: `''`
+
+#### placeholder
+
+Input placeholder
+
+- Type: `string | undefined`
+- Default: `''`
+
+#### value
+
+The input value
+
+- Type: `string`
+- Default: `''`
+
+#### openOnFocus
+
+Whether the popover opens when focus is on the text field
+
+- Type: `boolean`
+- Default: `false`
+
+#### selectOnBlur
+
+Select active option on blur
+
+- Type: `boolean`
+- Default: `true`
+
+#### matchTextSegments
+
+Whether the matching text segments in the options should be highlighted
+
+- Type: `boolean`
+- Default: `false`
+
+#### disableStaticFiltering
+
+Disable client-side static filtering
+
+- Type: `boolean`
+- Default: `false`
+
+#### invalid
+
+Renders the input field in an invalid state
+
+- Type: `boolean`
+- Default: `false`
+
+#### helpText
+
+The content to display as the help text
+
+- Type: `string | undefined`
+- Default: `''`
+
+#### disabled
+
+Whether the element is disabled
+
+- Type: `boolean`
+- Default: `false`
+
+#### required
+
+Whether the element is required
+
+- Type: `boolean`
+- Default: `false`
+
+#### optional
+
+Whether to show optional text
+
+- Type: `boolean`
+- Default: `false`
+
+#### name
+
+Name attribute for form submission
+
+- Type: `string | undefined`
+- Default: `''`
+
+#### autocomplete
+
+Autocomplete attribute for the input field
+
+- Type: `string | undefined`
+- Default: `'off'`
+
+### Types
+
+No types documented.

package/dist/docs/combobox/combobox.md

@@ -0,0 +1,140 @@
+# Combobox (w-combobox)
+
+## Description
+
+A combobox element for text input with selectable options.
+
+[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-combobox--docs)
+
+## API Documentation
+
+### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+| options | `ComboboxOption[]` | `[]` | - |
+| label | `string | undefined` | `''` | - |
+| placeholder | `string | undefined` | `''` | - |
+| value | `string` | `''` | - |
+| openOnFocus | `boolean` | `false` | - |
+| selectOnBlur | `boolean` | `true` | - |
+| matchTextSegments | `boolean` | `false` | - |
+| disableStaticFiltering | `boolean` | `false` | - |
+| invalid | `boolean` | `false` | - |
+| helpText | `string | undefined` | `''` | - |
+| disabled | `boolean` | `false` | - |
+| required | `boolean` | `false` | - |
+| optional | `boolean` | `false` | - |
+| name | `string | undefined` | `''` | - |
+| autocomplete | `string | undefined` | `'off'` | - |
+
+### Property Details
+
+#### options
+
+The available options to select from
+
+- Type: `ComboboxOption[]`
+- Default: `[]`
+
+#### label
+
+Label above input
+
+- Type: `string | undefined`
+- Default: `''`
+
+#### placeholder
+
+Input placeholder
+
+- Type: `string | undefined`
+- Default: `''`
+
+#### value
+
+The input value
+
+- Type: `string`
+- Default: `''`
+
+#### openOnFocus
+
+Whether the popover opens when focus is on the text field
+
+- Type: `boolean`
+- Default: `false`
+
+#### selectOnBlur
+
+Select active option on blur
+
+- Type: `boolean`
+- Default: `true`
+
+#### matchTextSegments
+
+Whether the matching text segments in the options should be highlighted
+
+- Type: `boolean`
+- Default: `false`
+
+#### disableStaticFiltering
+
+Disable client-side static filtering
+
+- Type: `boolean`
+- Default: `false`
+
+#### invalid
+
+Renders the input field in an invalid state
+
+- Type: `boolean`
+- Default: `false`
+
+#### helpText
+
+The content to display as the help text
+
+- Type: `string | undefined`
+- Default: `''`
+
+#### disabled
+
+Whether the element is disabled
+
+- Type: `boolean`
+- Default: `false`
+
+#### required
+
+Whether the element is required
+
+- Type: `boolean`
+- Default: `false`
+
+#### optional
+
+Whether to show optional text
+
+- Type: `boolean`
+- Default: `false`
+
+#### name
+
+Name attribute for form submission
+
+- Type: `string | undefined`
+- Default: `''`
+
+#### autocomplete
+
+Autocomplete attribute for the input field
+
+- Type: `string | undefined`
+- Default: `'off'`
+
+### Types
+
+No types documented.

package/dist/docs/datepicker/api.md

@@ -0,0 +1,192 @@
+## API Documentation
+
+### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+| shadowRootOptions | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
+| label | `string` | `-` | - |
+| lang | `string` | `-` | - |
+| name | `string` | `-` | - |
+| value | `string` | `-` | - |
+| headerFormat | `string` | `'MMMM yyyy'` | - |
+| weekdayFormat | `string` | `'EEEEEE'` | - |
+| isDayDisabled | `(day: Date) => boolean` | `-` | - |
+| dayFormat | `string` | `'PPPP'` | - |
+| isCalendarOpen | `boolean` | `false` | - |
+| navigationDate | `Date` | `-` | - |
+| selectedDate | `Date | null` | `-` | - |
+| month | `unknown` | `-` | - |
+| weeks | `unknown` | `-` | - |
+| calendar | `HTMLDivElement` | `-` | - |
+| input | `HTMLInputElement` | `-` | - |
+| toggleButton | `HTMLButtonElement` | `-` | - |
+| wrapper | `HTMLDivElement` | `-` | - |
+| previousMonthButton | `HTMLButtonElement` | `-` | - |
+| todayCell | `HTMLTableCellElement` | `-` | - |
+| selectedCell | `HTMLTableCellElement` | `-` | - |
+
+### Property Details
+
+#### shadowRootOptions
+
+
+
+- Type: `object`
+- Default: `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }`
+
+#### label
+
+
+
+- Type: `string`
+- Default: `-`
+
+#### lang
+
+Takes precedence over the `<html>` lang attribute.
+
+- Type: `string`
+- Default: `-`
+
+#### name
+
+
+
+- Type: `string`
+- Default: `-`
+
+#### value
+
+
+
+- Type: `string`
+- Default: `-`
+
+#### headerFormat
+
+Decides the format of the date as shown in the calendar header.
+
+The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
+
+- Type: `string`
+- Default: `'MMMM yyyy'`
+
+#### weekdayFormat
+
+Decides the format of the weekday as shown above the grid of dates in the calendar.
+
+The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
+
+- Type: `string`
+- Default: `'EEEEEE'`
+
+#### isDayDisabled
+
+Lets you control if a date in the calendar should be disabled.
+
+This needs to be set on the element instance in JavaScript, not as an HTML attribute.
+
+- Type: `(day: Date) => boolean`
+- Default: `-`
+
+#### dayFormat
+
+Decides the format of the day in the calendar as read to screen readers.
+
+The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
+
+- Type: `string`
+- Default: `'PPPP'`
+
+#### isCalendarOpen
+
+
+
+- Type: `boolean`
+- Default: `false`
+
+#### navigationDate
+
+
+
+- Type: `Date`
+- Default: `-`
+
+#### selectedDate
+
+
+
+- Type: `Date | null`
+- Default: `-`
+
+#### month
+
+
+
+- Type: `unknown`
+- Default: `-`
+
+#### weeks
+
+
+
+- Type: `unknown`
+- Default: `-`
+
+#### calendar
+
+
+
+- Type: `HTMLDivElement`
+- Default: `-`
+
+#### input
+
+
+
+- Type: `HTMLInputElement`
+- Default: `-`
+
+#### toggleButton
+
+
+
+- Type: `HTMLButtonElement`
+- Default: `-`
+
+#### wrapper
+
+
+
+- Type: `HTMLDivElement`
+- Default: `-`
+
+#### previousMonthButton
+
+This is the first focusable element, needed for the modal focus trap.
+
+Don't cache this and other `@query` fields from inside the calendar modal.
+They work the first time, but once the calendar is closed and reopened
+the query will point to an element that doesn't exist anymore.
+
+- Type: `HTMLButtonElement`
+- Default: `-`
+
+#### todayCell
+
+
+
+- Type: `HTMLTableCellElement`
+- Default: `-`
+
+#### selectedCell
+
+
+
+- Type: `HTMLTableCellElement`
+- Default: `-`
+
+### Types
+
+No types documented.

package/dist/docs/datepicker/datepicker.md

@@ -0,0 +1,202 @@
+# Datepicker (w-datepicker)
+
+## Description
+
+An input for dates.
+
+Uses the `lang` attribute on either the element or on `<html>` to determine the locale options.
+
+[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-datepicker--docs)
+
+## API Documentation
+
+### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+| shadowRootOptions | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
+| label | `string` | `-` | - |
+| lang | `string` | `-` | - |
+| name | `string` | `-` | - |
+| value | `string` | `-` | - |
+| headerFormat | `string` | `'MMMM yyyy'` | - |
+| weekdayFormat | `string` | `'EEEEEE'` | - |
+| isDayDisabled | `(day: Date) => boolean` | `-` | - |
+| dayFormat | `string` | `'PPPP'` | - |
+| isCalendarOpen | `boolean` | `false` | - |
+| navigationDate | `Date` | `-` | - |
+| selectedDate | `Date | null` | `-` | - |
+| month | `unknown` | `-` | - |
+| weeks | `unknown` | `-` | - |
+| calendar | `HTMLDivElement` | `-` | - |
+| input | `HTMLInputElement` | `-` | - |
+| toggleButton | `HTMLButtonElement` | `-` | - |
+| wrapper | `HTMLDivElement` | `-` | - |
+| previousMonthButton | `HTMLButtonElement` | `-` | - |
+| todayCell | `HTMLTableCellElement` | `-` | - |
+| selectedCell | `HTMLTableCellElement` | `-` | - |
+
+### Property Details
+
+#### shadowRootOptions
+
+
+
+- Type: `object`
+- Default: `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }`
+
+#### label
+
+
+
+- Type: `string`
+- Default: `-`
+
+#### lang
+
+Takes precedence over the `<html>` lang attribute.
+
+- Type: `string`
+- Default: `-`
+
+#### name
+
+
+
+- Type: `string`
+- Default: `-`
+
+#### value
+
+
+
+- Type: `string`
+- Default: `-`
+
+#### headerFormat
+
+Decides the format of the date as shown in the calendar header.
+
+The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
+
+- Type: `string`
+- Default: `'MMMM yyyy'`
+
+#### weekdayFormat
+
+Decides the format of the weekday as shown above the grid of dates in the calendar.
+
+The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
+
+- Type: `string`
+- Default: `'EEEEEE'`
+
+#### isDayDisabled
+
+Lets you control if a date in the calendar should be disabled.
+
+This needs to be set on the element instance in JavaScript, not as an HTML attribute.
+
+- Type: `(day: Date) => boolean`
+- Default: `-`
+
+#### dayFormat
+
+Decides the format of the day in the calendar as read to screen readers.
+
+The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
+
+- Type: `string`
+- Default: `'PPPP'`
+
+#### isCalendarOpen
+
+
+
+- Type: `boolean`
+- Default: `false`
+
+#### navigationDate
+
+
+
+- Type: `Date`
+- Default: `-`
+
+#### selectedDate
+
+
+
+- Type: `Date | null`
+- Default: `-`
+
+#### month
+
+
+
+- Type: `unknown`
+- Default: `-`
+
+#### weeks
+
+
+
+- Type: `unknown`
+- Default: `-`
+
+#### calendar
+
+
+
+- Type: `HTMLDivElement`
+- Default: `-`
+
+#### input
+
+
+
+- Type: `HTMLInputElement`
+- Default: `-`
+
+#### toggleButton
+
+
+
+- Type: `HTMLButtonElement`
+- Default: `-`
+
+#### wrapper
+
+
+
+- Type: `HTMLDivElement`
+- Default: `-`
+
+#### previousMonthButton
+
+This is the first focusable element, needed for the modal focus trap.
+
+Don't cache this and other `@query` fields from inside the calendar modal.
+They work the first time, but once the calendar is closed and reopened
+the query will point to an element that doesn't exist anymore.
+
+- Type: `HTMLButtonElement`
+- Default: `-`
+
+#### todayCell
+
+
+
+- Type: `HTMLTableCellElement`
+- Default: `-`
+
+#### selectedCell
+
+
+
+- Type: `HTMLTableCellElement`
+- Default: `-`
+
+### Types
+
+No types documented.