npm - @warp-ds/elements - Versions diffs - 2.10.0-next.1 → 2.10.0-next.11 - Mend

@warp-ds/elements 2.10.0-next.1 → 2.10.0-next.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (254) hide show

package/README.md +4 -0
package/dist/api.js +1 -1
package/dist/api.js.map +1 -1
package/dist/custom-elements.json +233 -87
package/dist/docs/affix/affix.md +2 -2
package/dist/docs/affix/styling.md +1 -0
package/dist/docs/alert/alert.md +2 -2
package/dist/docs/alert/styling.md +1 -0
package/dist/docs/attention/attention.md +2 -0
package/dist/docs/attention/styling.md +1 -0
package/dist/docs/badge/badge.md +2 -0
package/dist/docs/badge/styling.md +1 -0
package/dist/docs/box/box.md +22 -40
package/dist/docs/box/examples.md +20 -38
package/dist/docs/box/styling.md +1 -0
package/dist/docs/breadcrumbs/breadcrumbs.md +8 -2
package/dist/docs/breadcrumbs/examples.md +7 -1
package/dist/docs/breadcrumbs/styling.md +1 -0
package/dist/docs/button/button.md +73 -2
package/dist/docs/button/styling.md +72 -0
package/dist/docs/card/accessibility.md +74 -0
package/dist/docs/card/api.md +9 -3
package/dist/docs/card/card.md +236 -5
package/dist/docs/card/examples.md +75 -0
package/dist/docs/card/styling.md +1 -0
package/dist/docs/card/usage.md +76 -0
package/dist/docs/checkbox/api.md +128 -0
package/dist/docs/checkbox/checkbox.md +134 -0
package/dist/docs/checkbox-group/accessibility.md +71 -0
package/dist/docs/checkbox-group/api.md +79 -0
package/dist/docs/checkbox-group/checkbox-group.md +492 -0
package/dist/docs/checkbox-group/examples.md +105 -0
package/dist/docs/checkbox-group/styling.md +132 -0
package/dist/docs/checkbox-group/usage.md +95 -0
package/dist/docs/combobox/accessibility.md +71 -0
package/dist/docs/combobox/api.md +60 -30
package/dist/docs/combobox/combobox.md +205 -32
package/dist/docs/combobox/examples.md +44 -0
package/dist/docs/combobox/styling.md +1 -0
package/dist/docs/combobox/usage.md +28 -0
package/dist/docs/datepicker/accessibility.md +25 -0
package/dist/docs/datepicker/api.md +22 -14
package/dist/docs/datepicker/datepicker.md +208 -16
package/dist/docs/datepicker/examples.md +75 -0
package/dist/docs/datepicker/styling.md +1 -0
package/dist/docs/datepicker/usage.md +84 -0
package/dist/docs/expandable/api.md +20 -32
package/dist/docs/expandable/examples.md +54 -0
package/dist/docs/expandable/expandable.md +74 -32
package/dist/docs/expandable/styling.md +1 -0
package/dist/docs/icon/accessibility.md +5 -0
package/dist/docs/icon/api.md +43 -0
package/dist/docs/icon/examples.md +45 -0
package/dist/docs/icon/icon.md +115 -0
package/dist/docs/icon/styling.md +1 -0
package/dist/docs/icon/usage.md +11 -0
package/dist/docs/index.md +46 -0
package/dist/docs/link/api.md +18 -22
package/dist/docs/link/examples.md +75 -0
package/dist/docs/link/link.md +113 -24
package/dist/docs/link/styling.md +1 -0
package/dist/docs/link/usage.md +18 -0
package/dist/docs/modal/modal.md +2 -0
package/dist/docs/modal/styling.md +1 -0
package/dist/docs/modal-footer/modal-footer.md +0 -6
package/dist/docs/modal-header/modal-header.md +0 -6
package/dist/docs/page-indicator/page-indicator.md +2 -0
package/dist/docs/page-indicator/styling.md +1 -0
package/dist/docs/pagination/pagination.md +2 -0
package/dist/docs/pagination/styling.md +1 -0
package/dist/docs/pill/pill.md +2 -0
package/dist/docs/pill/styling.md +1 -0
package/dist/docs/radio/radio.md +1 -7
package/dist/docs/select/select.md +2 -0
package/dist/docs/select/styling.md +1 -0
package/dist/docs/slider/slider.md +2 -0
package/dist/docs/slider/styling.md +1 -0
package/dist/docs/slider-thumb/slider-thumb.md +2 -0
package/dist/docs/slider-thumb/styling.md +1 -0
package/dist/docs/step-indicator/step-indicator.md +2 -0
package/dist/docs/step-indicator/styling.md +1 -0
package/dist/docs/switch/styling.md +1 -0
package/dist/docs/switch/switch.md +2 -0
package/dist/docs/tabs/styling.md +1 -0
package/dist/docs/tabs/tabs.md +2 -0
package/dist/docs/textarea/styling.md +1 -0
package/dist/docs/textarea/textarea.md +2 -0
package/dist/docs/textfield/styling.md +1 -0
package/dist/docs/textfield/textfield.md +2 -0
package/dist/index.d.ts +932 -341
package/dist/packages/affix/affix.hydration.test.js +1 -1
package/dist/packages/affix/affix.js +4 -4
package/dist/packages/affix/affix.js.map +4 -4
package/dist/packages/alert/alert.hydration.test.js +1 -1
package/dist/packages/alert/alert.js +3 -3
package/dist/packages/alert/alert.js.map +3 -3
package/dist/packages/attention/attention.hydration.test.js +1 -1
package/dist/packages/attention/attention.js +397 -446
package/dist/packages/attention/attention.js.map +4 -4
package/dist/packages/attention/attention.test.js +1 -1
package/dist/packages/badge/badge.hydration.test.js +1 -1
package/dist/packages/box/box.hydration.test.js +1 -1
package/dist/packages/box/box.js +1 -1
package/dist/packages/box/box.js.map +1 -1
package/dist/packages/breadcrumbs/breadcrumbs.hydration.test.js +3 -2
package/dist/packages/breadcrumbs/breadcrumbs.js +4 -4
package/dist/packages/breadcrumbs/breadcrumbs.js.map +3 -3
package/dist/packages/button/button.hydration.test.js +1 -1
package/dist/packages/button/button.js +387 -436
package/dist/packages/button/button.js.map +4 -4
package/dist/packages/button/button.stories.d.ts +29 -0
package/dist/packages/button/button.stories.js +176 -2
package/dist/packages/button/styles.d.ts +22 -1
package/dist/packages/button/styles.js +390 -1
package/dist/packages/card/card.d.ts +9 -6
package/dist/packages/card/card.hydration.test.js +1 -1
package/dist/packages/card/card.js +3 -3
package/dist/packages/card/card.js.map +4 -4
package/dist/packages/checkbox/checkbox.d.ts +45 -14
package/dist/packages/checkbox/checkbox.hydration.test.js +1 -1
package/dist/packages/checkbox/checkbox.js +3 -3
package/dist/packages/checkbox/checkbox.js.map +3 -3
package/dist/packages/checkbox/checkbox.react.stories.d.ts +1 -1
package/dist/packages/checkbox/checkbox.stories.d.ts +2 -2
package/dist/packages/checkbox/checkbox.test.js +1 -1
package/dist/packages/checkbox/react.d.ts +2 -2
package/dist/packages/checkbox-group/checkbox-group.a11y.test.js +1 -1
package/dist/packages/checkbox-group/checkbox-group.d.ts +35 -8
package/dist/packages/checkbox-group/checkbox-group.hydration.test.js +1 -1
package/dist/packages/checkbox-group/checkbox-group.js +6 -6
package/dist/packages/checkbox-group/checkbox-group.js.map +4 -4
package/dist/packages/checkbox-group/react.d.ts +3 -3
package/dist/packages/combobox/combobox.a11y.test.js +24 -0
package/dist/packages/combobox/combobox.d.ts +65 -45
package/dist/packages/combobox/combobox.hydration.test.js +39 -1
package/dist/packages/combobox/combobox.js +21 -21
package/dist/packages/combobox/combobox.js.map +4 -4
package/dist/packages/combobox/combobox.stories.js +28 -15
package/dist/packages/combobox/combobox.test.js +110 -0
package/dist/packages/datepicker/DatePicker.test.js +1 -1
package/dist/packages/datepicker/datepicker.d.ts +22 -30
package/dist/packages/datepicker/datepicker.hydration.test.js +1 -1
package/dist/packages/datepicker/datepicker.js +49 -49
package/dist/packages/datepicker/datepicker.js.map +4 -4
package/dist/packages/datepicker/datepicker.test.js +1 -1
package/dist/packages/expandable/expandable.d.ts +11 -32
package/dist/packages/expandable/expandable.hydration.test.js +1 -1
package/dist/packages/expandable/expandable.js +11 -11
package/dist/packages/expandable/expandable.js.map +3 -3
package/dist/packages/expandable/expandable.react.stories.d.ts +2 -2
package/dist/packages/expandable/react.d.ts +1 -1
package/dist/packages/icon/icon.d.ts +16 -4
package/dist/packages/icon/icon.hydration.test.js +1 -1
package/dist/packages/icon/icon.js +2 -2
package/dist/packages/icon/icon.js.map +3 -3
package/dist/packages/icon/icon.react.stories.d.ts +1 -1
package/dist/packages/icon/react.d.ts +2 -2
package/dist/packages/link/link.d.ts +15 -16
package/dist/packages/link/link.hydration.test.js +1 -1
package/dist/packages/link/link.js +420 -190
package/dist/packages/link/link.js.map +4 -4
package/dist/packages/link/link.test.js +1 -1
package/dist/packages/link/styles.d.ts +5 -0
package/dist/packages/link/styles.js +80 -0
package/dist/packages/modal/modal.d.ts +1 -0
package/dist/packages/modal/modal.hydration.test.js +1 -1
package/dist/packages/modal/modal.js +4 -4
package/dist/packages/modal/modal.js.map +3 -3
package/dist/packages/modal/modal.react.stories.d.ts +4 -4
package/dist/packages/modal/modal.react.stories.js +9 -1
package/dist/packages/modal/react.d.ts +34 -4
package/dist/packages/modal/react.js +30 -0
package/dist/packages/modal-header/modal-header.js +11 -9
package/dist/packages/modal-header/modal-header.js.map +4 -4
package/dist/packages/page-indicator/page-indicator.hydration.test.js +1 -1
package/dist/packages/page-indicator/page-indicator.js +5 -5
package/dist/packages/page-indicator/page-indicator.js.map +3 -3
package/dist/packages/pagination/pagination.hydration.test.js +1 -1
package/dist/packages/pagination/pagination.js +4 -4
package/dist/packages/pagination/pagination.js.map +4 -4
package/dist/packages/pagination/pagination.test.js +1 -1
package/dist/packages/pill/pill.hydration.test.js +1 -1
package/dist/packages/pill/pill.js +3 -3
package/dist/packages/pill/pill.js.map +4 -4
package/dist/packages/radio/radio.hydration.test.js +1 -1
package/dist/packages/radio/radio.js +3 -3
package/dist/packages/radio/radio.js.map +3 -3
package/dist/packages/radio/radio.test.js +1 -1
package/dist/packages/radio-group/radio-group.a11y.test.js +7 -3
package/dist/packages/radio-group/radio-group.hydration.test.js +6 -2
package/dist/packages/radio-group/radio-group.js +11 -11
package/dist/packages/radio-group/radio-group.js.map +4 -4
package/dist/packages/select/select.a11y.test.js +6 -2
package/dist/packages/select/select.hydration.test.js +1 -1
package/dist/packages/select/select.js +7 -7
package/dist/packages/select/select.js.map +4 -4
package/dist/packages/select/select.test.js +4 -2
package/dist/packages/slider/slider.hydration.test.js +7 -2
package/dist/packages/slider/slider.js +5 -5
package/dist/packages/slider/slider.js.map +4 -4
package/dist/packages/slider/slider.react.stories.js +2 -2
package/dist/packages/slider/slider.test.js +1 -1
package/dist/packages/slider-thumb/slider-thumb.hydration.test.js +1 -1
package/dist/packages/slider-thumb/slider-thumb.js +20 -20
package/dist/packages/slider-thumb/slider-thumb.js.map +4 -4
package/dist/packages/step/step.hydration.test.js +1 -1
package/dist/packages/step/step.js +8 -8
package/dist/packages/step/step.js.map +4 -4
package/dist/packages/step-indicator/step-indicator.hydration.test.js +1 -1
package/dist/packages/switch/switch.a11y.test.js +1 -1
package/dist/packages/switch/switch.hydration.test.js +1 -1
package/dist/packages/switch/switch.js +1 -1
package/dist/packages/switch/switch.js.map +1 -1
package/dist/packages/tab/tab.hydration.test.js +1 -1
package/dist/packages/tab/tab.js +10 -10
package/dist/packages/tab/tab.js.map +2 -2
package/dist/packages/tab-panel/tab-panel.hydration.test.js +1 -1
package/dist/packages/tab-panel/tab-panel.js +3 -3
package/dist/packages/tab-panel/tab-panel.js.map +2 -2
package/dist/packages/tabs/tabs.a11y.test.js +2 -2
package/dist/packages/tabs/tabs.hydration.test.js +1 -1
package/dist/packages/tabs/tabs.js +1 -1
package/dist/packages/tabs/tabs.js.map +2 -2
package/dist/packages/tabs/tabs.test.js +4 -4
package/dist/packages/textarea/textarea.hydration.test.js +1 -1
package/dist/packages/textarea/textarea.js +4 -4
package/dist/packages/textarea/textarea.js.map +3 -3
package/dist/packages/textarea/textarea.test.js +1 -1
package/dist/packages/textfield/textfield.hydration.test.js +1 -1
package/dist/packages/textfield/textfield.js +1 -1
package/dist/packages/textfield/textfield.js.map +1 -1
package/dist/packages/textfield/textfield.test.js +1 -1
package/dist/packages/toast/toast.js +6 -6
package/dist/packages/toast/toast.js.map +4 -4
package/dist/packages/toast/toast.stories.d.ts +1 -5
package/dist/packages/toast/toast.stories.js +0 -17
package/dist/packages/toast-container/toast-container.js +2 -2
package/dist/packages/toast-container/toast-container.js.map +2 -2
package/dist/web-types.json +238 -103
package/eik/index.js +2536 -0
package/package.json +15 -9
package/dist/docs/modal-footer/accessibility.md +0 -1
package/dist/docs/modal-footer/examples.md +0 -1
package/dist/docs/modal-footer/usage.md +0 -1
package/dist/docs/modal-header/accessibility.md +0 -1
package/dist/docs/modal-header/examples.md +0 -1
package/dist/docs/modal-header/usage.md +0 -1
package/dist/docs/radio/accessibility.md +0 -1
package/dist/docs/radio/examples.md +0 -1
package/dist/docs/radio/usage.md +0 -1
package/dist/packages/button/styles/w-button.styles.d.ts +0 -1
package/dist/packages/button/styles/w-button.styles.js +0 -282
package/dist/packages/link/styles/w-link.styles.d.ts +0 -1
package/dist/packages/link/styles/w-link.styles.js +0 -213

package/dist/docs/datepicker/datepicker.md CHANGED Viewed

@@ -6,14 +6,198 @@ 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)
 ## Usage
+Datepicker lets users type or choose a calendar date.
+Use `w-datepicker` when the user needs to provide one specific date, such as a travel date, appointment date, or deadline. The component is form-associated and submits an ISO date value.
+### Basic Datepicker
+```html
+<w-datepicker label="Date" name="date"></w-datepicker>
+```
+Always provide a visible `label`.
+### Value
+Use `value` to set the selected date. The value should use `YYYY-MM-DD` format.
+```html
+<w-datepicker label="Start date" name="start-date" value="2026-06-15"></w-datepicker>
+```
+The same value is submitted with the form.
+```html
+<form>
+  <w-datepicker label="Departure date" name="departure"></w-datepicker>
+  <w-button type="submit">Search</w-button>
+</form>
+```
+### Locale
+Datepicker uses the `lang` attribute on the component, or the `lang` attribute on `<html>`, to choose locale-specific calendar labels and formatting.
+```html
+<w-datepicker label="Dato" name="date" lang="nb"></w-datepicker>
+```
+The component includes built-in locale support for `en`, `nb`, `sv`, `da`, and `fi`.
+### Formatting
+Use `header-format`, `weekday-format`, and `day-format` to control calendar display and accessible day labels.
+```html
+<w-datepicker
+  label="Date"
+  name="date"
+  header-format="MMMM yyyy"
+  weekday-format="EEEEEE"
+  day-format="PPPP"
+></w-datepicker>
+```
+These formats use `date-fns/format` syntax. Keep `day-format` descriptive because it is used as the accessible name for each day in the calendar.
+### Disable Dates
+Use `isDayDisabled` to prevent users from selecting certain dates from the calendar.
+This property must be set on the element instance in JavaScript.
+```html
+<w-datepicker id="booking-date" label="Booking date" name="booking-date"></w-datepicker>
+<script type="module">
+  const datepicker = document.querySelector('#booking-date');
+  datepicker.isDayDisabled = (day) => day.getDay() === 0;
+</script>
+```
+Disabled dates cannot be selected from the calendar.
+### About change events
+With events the datepicker works much like the native `<input type="date">`:
+- When the user types in the input field the component fires [`input` events](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).
+- When the user clicks a date in the calendar the component fires [`change` events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).
+Note that the component does not fire a `change` event when typing in the input field. This is intentional.
+You can listen to the [`blur` event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event) if you only care about getting a value, no matter if it was typed or chosen via the calendar. Note that the `blur` event might not fire if the user types and submits the form without leaving the input field. If you use the `blur` event to update JavaScript state you should read the value from the datepicker in your `submit` handler as well.
 ## Accessibility
+Datepicker renders a labeled date input with a button that opens a calendar dialog. The calendar uses a grid of dates and moves focus into the calendar when it opens.
+### Provide A Label
+Always provide a visible label.
+```html
+<w-datepicker label="Departure date" name="departure"></w-datepicker>
+```
+The label should describe the date being requested. Avoid generic labels such as "Date" when there are several date fields on the same page.
+### Calendar Dialog
+The calendar popup is rendered as a dialog with `aria-modal="true"`. The month heading is announced with `aria-live="polite"` when users move between months.
+Each date in the calendar grid has an accessible name formatted using `day-format`.
+```html
+<w-datepicker label="Date" name="date" day-format="PPPP"></w-datepicker>
+```
+Use a descriptive `day-format` so screen reader users hear the full date, not only the day number.
+See [the Date FNS docs](https://date-fns.org/v4.1.0/docs/format) for formatting options.
 ## Examples
+### Basic
+<elements-example>
+```html
+<w-datepicker label="Date" name="date"></w-datepicker>
+```
+</elements-example>
+### With Value
+<elements-example>
+```html
+<w-datepicker label="Start date" name="start-date" value="2026-06-15"></w-datepicker>
+```
+</elements-example>
+### Locale
+<elements-example>
+```html
+<w-datepicker label="Dato" name="date" lang="nb"></w-datepicker>
+```
+</elements-example>
+### Custom Formats
+<elements-example>
+```html
+<w-datepicker
+  label="Date"
+  name="date"
+  header-format="MMMM yyyy"
+  weekday-format="EEEEEE"
+  day-format="PPPP"
+></w-datepicker>
+```
+</elements-example>
+### Form Associated
+<elements-example>
+```html
+<form>
+  <w-datepicker label="Departure date" name="departure"></w-datepicker>
+  <w-button type="submit">Search</w-button>
+</form>
+```
+</elements-example>
+### Disabled Calendar Dates
+<elements-example>
+```html
+<w-datepicker id="booking-date" label="Booking date" name="booking-date"></w-datepicker>
+<script type="module">
+  const datepicker = document.querySelector('#booking-date');
+  datepicker.isDayDisabled = (day) => day.getDay() === 0;
+</script>
+```
+</elements-example>
+## Styling API
 ## `<w-datepicker>` API
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
@@ -23,15 +207,15 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | Name | Type | Default | Summary |
 |-|-|-|-|
 | calendar (JS only) | `HTMLDivElement` | `-` | - |
-| day-format | `string` | `'PPPP'` | Decides the format of the day in the calendar as read to screen readers. |
-| header-format | `string` | `'MMMM yyyy'` | Decides the format of the date as shown in the calendar header. |
+| day-format | `string` | `'PPPP'` | The date format used for calendar day accessible names. |
+| header-format | `string` | `'MMMM yyyy'` | The date format used in the calendar header. |
 | input (JS only) | `HTMLInputElement` | `-` | - |
 | isCalendarOpen (JS only) | `boolean` | `false` | - |
-| isDayDisabled (JS only) | `(day: Date) => boolean` | `-` | Lets you control if a date in the calendar should be disabled. |
-| label | `string` | `-` | - |
-| lang | `string` | `-` | Takes precedence over the `<html>` lang attribute. |
+| isDayDisabled (JS only) | `(day: Date) => boolean` | `-` | Function used to disable dates in the calendar. |
+| label | `string` | `-` | The label displayed above the date input. |
+| lang | `string` | `-` | The locale used for calendar labels and date formatting. |
 | month (JS only) | `unknown` | `-` | - |
-| name | `string` | `-` | - |
+| name | `string` | `-` | The name submitted with the date value. |
 | navigationDate (JS only) | `Date` | `-` | - |
 | previousMonthButton (JS only) | `HTMLButtonElement` | `-` | This is the first focusable element, needed for the modal focus trap. |
 | selectedCell (JS only) | `HTMLTableCellElement` | `-` | - |
@@ -39,8 +223,8 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | shadowRootOptions (JS only) | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
 | todayCell (JS only) | `HTMLTableCellElement` | `-` | - |
 | toggleButton (JS only) | `HTMLButtonElement` | `-` | - |
-| value | `string` | `-` | - |
-| weekday-format | `string` | `'EEEEEE'` | Decides the format of the weekday as shown above the grid of dates in the calendar. |
+| value | `string` | `-` | The selected date value. |
+| weekday-format | `string` | `'EEEEEE'` | The weekday format shown above the calendar grid. |
 | weeks (JS only) | `unknown` | `-` | - |
 | wrapper (JS only) | `HTMLDivElement` | `-` | - |
@@ -55,7 +239,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 #### day-format
-Decides the format of the day in the calendar as read to screen readers.
+The date format used for calendar day accessible names.
 The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
@@ -64,7 +248,7 @@ The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/form
 #### header-format
-Decides the format of the date as shown in the calendar header.
+The date format used in the calendar header.
 The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
@@ -87,23 +271,27 @@ The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/form
 #### isDayDisabled (JS only)
-Lets you control if a date in the calendar should be disabled.
+Function used to disable dates in the calendar.
-This needs to be set on the element instance in JavaScript, not as an HTML attribute.
+Set this on the element instance in JavaScript, not as an HTML attribute. Disabled dates cannot be selected from the calendar.
 - Type: `(day: Date) => boolean`
 - Default: `-`
 #### label
+The label displayed above the date input.
+Use this to give the datepicker a visible and accessible name.
 - Type: `string`
 - Default: `-`
 #### lang
-Takes precedence over the `<html>` lang attribute.
+The locale used for calendar labels and date formatting.
+This takes precedence over the `<html>` `lang` attribute. Supported built-in locales are `en`, `nb`, `sv`, `da`, and `fi`.
 - Type: `string`
 - Default: `-`
@@ -117,7 +305,9 @@ Takes precedence over the `<html>` lang attribute.
 #### name
+The name submitted with the date value.
+Use this when the datepicker belongs to a form and its value should be included in form data.
 - Type: `string`
 - Default: `-`
@@ -177,14 +367,16 @@ the query will point to an element that doesn't exist anymore.
 #### value
+The selected date value.
+Use an ISO date string in `YYYY-MM-DD` format. The value is submitted with the form and is reset to its initial value when the form resets.
 - Type: `string`
 - Default: `-`
 #### weekday-format
-Decides the format of the weekday as shown above the grid of dates in the calendar.
+The weekday format shown above the calendar grid.
 The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).

package/dist/docs/datepicker/examples.md CHANGED Viewed

@@ -1 +1,76 @@
 ## Examples
+### Basic
+<elements-example>
+```html
+<w-datepicker label="Date" name="date"></w-datepicker>
+```
+</elements-example>
+### With Value
+<elements-example>
+```html
+<w-datepicker label="Start date" name="start-date" value="2026-06-15"></w-datepicker>
+```
+</elements-example>
+### Locale
+<elements-example>
+```html
+<w-datepicker label="Dato" name="date" lang="nb"></w-datepicker>
+```
+</elements-example>
+### Custom Formats
+<elements-example>
+```html
+<w-datepicker
+  label="Date"
+  name="date"
+  header-format="MMMM yyyy"
+  weekday-format="EEEEEE"
+  day-format="PPPP"
+></w-datepicker>
+```
+</elements-example>
+### Form Associated
+<elements-example>
+```html
+<form>
+  <w-datepicker label="Departure date" name="departure"></w-datepicker>
+  <w-button type="submit">Search</w-button>
+</form>
+```
+</elements-example>
+### Disabled Calendar Dates
+<elements-example>
+```html
+<w-datepicker id="booking-date" label="Booking date" name="booking-date"></w-datepicker>
+<script type="module">
+  const datepicker = document.querySelector('#booking-date');
+  datepicker.isDayDisabled = (day) => day.getDay() === 0;
+</script>
+```
+</elements-example>

package/dist/docs/datepicker/styling.md ADDED Viewed

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

package/dist/docs/datepicker/usage.md CHANGED Viewed

@@ -1 +1,85 @@
 ## Usage
+Datepicker lets users type or choose a calendar date.
+Use `w-datepicker` when the user needs to provide one specific date, such as a travel date, appointment date, or deadline. The component is form-associated and submits an ISO date value.
+### Basic Datepicker
+```html
+<w-datepicker label="Date" name="date"></w-datepicker>
+```
+Always provide a visible `label`.
+### Value
+Use `value` to set the selected date. The value should use `YYYY-MM-DD` format.
+```html
+<w-datepicker label="Start date" name="start-date" value="2026-06-15"></w-datepicker>
+```
+The same value is submitted with the form.
+```html
+<form>
+  <w-datepicker label="Departure date" name="departure"></w-datepicker>
+  <w-button type="submit">Search</w-button>
+</form>
+```
+### Locale
+Datepicker uses the `lang` attribute on the component, or the `lang` attribute on `<html>`, to choose locale-specific calendar labels and formatting.
+```html
+<w-datepicker label="Dato" name="date" lang="nb"></w-datepicker>
+```
+The component includes built-in locale support for `en`, `nb`, `sv`, `da`, and `fi`.
+### Formatting
+Use `header-format`, `weekday-format`, and `day-format` to control calendar display and accessible day labels.
+```html
+<w-datepicker
+  label="Date"
+  name="date"
+  header-format="MMMM yyyy"
+  weekday-format="EEEEEE"
+  day-format="PPPP"
+></w-datepicker>
+```
+These formats use `date-fns/format` syntax. Keep `day-format` descriptive because it is used as the accessible name for each day in the calendar.
+### Disable Dates
+Use `isDayDisabled` to prevent users from selecting certain dates from the calendar.
+This property must be set on the element instance in JavaScript.
+```html
+<w-datepicker id="booking-date" label="Booking date" name="booking-date"></w-datepicker>
+<script type="module">
+  const datepicker = document.querySelector('#booking-date');
+  datepicker.isDayDisabled = (day) => day.getDay() === 0;
+</script>
+```
+Disabled dates cannot be selected from the calendar.
+### About change events
+With events the datepicker works much like the native `<input type="date">`:
+- When the user types in the input field the component fires [`input` events](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).
+- When the user clicks a date in the calendar the component fires [`change` events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).
+Note that the component does not fire a `change` event when typing in the input field. This is intentional.
+You can listen to the [`blur` event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event) if you only care about getting a value, no matter if it was typed or chosen via the calendar. Note that the `blur` event might not fire if the user types and submits the form without leaving the input field. If you use the `blur` event to update JavaScript state you should read the value from the datepicker in your `submit` handler as well.

package/dist/docs/expandable/api.md CHANGED Viewed

@@ -6,57 +6,43 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | 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` | `-` | - |
+| 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
-#### _hasTitle
-- Type: `boolean`
-- Default: `true`
-#### _showChevronUp
-- Type: `boolean`
-- Default: `false`
 #### 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`
@@ -64,6 +50,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`
@@ -71,28 +59,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/examples.md CHANGED Viewed

@@ -1 +1,55 @@
 ## Examples
+<elements-example>
+```html
+<w-expandable title="I'm expandable" animated>
+  <p>with expanded content</p>
+</w-expandable>
+```
+</elements-example>
+### Expandable box
+<elements-example>
+```html
+<w-expandable title="I'm expandable" animated box>
+  <p>with expanded content</p>
+</w-expandable>
+```
+</elements-example>
+### Expandable box with custom title
+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>
+```
+</elements-example>
+### 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>