@warp-ds/elements 2.10.0-next.3 → 2.10.0-next.5

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 (159) hide show
  1. package/dist/custom-elements.json +77 -14
  2. package/dist/docs/affix/affix.md +2 -0
  3. package/dist/docs/affix/styling.md +1 -0
  4. package/dist/docs/alert/alert.md +2 -0
  5. package/dist/docs/alert/styling.md +1 -0
  6. package/dist/docs/attention/attention.md +2 -0
  7. package/dist/docs/attention/styling.md +1 -0
  8. package/dist/docs/badge/badge.md +2 -0
  9. package/dist/docs/badge/styling.md +1 -0
  10. package/dist/docs/box/box.md +22 -38
  11. package/dist/docs/box/examples.md +20 -38
  12. package/dist/docs/box/styling.md +1 -0
  13. package/dist/docs/breadcrumbs/breadcrumbs.md +8 -0
  14. package/dist/docs/breadcrumbs/examples.md +7 -1
  15. package/dist/docs/breadcrumbs/styling.md +1 -0
  16. package/dist/docs/button/button.md +73 -0
  17. package/dist/docs/button/styling.md +72 -0
  18. package/dist/docs/card/card.md +2 -0
  19. package/dist/docs/card/styling.md +1 -0
  20. package/dist/docs/checkbox/api.md +128 -0
  21. package/dist/docs/checkbox/checkbox.md +134 -0
  22. package/dist/docs/checkbox-group/accessibility.md +71 -0
  23. package/dist/docs/checkbox-group/api.md +79 -0
  24. package/dist/docs/checkbox-group/checkbox-group.md +492 -0
  25. package/dist/docs/checkbox-group/examples.md +105 -0
  26. package/dist/docs/checkbox-group/styling.md +132 -0
  27. package/dist/docs/checkbox-group/usage.md +95 -0
  28. package/dist/docs/combobox/combobox.md +2 -0
  29. package/dist/docs/combobox/styling.md +1 -0
  30. package/dist/docs/datepicker/accessibility.md +25 -0
  31. package/dist/docs/datepicker/api.md +22 -14
  32. package/dist/docs/datepicker/datepicker.md +208 -14
  33. package/dist/docs/datepicker/examples.md +75 -0
  34. package/dist/docs/datepicker/styling.md +1 -0
  35. package/dist/docs/datepicker/usage.md +84 -0
  36. package/dist/docs/expandable/api.md +20 -32
  37. package/dist/docs/expandable/examples.md +54 -0
  38. package/dist/docs/expandable/expandable.md +74 -32
  39. package/dist/docs/expandable/styling.md +1 -0
  40. package/dist/docs/icon/icon.md +2 -0
  41. package/dist/docs/icon/styling.md +1 -0
  42. package/dist/docs/link/link.md +2 -0
  43. package/dist/docs/link/styling.md +1 -0
  44. package/dist/docs/modal/modal.md +2 -0
  45. package/dist/docs/modal/styling.md +1 -0
  46. package/dist/docs/modal-footer/modal-footer.md +0 -6
  47. package/dist/docs/modal-header/modal-header.md +0 -6
  48. package/dist/docs/page-indicator/page-indicator.md +2 -0
  49. package/dist/docs/page-indicator/styling.md +1 -0
  50. package/dist/docs/pagination/pagination.md +2 -0
  51. package/dist/docs/pagination/styling.md +1 -0
  52. package/dist/docs/pill/pill.md +2 -0
  53. package/dist/docs/pill/styling.md +1 -0
  54. package/dist/docs/radio/radio.md +0 -6
  55. package/dist/docs/select/select.md +2 -0
  56. package/dist/docs/select/styling.md +1 -0
  57. package/dist/docs/slider/slider.md +2 -0
  58. package/dist/docs/slider/styling.md +1 -0
  59. package/dist/docs/slider-thumb/slider-thumb.md +2 -0
  60. package/dist/docs/slider-thumb/styling.md +1 -0
  61. package/dist/docs/step-indicator/step-indicator.md +2 -0
  62. package/dist/docs/step-indicator/styling.md +1 -0
  63. package/dist/docs/switch/styling.md +1 -0
  64. package/dist/docs/switch/switch.md +2 -0
  65. package/dist/docs/tabs/styling.md +1 -0
  66. package/dist/docs/tabs/tabs.md +2 -0
  67. package/dist/docs/textarea/styling.md +1 -0
  68. package/dist/docs/textarea/textarea.md +2 -0
  69. package/dist/docs/textfield/styling.md +1 -0
  70. package/dist/docs/textfield/textfield.md +2 -0
  71. package/dist/index.d.ts +164 -128
  72. package/dist/packages/affix/affix.hydration.test.js +1 -1
  73. package/dist/packages/alert/alert.hydration.test.js +1 -1
  74. package/dist/packages/attention/attention.hydration.test.js +1 -1
  75. package/dist/packages/attention/attention.js +397 -446
  76. package/dist/packages/attention/attention.js.map +4 -4
  77. package/dist/packages/badge/badge.hydration.test.js +1 -1
  78. package/dist/packages/box/box.hydration.test.js +1 -1
  79. package/dist/packages/breadcrumbs/breadcrumbs.hydration.test.js +3 -2
  80. package/dist/packages/button/button.hydration.test.js +1 -1
  81. package/dist/packages/button/button.js +387 -436
  82. package/dist/packages/button/button.js.map +4 -4
  83. package/dist/packages/button/button.stories.d.ts +29 -0
  84. package/dist/packages/button/button.stories.js +176 -2
  85. package/dist/packages/button/styles.d.ts +22 -1
  86. package/dist/packages/button/styles.js +390 -1
  87. package/dist/packages/card/card.hydration.test.js +1 -1
  88. package/dist/packages/checkbox/checkbox.d.ts +5 -3
  89. package/dist/packages/checkbox/checkbox.hydration.test.js +1 -1
  90. package/dist/packages/checkbox/checkbox.js +2 -2
  91. package/dist/packages/checkbox/checkbox.js.map +3 -3
  92. package/dist/packages/checkbox/checkbox.react.stories.d.ts +1 -1
  93. package/dist/packages/checkbox/checkbox.stories.d.ts +2 -2
  94. package/dist/packages/checkbox/react.d.ts +2 -2
  95. package/dist/packages/checkbox-group/checkbox-group.d.ts +5 -3
  96. package/dist/packages/checkbox-group/checkbox-group.hydration.test.js +1 -1
  97. package/dist/packages/checkbox-group/checkbox-group.js +6 -6
  98. package/dist/packages/checkbox-group/checkbox-group.js.map +3 -3
  99. package/dist/packages/checkbox-group/react.d.ts +3 -3
  100. package/dist/packages/datepicker/datepicker.d.ts +22 -30
  101. package/dist/packages/datepicker/datepicker.hydration.test.js +1 -1
  102. package/dist/packages/datepicker/datepicker.js.map +2 -2
  103. package/dist/packages/expandable/expandable.d.ts +11 -32
  104. package/dist/packages/expandable/expandable.hydration.test.js +1 -1
  105. package/dist/packages/expandable/expandable.js.map +2 -2
  106. package/dist/packages/expandable/expandable.react.stories.d.ts +2 -2
  107. package/dist/packages/expandable/react.d.ts +1 -1
  108. package/dist/packages/icon/icon.hydration.test.js +1 -1
  109. package/dist/packages/link/link.hydration.test.js +1 -1
  110. package/dist/packages/link/link.js +420 -190
  111. package/dist/packages/link/link.js.map +4 -4
  112. package/dist/packages/link/styles.d.ts +5 -0
  113. package/dist/packages/link/styles.js +80 -0
  114. package/dist/packages/modal/modal.d.ts +1 -0
  115. package/dist/packages/modal/modal.hydration.test.js +1 -1
  116. package/dist/packages/modal/modal.js +4 -4
  117. package/dist/packages/modal/modal.js.map +2 -2
  118. package/dist/packages/page-indicator/page-indicator.hydration.test.js +1 -1
  119. package/dist/packages/pagination/pagination.hydration.test.js +1 -1
  120. package/dist/packages/pill/pill.hydration.test.js +1 -1
  121. package/dist/packages/radio/radio.hydration.test.js +1 -1
  122. package/dist/packages/radio/radio.js.map +1 -1
  123. package/dist/packages/radio-group/radio-group.a11y.test.js +6 -2
  124. package/dist/packages/radio-group/radio-group.hydration.test.js +6 -2
  125. package/dist/packages/radio-group/radio-group.js +2 -2
  126. package/dist/packages/radio-group/radio-group.js.map +4 -4
  127. package/dist/packages/select/select.a11y.test.js +6 -2
  128. package/dist/packages/select/select.hydration.test.js +1 -1
  129. package/dist/packages/select/select.test.js +4 -2
  130. package/dist/packages/slider/slider.hydration.test.js +7 -2
  131. package/dist/packages/slider/slider.js.map +1 -1
  132. package/dist/packages/slider/slider.react.stories.js +2 -2
  133. package/dist/packages/slider-thumb/slider-thumb.hydration.test.js +1 -1
  134. package/dist/packages/step/step.hydration.test.js +1 -1
  135. package/dist/packages/step-indicator/step-indicator.hydration.test.js +1 -1
  136. package/dist/packages/switch/switch.hydration.test.js +1 -1
  137. package/dist/packages/tab/tab.hydration.test.js +1 -1
  138. package/dist/packages/tab-panel/tab-panel.hydration.test.js +1 -1
  139. package/dist/packages/tabs/tabs.a11y.test.js +1 -1
  140. package/dist/packages/tabs/tabs.hydration.test.js +1 -1
  141. package/dist/packages/tabs/tabs.test.js +3 -3
  142. package/dist/packages/textarea/textarea.hydration.test.js +1 -1
  143. package/dist/packages/textfield/textfield.hydration.test.js +1 -1
  144. package/dist/web-types.json +91 -28
  145. package/eik/index.js +115 -0
  146. package/package.json +7 -4
  147. package/dist/docs/modal-footer/accessibility.md +0 -1
  148. package/dist/docs/modal-footer/examples.md +0 -1
  149. package/dist/docs/modal-footer/usage.md +0 -1
  150. package/dist/docs/modal-header/accessibility.md +0 -1
  151. package/dist/docs/modal-header/examples.md +0 -1
  152. package/dist/docs/modal-header/usage.md +0 -1
  153. package/dist/docs/radio/accessibility.md +0 -1
  154. package/dist/docs/radio/examples.md +0 -1
  155. package/dist/docs/radio/usage.md +0 -1
  156. package/dist/packages/button/styles/w-button.styles.d.ts +0 -1
  157. package/dist/packages/button/styles/w-button.styles.js +0 -282
  158. package/dist/packages/link/styles/w-link.styles.d.ts +0 -1
  159. package/dist/packages/link/styles/w-link.styles.js +0 -213
package/dist/docs/datepicker/examples.md CHANGED
@@ -1 +1,76 @@
1
1
  ## Examples
2
+
3
+ ### Basic
4
+
5
+ <elements-example>
6
+
7
+ ```html
8
+ <w-datepicker label="Date" name="date"></w-datepicker>
9
+ ```
10
+
11
+ </elements-example>
12
+
13
+ ### With Value
14
+
15
+ <elements-example>
16
+
17
+ ```html
18
+ <w-datepicker label="Start date" name="start-date" value="2026-06-15"></w-datepicker>
19
+ ```
20
+
21
+ </elements-example>
22
+
23
+ ### Locale
24
+
25
+ <elements-example>
26
+
27
+ ```html
28
+ <w-datepicker label="Dato" name="date" lang="nb"></w-datepicker>
29
+ ```
30
+
31
+ </elements-example>
32
+
33
+ ### Custom Formats
34
+
35
+ <elements-example>
36
+
37
+ ```html
38
+ <w-datepicker
39
+ label="Date"
40
+ name="date"
41
+ header-format="MMMM yyyy"
42
+ weekday-format="EEEEEE"
43
+ day-format="PPPP"
44
+ ></w-datepicker>
45
+ ```
46
+
47
+ </elements-example>
48
+
49
+ ### Form Associated
50
+
51
+ <elements-example>
52
+
53
+ ```html
54
+ <form>
55
+ <w-datepicker label="Departure date" name="departure"></w-datepicker>
56
+ <w-button type="submit">Search</w-button>
57
+ </form>
58
+ ```
59
+
60
+ </elements-example>
61
+
62
+ ### Disabled Calendar Dates
63
+
64
+ <elements-example>
65
+
66
+ ```html
67
+ <w-datepicker id="booking-date" label="Booking date" name="booking-date"></w-datepicker>
68
+
69
+ <script type="module">
70
+ const datepicker = document.querySelector('#booking-date');
71
+
72
+ datepicker.isDayDisabled = (day) => day.getDay() === 0;
73
+ </script>
74
+ ```
75
+
76
+ </elements-example>
package/dist/docs/datepicker/styling.md ADDED
@@ -0,0 +1 @@
1
+ ## Styling API
package/dist/docs/datepicker/usage.md CHANGED
@@ -1 +1,85 @@
1
1
  ## Usage
2
+
3
+ Datepicker lets users type or choose a calendar date.
4
+
5
+ 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.
6
+
7
+ ### Basic Datepicker
8
+
9
+ ```html
10
+ <w-datepicker label="Date" name="date"></w-datepicker>
11
+ ```
12
+
13
+ Always provide a visible `label`.
14
+
15
+ ### Value
16
+
17
+ Use `value` to set the selected date. The value should use `YYYY-MM-DD` format.
18
+
19
+ ```html
20
+ <w-datepicker label="Start date" name="start-date" value="2026-06-15"></w-datepicker>
21
+ ```
22
+
23
+ The same value is submitted with the form.
24
+
25
+ ```html
26
+ <form>
27
+ <w-datepicker label="Departure date" name="departure"></w-datepicker>
28
+ <w-button type="submit">Search</w-button>
29
+ </form>
30
+ ```
31
+
32
+ ### Locale
33
+
34
+ Datepicker uses the `lang` attribute on the component, or the `lang` attribute on `<html>`, to choose locale-specific calendar labels and formatting.
35
+
36
+ ```html
37
+ <w-datepicker label="Dato" name="date" lang="nb"></w-datepicker>
38
+ ```
39
+
40
+ The component includes built-in locale support for `en`, `nb`, `sv`, `da`, and `fi`.
41
+
42
+ ### Formatting
43
+
44
+ Use `header-format`, `weekday-format`, and `day-format` to control calendar display and accessible day labels.
45
+
46
+ ```html
47
+ <w-datepicker
48
+ label="Date"
49
+ name="date"
50
+ header-format="MMMM yyyy"
51
+ weekday-format="EEEEEE"
52
+ day-format="PPPP"
53
+ ></w-datepicker>
54
+ ```
55
+
56
+ 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.
57
+
58
+ ### Disable Dates
59
+
60
+ Use `isDayDisabled` to prevent users from selecting certain dates from the calendar.
61
+
62
+ This property must be set on the element instance in JavaScript.
63
+
64
+ ```html
65
+ <w-datepicker id="booking-date" label="Booking date" name="booking-date"></w-datepicker>
66
+
67
+ <script type="module">
68
+ const datepicker = document.querySelector('#booking-date');
69
+
70
+ datepicker.isDayDisabled = (day) => day.getDay() === 0;
71
+ </script>
72
+ ```
73
+
74
+ Disabled dates cannot be selected from the calendar.
75
+
76
+ ### About change events
77
+
78
+ With events the datepicker works much like the native `<input type="date">`:
79
+
80
+ - 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).
81
+ - 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).
82
+
83
+ Note that the component does not fire a `change` event when typing in the input field. This is intentional.
84
+
85
+ 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
@@ -6,57 +6,43 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
6
6
 
7
7
  | Name | Type | Default | Summary |
8
8
  |-|-|-|-|
9
- | _hasTitle | `boolean` | `true` | - |
10
- | _showChevronUp | `boolean` | `false` | - |
11
- | animated | `boolean` | `false` | - |
12
- | bleed | `boolean` | `false` | - |
13
- | box | `boolean` | `false` | - |
14
- | button-class | `string` | `-` | - |
15
- | content-class | `string` | `-` | - |
16
- | expanded | `boolean` | `false` | - |
17
- | heading-level | `number` | `-` | - |
18
- | no-chevron | `boolean` | `false` | - |
19
- | title | `string` | `-` | - |
9
+ | animated | `boolean` | `false` | Will animate the expansion/collapse |
10
+ | bleed | `boolean` | `false` | Will make the expandable full-width on the sm breakpoint size |
11
+ | box | `boolean` | `false` | Will make the expandable a Box |
12
+ | button-class | `string` | `-` | **Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. |
13
+ | content-class | `string` | `-` | **Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. |
14
+ | expanded | `boolean` | `false` | Controls component's expanded state |
15
+ | 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. |
16
+ | no-chevron | `boolean` | `false` | Controls chevron visibility |
17
+ | title | `string` | `-` | Component title. Used to display the title value which is always present regardless of whether the component is open or closed. |
20
18
 
21
19
  ### Property Details
22
20
 
23
- #### _hasTitle
24
-
25
-
26
-
27
- - Type: `boolean`
28
- - Default: `true`
29
-
30
- #### _showChevronUp
31
-
32
-
33
-
34
- - Type: `boolean`
35
- - Default: `false`
36
-
37
21
  #### animated
38
22
 
39
-
23
+ Will animate the expansion/collapse
40
24
 
41
25
  - Type: `boolean`
42
26
  - Default: `false`
43
27
 
44
28
  #### bleed
45
29
 
46
-
30
+ Will make the expandable full-width on the sm breakpoint size
47
31
 
48
32
  - Type: `boolean`
49
33
  - Default: `false`
50
34
 
51
35
  #### box
52
36
 
53
-
37
+ Will make the expandable a Box
54
38
 
55
39
  - Type: `boolean`
56
40
  - Default: `false`
57
41
 
58
42
  #### button-class
59
43
 
44
+ **Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.
45
+
60
46
 
61
47
 
62
48
  - Type: `string`
@@ -64,6 +50,8 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
64
50
 
65
51
  #### content-class
66
52
 
53
+ **Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.
54
+
67
55
 
68
56
 
69
57
  - Type: `string`
@@ -71,28 +59,28 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
71
59
 
72
60
  #### expanded
73
61
 
74
-
62
+ Controls component's expanded state
75
63
 
76
64
  - Type: `boolean`
77
65
  - Default: `false`
78
66
 
79
67
  #### heading-level
80
68
 
81
-
69
+ 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.
82
70
 
83
71
  - Type: `number`
84
72
  - Default: `-`
85
73
 
86
74
  #### no-chevron
87
75
 
88
-
76
+ Controls chevron visibility
89
77
 
90
78
  - Type: `boolean`
91
79
  - Default: `false`
92
80
 
93
81
  #### title
94
82
 
95
-
83
+ Component title. Used to display the title value which is always present regardless of whether the component is open or closed.
96
84
 
97
85
  - Type: `string`
98
86
  - Default: `-`
package/dist/docs/expandable/examples.md CHANGED
@@ -1 +1,55 @@
1
1
  ## Examples
2
+
3
+ <elements-example>
4
+
5
+ ```html
6
+ <w-expandable title="I'm expandable" animated>
7
+ <p>with expanded content</p>
8
+ </w-expandable>
9
+ ```
10
+
11
+ </elements-example>
12
+
13
+ ### Expandable box
14
+
15
+ <elements-example>
16
+
17
+ ```html
18
+ <w-expandable title="I'm expandable" animated box>
19
+ <p>with expanded content</p>
20
+ </w-expandable>
21
+ ```
22
+
23
+ </elements-example>
24
+
25
+
26
+ ### Expandable box with custom title
27
+
28
+ This can be used if more control over styling is needed than the `title` prop allows
29
+
30
+ <elements-example>
31
+
32
+ ```html
33
+ <w-expandable animated box>
34
+ <div slot="title" class="flex flex-row items-center">
35
+ <w-icon-bag-16></w-icon-bag-16>
36
+ <p class="ml-8 mb-0">This is a title with an icon</p>
37
+ </div>
38
+ <p>with expanded content</p>
39
+ </w-expandable>
40
+ ```
41
+
42
+ </elements-example>
43
+
44
+
45
+ ### With expanded prop
46
+
47
+ <elements-example>
48
+
49
+ ```html
50
+ <w-expandable animated box title="I'm expanded by default" expanded>
51
+ <p>content should be visible</p>
52
+ </w-expandable>
53
+ ```
54
+
55
+ </elements-example>
package/dist/docs/expandable/expandable.md CHANGED
@@ -4,73 +4,113 @@
4
4
 
5
5
  Expandable is a layout component used for creating expandable content areas on a page.
6
6
 
7
- [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-expandable--docs)
8
-
9
7
  ## Usage
10
8
 
11
9
  ## Accessibility
12
10
 
13
11
  ## Examples
14
12
 
15
- ## `<w-expandable>` API
13
+ <elements-example>
16
14
 
17
- Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
15
+ ```html
16
+ <w-expandable title="I'm expandable" animated>
17
+ <p>with expanded content</p>
18
+ </w-expandable>
19
+ ```
18
20
 
19
- ### Properties
21
+ </elements-example>
20
22
 
21
- | Name | Type | Default | Summary |
22
- |-|-|-|-|
23
- | _hasTitle | `boolean` | `true` | - |
24
- | _showChevronUp | `boolean` | `false` | - |
25
- | animated | `boolean` | `false` | - |
26
- | bleed | `boolean` | `false` | - |
27
- | box | `boolean` | `false` | - |
28
- | button-class | `string` | `-` | - |
29
- | content-class | `string` | `-` | - |
30
- | expanded | `boolean` | `false` | - |
31
- | heading-level | `number` | `-` | - |
32
- | no-chevron | `boolean` | `false` | - |
33
- | title | `string` | `-` | - |
23
+ ### Expandable box
34
24
 
35
- ### Property Details
25
+ <elements-example>
36
26
 
37
- #### _hasTitle
27
+ ```html
28
+ <w-expandable title="I'm expandable" animated box>
29
+ <p>with expanded content</p>
30
+ </w-expandable>
31
+ ```
38
32
 
33
+ </elements-example>
39
34
 
40
35
 
41
- - Type: `boolean`
42
- - Default: `true`
36
+ ### Expandable box with custom title
43
37
 
44
- #### _showChevronUp
38
+ This can be used if more control over styling is needed than the `title` prop allows
45
39
 
40
+ <elements-example>
46
41
 
42
+ ```html
43
+ <w-expandable animated box>
44
+ <div slot="title" class="flex flex-row items-center">
45
+ <w-icon-bag-16></w-icon-bag-16>
46
+ <p class="ml-8 mb-0">This is a title with an icon</p>
47
+ </div>
48
+ <p>with expanded content</p>
49
+ </w-expandable>
50
+ ```
47
51
 
48
- - Type: `boolean`
49
- - Default: `false`
52
+ </elements-example>
50
53
 
51
- #### animated
52
54
 
55
+ ### With expanded prop
56
+
57
+ <elements-example>
58
+
59
+ ```html
60
+ <w-expandable animated box title="I'm expanded by default" expanded>
61
+ <p>content should be visible</p>
62
+ </w-expandable>
63
+ ```
64
+
65
+ </elements-example>
66
+
67
+ ## Styling API
68
+
69
+ ## `<w-expandable>` API
70
+
71
+ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
72
+
73
+ ### Properties
74
+
75
+ | Name | Type | Default | Summary |
76
+ |-|-|-|-|
77
+ | animated | `boolean` | `false` | Will animate the expansion/collapse |
78
+ | bleed | `boolean` | `false` | Will make the expandable full-width on the sm breakpoint size |
79
+ | box | `boolean` | `false` | Will make the expandable a Box |
80
+ | button-class | `string` | `-` | **Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. |
81
+ | content-class | `string` | `-` | **Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. |
82
+ | expanded | `boolean` | `false` | Controls component's expanded state |
83
+ | 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. |
84
+ | no-chevron | `boolean` | `false` | Controls chevron visibility |
85
+ | title | `string` | `-` | Component title. Used to display the title value which is always present regardless of whether the component is open or closed. |
86
+
87
+ ### Property Details
88
+
89
+ #### animated
53
90
 
91
+ Will animate the expansion/collapse
54
92
 
55
93
  - Type: `boolean`
56
94
  - Default: `false`
57
95
 
58
96
  #### bleed
59
97
 
60
-
98
+ Will make the expandable full-width on the sm breakpoint size
61
99
 
62
100
  - Type: `boolean`
63
101
  - Default: `false`
64
102
 
65
103
  #### box
66
104
 
67
-
105
+ Will make the expandable a Box
68
106
 
69
107
  - Type: `boolean`
70
108
  - Default: `false`
71
109
 
72
110
  #### button-class
73
111
 
112
+ **Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.
113
+
74
114
 
75
115
 
76
116
  - Type: `string`
@@ -78,6 +118,8 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
78
118
 
79
119
  #### content-class
80
120
 
121
+ **Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.
122
+
81
123
 
82
124
 
83
125
  - Type: `string`
@@ -85,28 +127,28 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
85
127
 
86
128
  #### expanded
87
129
 
88
-
130
+ Controls component's expanded state
89
131
 
90
132
  - Type: `boolean`
91
133
  - Default: `false`
92
134
 
93
135
  #### heading-level
94
136
 
95
-
137
+ 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.
96
138
 
97
139
  - Type: `number`
98
140
  - Default: `-`
99
141
 
100
142
  #### no-chevron
101
143
 
102
-
144
+ Controls chevron visibility
103
145
 
104
146
  - Type: `boolean`
105
147
  - Default: `false`
106
148
 
107
149
  #### title
108
150
 
109
-
151
+ Component title. Used to display the title value which is always present regardless of whether the component is open or closed.
110
152
 
111
153
  - Type: `string`
112
154
  - Default: `-`
package/dist/docs/expandable/styling.md ADDED
@@ -0,0 +1 @@
1
+ ## Styling API
package/dist/docs/icon/icon.md CHANGED
@@ -68,6 +68,8 @@ You can set a pixel size as well if none of the presets fit your needs.
68
68
 
69
69
  </elements-example>
70
70
 
71
+ ## Styling API
72
+
71
73
  ## `<w-icon>` API
72
74
 
73
75
  Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
package/dist/docs/icon/styling.md ADDED
@@ -0,0 +1 @@
1
+ ## Styling API
package/dist/docs/link/link.md CHANGED
@@ -105,6 +105,8 @@ All variants can be small.
105
105
 
106
106
  </elements-example>
107
107
 
108
+ ## Styling API
109
+
108
110
  ## `<w-link>` API
109
111
 
110
112
  Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
package/dist/docs/link/styling.md ADDED
@@ -0,0 +1 @@
1
+ ## Styling API
package/dist/docs/modal/modal.md CHANGED
@@ -185,6 +185,8 @@ modal.addEventListener('command', function (event: CommandEvent) {
185
185
 
186
186
  </elements-example>
187
187
 
188
+ ## Styling API
189
+
188
190
  ## `<w-modal>` API
189
191
 
190
192
  Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
package/dist/docs/modal/styling.md ADDED
@@ -0,0 +1 @@
1
+ ## Styling API
package/dist/docs/modal-footer/modal-footer.md CHANGED
@@ -4,12 +4,6 @@
4
4
 
5
5
  The footer section of a modal, typically where you place actions.
6
6
 
7
- ## Usage
8
-
9
- ## Accessibility
10
-
11
- ## Examples
12
-
13
7
  ### `<w-modal-footer>` API
14
8
 
15
9
  #### Properties
package/dist/docs/modal-header/modal-header.md CHANGED
@@ -4,12 +4,6 @@
4
4
 
5
5
  The header section of a modal, typically where you place the title and a close button.
6
6
 
7
- ## Usage
8
-
9
- ## Accessibility
10
-
11
- ## Examples
12
-
13
7
  ### `<w-modal-header>` API
14
8
 
15
9
  #### Properties
package/dist/docs/page-indicator/page-indicator.md CHANGED
@@ -28,6 +28,8 @@ One dot is highlighted to indicate the currently selected page.
28
28
 
29
29
  </elements-example>
30
30
 
31
+ ## Styling API
32
+
31
33
  ## `<w-page-indicator>` API
32
34
 
33
35
  Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
package/dist/docs/page-indicator/styling.md ADDED
@@ -0,0 +1 @@
1
+ ## Styling API
package/dist/docs/pagination/pagination.md CHANGED
@@ -48,6 +48,8 @@ If you want to override this in your app and handle things like scroll and focus
48
48
  </script>
49
49
  ```
50
50
 
51
+ ## Styling API
52
+
51
53
  ## `<w-pagination>` API
52
54
 
53
55
  Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
package/dist/docs/pagination/styling.md ADDED
@@ -0,0 +1 @@
1
+ ## Styling API
package/dist/docs/pill/pill.md CHANGED
@@ -43,6 +43,8 @@ For example to dismiss or turn off parts of a filter.
43
43
 
44
44
  </elements-example>
45
45
 
46
+ ## Styling API
47
+
46
48
  ## `<w-pill>` API
47
49
 
48
50
  Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
package/dist/docs/pill/styling.md ADDED
@@ -0,0 +1 @@
1
+ ## Styling API
package/dist/docs/radio/radio.md CHANGED
@@ -4,12 +4,6 @@
4
4
 
5
5
 
6
6
 
7
- ## Usage
8
-
9
- ## Accessibility
10
-
11
- ## Examples
12
-
13
7
  ### `<w-radio>` API
14
8
 
15
9
  #### Properties
package/dist/docs/select/select.md CHANGED
@@ -158,6 +158,8 @@ The `readonly` boolean attribute makes the selection immutable. Unlike disabled
158
158
 
159
159
  </elements-example>
160
160
 
161
+ ## Styling API
162
+
161
163
  ## `<w-select>` API
162
164
 
163
165
  Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
package/dist/docs/select/styling.md ADDED
@@ -0,0 +1 @@
1
+ ## Styling API
package/dist/docs/slider/slider.md CHANGED
@@ -306,6 +306,8 @@ The text field doubles as a visualization of the exact value, which is difficult
306
306
 
307
307
  </elements-example>
308
308
 
309
+ ## Styling API
310
+
309
311
  ## `<w-slider>` API
310
312
 
311
313
  Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
package/dist/docs/slider/styling.md ADDED
@@ -0,0 +1 @@
1
+ ## Styling API
package/dist/docs/slider-thumb/slider-thumb.md CHANGED
@@ -10,6 +10,8 @@ Component to place inside a `<w-slider>`.
10
10
 
11
11
  ## Examples
12
12
 
13
+ ## Styling API
14
+
13
15
  ### `<w-slider-thumb>` API
14
16
 
15
17
  #### Properties
package/dist/docs/slider-thumb/styling.md ADDED
@@ -0,0 +1 @@
1
+ ## Styling API