@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/custom-elements.json CHANGED
@@ -2367,7 +2367,7 @@
2367
2367
  {
2368
2368
  "kind": "class",
2369
2369
  "description": "",
2370
- "name": "WCheckbox",
2370
+ "name": "WarpCheckbox",
2371
2371
  "members": [
2372
2372
  {
2373
2373
  "kind": "field",
@@ -2716,9 +2716,23 @@
2716
2716
  "customElement": true,
2717
2717
  "modulePath": "packages/checkbox/checkbox.ts",
2718
2718
  "definitionPath": "packages/checkbox/checkbox.ts"
2719
+ },
2720
+ {
2721
+ "kind": "variable",
2722
+ "name": "WCheckbox",
2723
+ "default": "WarpCheckbox",
2724
+ "deprecated": "Use WarpCheckbox"
2719
2725
  }
2720
2726
  ],
2721
2727
  "exports": [
2728
+ {
2729
+ "kind": "js",
2730
+ "name": "WarpCheckbox",
2731
+ "declaration": {
2732
+ "name": "WarpCheckbox",
2733
+ "module": "packages/checkbox/checkbox.ts"
2734
+ }
2735
+ },
2722
2736
  {
2723
2737
  "kind": "js",
2724
2738
  "name": "WCheckbox",
@@ -2731,7 +2745,7 @@
2731
2745
  "kind": "custom-element-definition",
2732
2746
  "name": "w-checkbox",
2733
2747
  "declaration": {
2734
- "name": "WCheckbox",
2748
+ "name": "WarpCheckbox",
2735
2749
  "module": "packages/checkbox/checkbox.ts"
2736
2750
  }
2737
2751
  }
@@ -2744,7 +2758,7 @@
2744
2758
  {
2745
2759
  "kind": "class",
2746
2760
  "description": "",
2747
- "name": "WCheckboxGroup",
2761
+ "name": "WarpCheckboxGroup",
2748
2762
  "members": [
2749
2763
  {
2750
2764
  "kind": "field",
@@ -3136,9 +3150,23 @@
3136
3150
  "customElement": true,
3137
3151
  "modulePath": "packages/checkbox-group/checkbox-group.ts",
3138
3152
  "definitionPath": "packages/checkbox-group/checkbox-group.ts"
3153
+ },
3154
+ {
3155
+ "kind": "variable",
3156
+ "name": "WCheckboxGroup",
3157
+ "default": "WarpCheckboxGroup",
3158
+ "deprecated": "Use WarpCheckboxGroup"
3139
3159
  }
3140
3160
  ],
3141
3161
  "exports": [
3162
+ {
3163
+ "kind": "js",
3164
+ "name": "WarpCheckboxGroup",
3165
+ "declaration": {
3166
+ "name": "WarpCheckboxGroup",
3167
+ "module": "packages/checkbox-group/checkbox-group.ts"
3168
+ }
3169
+ },
3142
3170
  {
3143
3171
  "kind": "js",
3144
3172
  "name": "WCheckboxGroup",
@@ -3151,7 +3179,7 @@
3151
3179
  "kind": "custom-element-definition",
3152
3180
  "name": "w-checkbox-group",
3153
3181
  "declaration": {
3154
- "name": "WCheckboxGroup",
3182
+ "name": "WarpCheckboxGroup",
3155
3183
  "module": "packages/checkbox-group/checkbox-group.ts"
3156
3184
  }
3157
3185
  }
@@ -3799,6 +3827,7 @@
3799
3827
  "type": {
3800
3828
  "text": "string"
3801
3829
  },
3830
+ "description": "The label displayed above the date input.\n\nUse this to give the datepicker a visible and accessible name.",
3802
3831
  "attribute": "label",
3803
3832
  "reflects": true
3804
3833
  },
@@ -3808,7 +3837,7 @@
3808
3837
  "type": {
3809
3838
  "text": "string"
3810
3839
  },
3811
- "description": "Takes precedence over the `<html>` lang attribute.",
3840
+ "description": "The locale used for calendar labels and date formatting.\n\nThis takes precedence over the `<html>` `lang` attribute. Supported built-in locales are `en`, `nb`, `sv`, `da`, and `fi`.",
3812
3841
  "attribute": "lang",
3813
3842
  "reflects": true
3814
3843
  },
@@ -3818,6 +3847,7 @@
3818
3847
  "type": {
3819
3848
  "text": "string"
3820
3849
  },
3850
+ "description": "The name submitted with the date value.\n\nUse this when the datepicker belongs to a form and its value should be included in form data.",
3821
3851
  "attribute": "name",
3822
3852
  "reflects": true
3823
3853
  },
@@ -3827,6 +3857,7 @@
3827
3857
  "type": {
3828
3858
  "text": "string"
3829
3859
  },
3860
+ "description": "The selected date value.\n\nUse 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.",
3830
3861
  "attribute": "value",
3831
3862
  "reflects": true
3832
3863
  },
@@ -3837,7 +3868,7 @@
3837
3868
  "text": "string"
3838
3869
  },
3839
3870
  "default": "'MMMM yyyy'",
3840
- "description": "Decides the format of the date as shown in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
3871
+ "description": "The date format used in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
3841
3872
  "attribute": "header-format"
3842
3873
  },
3843
3874
  {
@@ -3847,7 +3878,7 @@
3847
3878
  "text": "string"
3848
3879
  },
3849
3880
  "default": "'EEEEEE'",
3850
- "description": "Decides the format of the weekday as shown above the grid of dates in the calendar.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
3881
+ "description": "The weekday format shown above the calendar grid.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
3851
3882
  "attribute": "weekday-format"
3852
3883
  },
3853
3884
  {
@@ -3856,7 +3887,7 @@
3856
3887
  "type": {
3857
3888
  "text": "(day: Date) => boolean"
3858
3889
  },
3859
- "description": "Lets you control if a date in the calendar should be disabled.\n\nThis needs to be set on the element instance in JavaScript, not as an HTML attribute."
3890
+ "description": "Function used to disable dates in the calendar.\n\nSet this on the element instance in JavaScript, not as an HTML attribute. Disabled dates cannot be selected from the calendar."
3860
3891
  },
3861
3892
  {
3862
3893
  "kind": "field",
@@ -3865,7 +3896,7 @@
3865
3896
  "text": "string"
3866
3897
  },
3867
3898
  "default": "'PPPP'",
3868
- "description": "Decides the format of the day in the calendar as read to screen readers.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
3899
+ "description": "The date format used for calendar day accessible names.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
3869
3900
  "attribute": "day-format"
3870
3901
  },
3871
3902
  {
@@ -4072,6 +4103,7 @@
4072
4103
  "type": {
4073
4104
  "text": "string"
4074
4105
  },
4106
+ "description": "The label displayed above the date input.\n\nUse this to give the datepicker a visible and accessible name.",
4075
4107
  "fieldName": "label"
4076
4108
  },
4077
4109
  {
@@ -4079,7 +4111,7 @@
4079
4111
  "type": {
4080
4112
  "text": "string"
4081
4113
  },
4082
- "description": "Takes precedence over the `<html>` lang attribute.",
4114
+ "description": "The locale used for calendar labels and date formatting.\n\nThis takes precedence over the `<html>` `lang` attribute. Supported built-in locales are `en`, `nb`, `sv`, `da`, and `fi`.",
4083
4115
  "fieldName": "lang"
4084
4116
  },
4085
4117
  {
@@ -4087,6 +4119,7 @@
4087
4119
  "type": {
4088
4120
  "text": "string"
4089
4121
  },
4122
+ "description": "The name submitted with the date value.\n\nUse this when the datepicker belongs to a form and its value should be included in form data.",
4090
4123
  "fieldName": "name"
4091
4124
  },
4092
4125
  {
@@ -4094,6 +4127,7 @@
4094
4127
  "type": {
4095
4128
  "text": "string"
4096
4129
  },
4130
+ "description": "The selected date value.\n\nUse 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.",
4097
4131
  "fieldName": "value"
4098
4132
  },
4099
4133
  {
@@ -4102,7 +4136,7 @@
4102
4136
  "text": "string"
4103
4137
  },
4104
4138
  "default": "'MMMM yyyy'",
4105
- "description": "Decides the format of the date as shown in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
4139
+ "description": "The date format used in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
4106
4140
  "fieldName": "headerFormat"
4107
4141
  },
4108
4142
  {
@@ -4111,7 +4145,7 @@
4111
4145
  "text": "string"
4112
4146
  },
4113
4147
  "default": "'EEEEEE'",
4114
- "description": "Decides the format of the weekday as shown above the grid of dates in the calendar.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
4148
+ "description": "The weekday format shown above the calendar grid.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
4115
4149
  "fieldName": "weekdayFormat"
4116
4150
  },
4117
4151
  {
@@ -4120,7 +4154,7 @@
4120
4154
  "text": "string"
4121
4155
  },
4122
4156
  "default": "'PPPP'",
4123
- "description": "Decides the format of the day in the calendar as read to screen readers.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
4157
+ "description": "The date format used for calendar day accessible names.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
4124
4158
  "fieldName": "dayFormat"
4125
4159
  }
4126
4160
  ],
@@ -4165,7 +4199,7 @@
4165
4199
  "declarations": [
4166
4200
  {
4167
4201
  "kind": "class",
4168
- "description": "Expandable is a layout component used for creating expandable content areas on a page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-expandable--docs)",
4202
+ "description": "Expandable is a layout component used for creating expandable content areas on a page.",
4169
4203
  "name": "WarpExpandable",
4170
4204
  "slots": [
4171
4205
  {
@@ -4181,6 +4215,7 @@
4181
4215
  "text": "boolean"
4182
4216
  },
4183
4217
  "default": "false",
4218
+ "description": "Controls component's expanded state",
4184
4219
  "attribute": "expanded",
4185
4220
  "reflects": true
4186
4221
  },
@@ -4190,6 +4225,7 @@
4190
4225
  "type": {
4191
4226
  "text": "string"
4192
4227
  },
4228
+ "description": "Component title. Used to display the title value which is always present regardless of whether the component is open or closed.",
4193
4229
  "attribute": "title"
4194
4230
  },
4195
4231
  {
@@ -4199,6 +4235,7 @@
4199
4235
  "text": "boolean"
4200
4236
  },
4201
4237
  "default": "false",
4238
+ "description": "Will make the expandable a Box",
4202
4239
  "attribute": "box"
4203
4240
  },
4204
4241
  {
@@ -4208,6 +4245,7 @@
4208
4245
  "text": "boolean"
4209
4246
  },
4210
4247
  "default": "false",
4248
+ "description": "Will make the expandable full-width on the sm breakpoint size",
4211
4249
  "attribute": "bleed"
4212
4250
  },
4213
4251
  {
@@ -4216,6 +4254,7 @@
4216
4254
  "type": {
4217
4255
  "text": "string"
4218
4256
  },
4257
+ "deprecated": "Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.",
4219
4258
  "attribute": "button-class"
4220
4259
  },
4221
4260
  {
@@ -4224,6 +4263,7 @@
4224
4263
  "type": {
4225
4264
  "text": "string"
4226
4265
  },
4266
+ "deprecated": "Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.",
4227
4267
  "attribute": "content-class"
4228
4268
  },
4229
4269
  {
@@ -4233,6 +4273,7 @@
4233
4273
  "text": "boolean"
4234
4274
  },
4235
4275
  "default": "false",
4276
+ "description": "Controls chevron visibility",
4236
4277
  "attribute": "no-chevron"
4237
4278
  },
4238
4279
  {
@@ -4242,6 +4283,7 @@
4242
4283
  "text": "boolean"
4243
4284
  },
4244
4285
  "default": "false",
4286
+ "description": "Will animate the expansion/collapse",
4245
4287
  "attribute": "animated"
4246
4288
  },
4247
4289
  {
@@ -4250,6 +4292,7 @@
4250
4292
  "type": {
4251
4293
  "text": "number"
4252
4294
  },
4295
+ "description": "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.",
4253
4296
  "attribute": "heading-level"
4254
4297
  },
4255
4298
  {
@@ -4258,6 +4301,7 @@
4258
4301
  "type": {
4259
4302
  "text": "boolean"
4260
4303
  },
4304
+ "privacy": "private",
4261
4305
  "default": "true",
4262
4306
  "attribute": "_hasTitle"
4263
4307
  },
@@ -4267,6 +4311,7 @@
4267
4311
  "type": {
4268
4312
  "text": "boolean"
4269
4313
  },
4314
+ "privacy": "private",
4270
4315
  "default": "false",
4271
4316
  "attribute": "_showChevronUp"
4272
4317
  },
@@ -4314,6 +4359,7 @@
4314
4359
  "text": "boolean"
4315
4360
  },
4316
4361
  "default": "false",
4362
+ "description": "Controls component's expanded state",
4317
4363
  "fieldName": "expanded"
4318
4364
  },
4319
4365
  {
@@ -4321,6 +4367,7 @@
4321
4367
  "type": {
4322
4368
  "text": "string"
4323
4369
  },
4370
+ "description": "Component title. Used to display the title value which is always present regardless of whether the component is open or closed.",
4324
4371
  "fieldName": "title"
4325
4372
  },
4326
4373
  {
@@ -4329,6 +4376,7 @@
4329
4376
  "text": "boolean"
4330
4377
  },
4331
4378
  "default": "false",
4379
+ "description": "Will make the expandable a Box",
4332
4380
  "fieldName": "box"
4333
4381
  },
4334
4382
  {
@@ -4337,6 +4385,7 @@
4337
4385
  "text": "boolean"
4338
4386
  },
4339
4387
  "default": "false",
4388
+ "description": "Will make the expandable full-width on the sm breakpoint size",
4340
4389
  "fieldName": "bleed"
4341
4390
  },
4342
4391
  {
@@ -4344,6 +4393,7 @@
4344
4393
  "type": {
4345
4394
  "text": "string"
4346
4395
  },
4396
+ "deprecated": "Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.",
4347
4397
  "fieldName": "buttonClass"
4348
4398
  },
4349
4399
  {
@@ -4351,6 +4401,7 @@
4351
4401
  "type": {
4352
4402
  "text": "string"
4353
4403
  },
4404
+ "deprecated": "Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.",
4354
4405
  "fieldName": "contentClass"
4355
4406
  },
4356
4407
  {
@@ -4359,6 +4410,7 @@
4359
4410
  "text": "boolean"
4360
4411
  },
4361
4412
  "default": "false",
4413
+ "description": "Controls chevron visibility",
4362
4414
  "fieldName": "noChevron"
4363
4415
  },
4364
4416
  {
@@ -4367,6 +4419,7 @@
4367
4419
  "text": "boolean"
4368
4420
  },
4369
4421
  "default": "false",
4422
+ "description": "Will animate the expansion/collapse",
4370
4423
  "fieldName": "animated"
4371
4424
  },
4372
4425
  {
@@ -4374,6 +4427,7 @@
4374
4427
  "type": {
4375
4428
  "text": "number"
4376
4429
  },
4430
+ "description": "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.",
4377
4431
  "fieldName": "headingLevel"
4378
4432
  },
4379
4433
  {
@@ -4497,6 +4551,15 @@
4497
4551
  },
4498
4552
  "privacy": "private"
4499
4553
  },
4554
+ {
4555
+ "kind": "field",
4556
+ "name": "_isClosing",
4557
+ "type": {
4558
+ "text": "boolean"
4559
+ },
4560
+ "privacy": "private",
4561
+ "default": "false"
4562
+ },
4500
4563
  {
4501
4564
  "kind": "method",
4502
4565
  "name": "open",
package/dist/docs/affix/affix.md CHANGED
@@ -144,6 +144,8 @@ Clicking the clear button will reset the textfield
144
144
 
145
145
  </elements-example>
146
146
 
147
+ ## Styling API
148
+
147
149
  ## `<w-affix>` API
148
150
 
149
151
  Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
package/dist/docs/affix/styling.md ADDED
@@ -0,0 +1 @@
1
+ ## Styling API
package/dist/docs/alert/alert.md CHANGED
@@ -152,6 +152,8 @@ attribute on [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/AR
152
152
  </script>
153
153
  ```
154
154
 
155
+ ## Styling API
156
+
155
157
  ## `<w-alert>` API
156
158
 
157
159
  Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
package/dist/docs/alert/styling.md ADDED
@@ -0,0 +1 @@
1
+ ## Styling API
package/dist/docs/attention/attention.md CHANGED
@@ -246,6 +246,8 @@ When `can-close` is used, ensure your app listens to the `close` event and updat
246
246
 
247
247
  </elements-example>
248
248
 
249
+ ## Styling API
250
+
249
251
  ## `<w-attention>` API
250
252
 
251
253
  Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
package/dist/docs/attention/styling.md ADDED
@@ -0,0 +1 @@
1
+ ## Styling API
package/dist/docs/badge/badge.md CHANGED
@@ -176,6 +176,8 @@ If the same information is already available in nearby accessible text and the b
176
176
 
177
177
  </elements-example>
178
178
 
179
+ ## Styling API
180
+
179
181
  ## `<w-badge>` API
180
182
 
181
183
  Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
package/dist/docs/badge/styling.md ADDED
@@ -0,0 +1 @@
1
+ ## Styling API
package/dist/docs/box/box.md CHANGED
@@ -89,13 +89,8 @@ If you must use box for a purely visual grouping, set role none:
89
89
 
90
90
  ### Basic
91
91
 
92
- <style-isolate>
93
- <w-box aria-labelledby="delivery-heading">
94
- <h2 id="delivery-heading">Delivery</h2>
95
- <p>Choose how you want the item delivered.</p>
96
- </w-box>
97
- </style-isolate>
98
-
92
+ <elements-example>
93
+
99
94
  ```html
100
95
  <w-box aria-labelledby="delivery-heading">
101
96
  <h2 id="delivery-heading">Delivery</h2>
@@ -103,14 +98,11 @@ If you must use box for a purely visual grouping, set role none:
103
98
  </w-box>
104
99
  ```
105
100
 
101
+ </elements-example>
102
+
106
103
  ### Neutral
107
104
 
108
- <style-isolate>
109
- <w-box neutral aria-labelledby="order-summary-heading">
110
- <h2 id="order-summary-heading">Order summary</h2>
111
- <p>Review the item price, delivery, and total before continuing.</p>
112
- </w-box>
113
- </style-isolate>
105
+ <elements-example>
114
106
 
115
107
  ```html
116
108
  <w-box neutral aria-labelledby="order-summary-heading">
@@ -119,14 +111,11 @@ If you must use box for a purely visual grouping, set role none:
119
111
  </w-box>
120
112
  ```
121
113
 
114
+ </elements-example>
115
+
122
116
  ### Info
123
117
 
124
- <style-isolate>
125
- <w-box info aria-labelledby="good-to-know-heading">
126
- <h2 id="good-to-know-heading">Good to know</h2>
127
- <p>You can change the delivery method before payment.</p>
128
- </w-box>
129
- </style-isolate>
118
+ <elements-example>
130
119
 
131
120
  ```html
132
121
  <w-box info aria-labelledby="good-to-know-heading">
@@ -135,14 +124,11 @@ If you must use box for a purely visual grouping, set role none:
135
124
  </w-box>
136
125
  ```
137
126
 
127
+ </elements-example>
128
+
138
129
  ### Bordered
139
130
 
140
- <style-isolate>
141
- <w-box bordered aria-labelledby="contact-seller-heading">
142
- <h2 id="contact-seller-heading">Contact seller</h2>
143
- <p>Send a message to ask about pickup times.</p>
144
- </w-box>
145
- </style-isolate>
131
+ <elements-example>
146
132
 
147
133
  ```html
148
134
  <w-box bordered aria-labelledby="contact-seller-heading">
@@ -151,16 +137,11 @@ If you must use box for a purely visual grouping, set role none:
151
137
  </w-box>
152
138
  ```
153
139
 
140
+ </elements-example>
141
+
154
142
  ### Bleed
155
143
 
156
- <style-isolate>
157
- <div style="padding: 0 16px;">
158
- <w-box neutral bleed aria-labelledby="summary-heading">
159
- <h2 id="summary-heading">Summary</h2>
160
- <p>This box extends into the horizontal gutter on narrow screens.</p>
161
- </w-box>
162
- </div>
163
- </style-isolate>
144
+ <elements-example>
164
145
 
165
146
  ```html
166
147
  <div style="padding: 0 16px;">
@@ -171,13 +152,12 @@ If you must use box for a purely visual grouping, set role none:
171
152
  </div>
172
153
  ```
173
154
 
155
+ </elements-example>
156
+
157
+
174
158
  ### Visual Grouping Without Accessibility Landmarking
175
159
 
176
- <style-isolate>
177
- <w-box role="none">
178
- <p>This box is only a visual container.</p>
179
- </w-box>
180
- </style-isolate>
160
+ <elements-example>
181
161
 
182
162
  ```html
183
163
  <w-box role="none">
@@ -185,6 +165,10 @@ If you must use box for a purely visual grouping, set role none:
185
165
  </w-box>
186
166
  ```
187
167
 
168
+ </elements-example>
169
+
170
+ ## Styling API
171
+
188
172
  ## `<w-box>` API
189
173
 
190
174
  Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
package/dist/docs/box/examples.md CHANGED
@@ -2,13 +2,8 @@
2
2
 
3
3
  ### Basic
4
4
 
5
- <style-isolate>
6
- <w-box aria-labelledby="delivery-heading">
7
- <h2 id="delivery-heading">Delivery</h2>
8
- <p>Choose how you want the item delivered.</p>
9
- </w-box>
10
- </style-isolate>
11
-
5
+ <elements-example>
6
+
12
7
  ```html
13
8
  <w-box aria-labelledby="delivery-heading">
14
9
  <h2 id="delivery-heading">Delivery</h2>
@@ -16,14 +11,11 @@
16
11
  </w-box>
17
12
  ```
18
13
 
14
+ </elements-example>
15
+
19
16
  ### Neutral
20
17
 
21
- <style-isolate>
22
- <w-box neutral aria-labelledby="order-summary-heading">
23
- <h2 id="order-summary-heading">Order summary</h2>
24
- <p>Review the item price, delivery, and total before continuing.</p>
25
- </w-box>
26
- </style-isolate>
18
+ <elements-example>
27
19
 
28
20
  ```html
29
21
  <w-box neutral aria-labelledby="order-summary-heading">
@@ -32,14 +24,11 @@
32
24
  </w-box>
33
25
  ```
34
26
 
27
+ </elements-example>
28
+
35
29
  ### Info
36
30
 
37
- <style-isolate>
38
- <w-box info aria-labelledby="good-to-know-heading">
39
- <h2 id="good-to-know-heading">Good to know</h2>
40
- <p>You can change the delivery method before payment.</p>
41
- </w-box>
42
- </style-isolate>
31
+ <elements-example>
43
32
 
44
33
  ```html
45
34
  <w-box info aria-labelledby="good-to-know-heading">
@@ -48,14 +37,11 @@
48
37
  </w-box>
49
38
  ```
50
39
 
40
+ </elements-example>
41
+
51
42
  ### Bordered
52
43
 
53
- <style-isolate>
54
- <w-box bordered aria-labelledby="contact-seller-heading">
55
- <h2 id="contact-seller-heading">Contact seller</h2>
56
- <p>Send a message to ask about pickup times.</p>
57
- </w-box>
58
- </style-isolate>
44
+ <elements-example>
59
45
 
60
46
  ```html
61
47
  <w-box bordered aria-labelledby="contact-seller-heading">
@@ -64,16 +50,11 @@
64
50
  </w-box>
65
51
  ```
66
52
 
53
+ </elements-example>
54
+
67
55
  ### Bleed
68
56
 
69
- <style-isolate>
70
- <div style="padding: 0 16px;">
71
- <w-box neutral bleed aria-labelledby="summary-heading">
72
- <h2 id="summary-heading">Summary</h2>
73
- <p>This box extends into the horizontal gutter on narrow screens.</p>
74
- </w-box>
75
- </div>
76
- </style-isolate>
57
+ <elements-example>
77
58
 
78
59
  ```html
79
60
  <div style="padding: 0 16px;">
@@ -84,16 +65,17 @@
84
65
  </div>
85
66
  ```
86
67
 
68
+ </elements-example>
69
+
70
+
87
71
  ### Visual Grouping Without Accessibility Landmarking
88
72
 
89
- <style-isolate>
90
- <w-box role="none">
91
- <p>This box is only a visual container.</p>
92
- </w-box>
93
- </style-isolate>
73
+ <elements-example>
94
74
 
95
75
  ```html
96
76
  <w-box role="none">
97
77
  <p>This box is only a visual container.</p>
98
78
  </w-box>
99
79
  ```
80
+
81
+ </elements-example>
package/dist/docs/box/styling.md ADDED
@@ -0,0 +1 @@
1
+ ## Styling API