@crowdstrike/glide-core 0.13.1 → 0.14.1

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 (284) hide show
  1. package/dist/drawer.d.ts +2 -2
  2. package/dist/drawer.js +1 -1
  3. package/dist/drawer.styles.js +3 -14
  4. package/dist/dropdown.styles.js +3 -2
  5. package/dist/input.styles.js +1 -0
  6. package/dist/styles/variables.css +1 -1
  7. package/dist/textarea.styles.js +2 -0
  8. package/dist/toasts.d.ts +2 -2
  9. package/dist/toasts.toast.d.ts +1 -1
  10. package/dist/toasts.toast.js +1 -1
  11. package/dist/toasts.toast.styles.js +8 -0
  12. package/dist/tree.item.styles.js +2 -2
  13. package/package.json +8 -5
  14. package/dist/accordion.stories.d.ts +0 -6
  15. package/dist/accordion.test.basics.d.ts +0 -1
  16. package/dist/accordion.test.basics.js +0 -28
  17. package/dist/accordion.test.events.d.ts +0 -1
  18. package/dist/accordion.test.events.js +0 -28
  19. package/dist/accordion.test.focus.d.ts +0 -1
  20. package/dist/accordion.test.focus.js +0 -11
  21. package/dist/accordion.test.interactions.d.ts +0 -1
  22. package/dist/accordion.test.interactions.js +0 -75
  23. package/dist/button-group.button.test.basics.d.ts +0 -1
  24. package/dist/button-group.button.test.basics.js +0 -97
  25. package/dist/button-group.button.test.events.d.ts +0 -1
  26. package/dist/button-group.button.test.events.js +0 -15
  27. package/dist/button-group.button.test.focus.d.ts +0 -1
  28. package/dist/button-group.button.test.focus.js +0 -13
  29. package/dist/button-group.button.test.interactions.d.ts +0 -1
  30. package/dist/button-group.button.test.interactions.js +0 -42
  31. package/dist/button-group.stories.d.ts +0 -7
  32. package/dist/button-group.test.basics.d.ts +0 -1
  33. package/dist/button-group.test.basics.js +0 -148
  34. package/dist/button-group.test.events.d.ts +0 -1
  35. package/dist/button-group.test.events.js +0 -241
  36. package/dist/button-group.test.focus.d.ts +0 -1
  37. package/dist/button-group.test.focus.js +0 -39
  38. package/dist/button-group.test.interactions.d.ts +0 -1
  39. package/dist/button-group.test.interactions.js +0 -91
  40. package/dist/button.stories.d.ts +0 -7
  41. package/dist/button.test.basics.d.ts +0 -1
  42. package/dist/button.test.basics.js +0 -69
  43. package/dist/button.test.events.d.ts +0 -1
  44. package/dist/button.test.events.js +0 -102
  45. package/dist/checkbox-group.stories.d.ts +0 -6
  46. package/dist/checkbox-group.test.basics.d.ts +0 -1
  47. package/dist/checkbox-group.test.basics.js +0 -116
  48. package/dist/checkbox-group.test.events.d.ts +0 -1
  49. package/dist/checkbox-group.test.events.js +0 -111
  50. package/dist/checkbox-group.test.focus.d.ts +0 -1
  51. package/dist/checkbox-group.test.focus.js +0 -70
  52. package/dist/checkbox-group.test.form.d.ts +0 -1
  53. package/dist/checkbox-group.test.form.js +0 -131
  54. package/dist/checkbox-group.test.interactions.d.ts +0 -1
  55. package/dist/checkbox-group.test.interactions.js +0 -82
  56. package/dist/checkbox-group.test.validity.d.ts +0 -1
  57. package/dist/checkbox-group.test.validity.js +0 -145
  58. package/dist/checkbox.stories.d.ts +0 -5
  59. package/dist/checkbox.test.basics.d.ts +0 -1
  60. package/dist/checkbox.test.basics.js +0 -90
  61. package/dist/checkbox.test.events.d.ts +0 -1
  62. package/dist/checkbox.test.events.js +0 -105
  63. package/dist/checkbox.test.focus.d.ts +0 -1
  64. package/dist/checkbox.test.focus.js +0 -51
  65. package/dist/checkbox.test.form.d.ts +0 -1
  66. package/dist/checkbox.test.form.js +0 -133
  67. package/dist/checkbox.test.interactions.d.ts +0 -1
  68. package/dist/checkbox.test.interactions.js +0 -131
  69. package/dist/checkbox.test.validity.d.ts +0 -1
  70. package/dist/checkbox.test.validity.js +0 -128
  71. package/dist/drawer.stories.d.ts +0 -6
  72. package/dist/drawer.test.accessibility.d.ts +0 -1
  73. package/dist/drawer.test.accessibility.js +0 -22
  74. package/dist/drawer.test.basics.d.ts +0 -1
  75. package/dist/drawer.test.basics.js +0 -44
  76. package/dist/drawer.test.closing.d.ts +0 -1
  77. package/dist/drawer.test.closing.js +0 -40
  78. package/dist/drawer.test.events.d.ts +0 -1
  79. package/dist/drawer.test.events.js +0 -42
  80. package/dist/drawer.test.methods.d.ts +0 -1
  81. package/dist/drawer.test.methods.js +0 -35
  82. package/dist/dropdown.option.test.basics.d.ts +0 -1
  83. package/dist/dropdown.option.test.basics.js +0 -34
  84. package/dist/dropdown.option.test.basics.multiple.d.ts +0 -1
  85. package/dist/dropdown.option.test.basics.multiple.js +0 -36
  86. package/dist/dropdown.option.test.basics.single.d.ts +0 -1
  87. package/dist/dropdown.option.test.basics.single.js +0 -29
  88. package/dist/dropdown.option.test.events.d.ts +0 -1
  89. package/dist/dropdown.option.test.events.js +0 -36
  90. package/dist/dropdown.option.test.focus.d.ts +0 -1
  91. package/dist/dropdown.option.test.focus.js +0 -11
  92. package/dist/dropdown.option.test.interactions.multiple.d.ts +0 -1
  93. package/dist/dropdown.option.test.interactions.multiple.js +0 -42
  94. package/dist/dropdown.option.test.interactions.single.d.ts +0 -1
  95. package/dist/dropdown.option.test.interactions.single.js +0 -76
  96. package/dist/dropdown.stories.d.ts +0 -8
  97. package/dist/dropdown.test.basics.d.ts +0 -1
  98. package/dist/dropdown.test.basics.filterable.d.ts +0 -1
  99. package/dist/dropdown.test.basics.filterable.js +0 -108
  100. package/dist/dropdown.test.basics.js +0 -181
  101. package/dist/dropdown.test.basics.multiple.d.ts +0 -1
  102. package/dist/dropdown.test.basics.multiple.js +0 -259
  103. package/dist/dropdown.test.basics.single.d.ts +0 -1
  104. package/dist/dropdown.test.basics.single.js +0 -122
  105. package/dist/dropdown.test.events.d.ts +0 -1
  106. package/dist/dropdown.test.events.filterable.d.ts +0 -1
  107. package/dist/dropdown.test.events.filterable.js +0 -31
  108. package/dist/dropdown.test.events.js +0 -251
  109. package/dist/dropdown.test.events.multiple.d.ts +0 -1
  110. package/dist/dropdown.test.events.multiple.js +0 -446
  111. package/dist/dropdown.test.events.single.d.ts +0 -1
  112. package/dist/dropdown.test.events.single.js +0 -343
  113. package/dist/dropdown.test.focus.d.ts +0 -1
  114. package/dist/dropdown.test.focus.filterable.d.ts +0 -1
  115. package/dist/dropdown.test.focus.filterable.js +0 -140
  116. package/dist/dropdown.test.focus.js +0 -107
  117. package/dist/dropdown.test.focus.multiple.d.ts +0 -1
  118. package/dist/dropdown.test.focus.multiple.js +0 -170
  119. package/dist/dropdown.test.focus.single.d.ts +0 -1
  120. package/dist/dropdown.test.focus.single.js +0 -42
  121. package/dist/dropdown.test.form.d.ts +0 -1
  122. package/dist/dropdown.test.form.js +0 -74
  123. package/dist/dropdown.test.form.multiple.d.ts +0 -1
  124. package/dist/dropdown.test.form.multiple.js +0 -151
  125. package/dist/dropdown.test.form.single.d.ts +0 -1
  126. package/dist/dropdown.test.form.single.js +0 -129
  127. package/dist/dropdown.test.interactions.d.ts +0 -1
  128. package/dist/dropdown.test.interactions.filterable.d.ts +0 -1
  129. package/dist/dropdown.test.interactions.filterable.js +0 -805
  130. package/dist/dropdown.test.interactions.js +0 -696
  131. package/dist/dropdown.test.interactions.multiple.d.ts +0 -1
  132. package/dist/dropdown.test.interactions.multiple.js +0 -1026
  133. package/dist/dropdown.test.interactions.single.d.ts +0 -1
  134. package/dist/dropdown.test.interactions.single.js +0 -569
  135. package/dist/dropdown.test.validity.d.ts +0 -1
  136. package/dist/dropdown.test.validity.js +0 -181
  137. package/dist/form-controls-layout.stories.d.ts +0 -10
  138. package/dist/form-controls-layout.test.basics.d.ts +0 -2
  139. package/dist/form-controls-layout.test.basics.js +0 -75
  140. package/dist/form-controls-layout.test.interactions.d.ts +0 -2
  141. package/dist/form-controls-layout.test.interactions.js +0 -26
  142. package/dist/icon-button.stories.d.ts +0 -6
  143. package/dist/icon-button.test.basics.d.ts +0 -1
  144. package/dist/icon-button.test.basics.js +0 -43
  145. package/dist/icon-button.test.focus.d.ts +0 -1
  146. package/dist/icon-button.test.focus.js +0 -13
  147. package/dist/input.stories.d.ts +0 -8
  148. package/dist/input.test.basics.d.ts +0 -1
  149. package/dist/input.test.basics.js +0 -138
  150. package/dist/input.test.events.d.ts +0 -1
  151. package/dist/input.test.events.js +0 -98
  152. package/dist/input.test.focus.d.ts +0 -1
  153. package/dist/input.test.focus.js +0 -58
  154. package/dist/input.test.form.d.ts +0 -1
  155. package/dist/input.test.form.js +0 -74
  156. package/dist/input.test.validity.d.ts +0 -1
  157. package/dist/input.test.validity.js +0 -258
  158. package/dist/label.test.basics.d.ts +0 -1
  159. package/dist/label.test.basics.js +0 -136
  160. package/dist/menu.button.test.basics.d.ts +0 -1
  161. package/dist/menu.button.test.basics.js +0 -43
  162. package/dist/menu.link.test.basics.d.ts +0 -1
  163. package/dist/menu.link.test.basics.js +0 -47
  164. package/dist/menu.options.test.basics.d.ts +0 -2
  165. package/dist/menu.options.test.basics.js +0 -44
  166. package/dist/menu.options.test.events.d.ts +0 -1
  167. package/dist/menu.options.test.events.js +0 -19
  168. package/dist/menu.stories.d.ts +0 -11
  169. package/dist/menu.test.basics.d.ts +0 -1
  170. package/dist/menu.test.basics.js +0 -178
  171. package/dist/menu.test.events.d.ts +0 -3
  172. package/dist/menu.test.events.js +0 -125
  173. package/dist/menu.test.focus.d.ts +0 -2
  174. package/dist/menu.test.focus.js +0 -102
  175. package/dist/menu.test.interactions.d.ts +0 -3
  176. package/dist/menu.test.interactions.js +0 -1069
  177. package/dist/modal.icon-button.test.basics.d.ts +0 -1
  178. package/dist/modal.icon-button.test.basics.js +0 -46
  179. package/dist/modal.stories.d.ts +0 -13
  180. package/dist/modal.tertiary-icon.test.basics.d.ts +0 -1
  181. package/dist/modal.tertiary-icon.test.basics.js +0 -60
  182. package/dist/modal.test.accessibility.d.ts +0 -1
  183. package/dist/modal.test.accessibility.js +0 -38
  184. package/dist/modal.test.basics.d.ts +0 -3
  185. package/dist/modal.test.basics.js +0 -204
  186. package/dist/modal.test.close.d.ts +0 -1
  187. package/dist/modal.test.close.js +0 -35
  188. package/dist/modal.test.events.d.ts +0 -1
  189. package/dist/modal.test.events.js +0 -99
  190. package/dist/modal.test.lock-scroll.d.ts +0 -1
  191. package/dist/modal.test.lock-scroll.js +0 -67
  192. package/dist/modal.test.methods.d.ts +0 -1
  193. package/dist/modal.test.methods.js +0 -20
  194. package/dist/modal.test.scrollbars.d.ts +0 -1
  195. package/dist/modal.test.scrollbars.js +0 -18
  196. package/dist/radio-group.stories.d.ts +0 -6
  197. package/dist/radio-group.test.basics.d.ts +0 -2
  198. package/dist/radio-group.test.basics.js +0 -324
  199. package/dist/radio-group.test.events.d.ts +0 -2
  200. package/dist/radio-group.test.events.js +0 -278
  201. package/dist/radio-group.test.focus.d.ts +0 -2
  202. package/dist/radio-group.test.focus.js +0 -95
  203. package/dist/radio-group.test.form.d.ts +0 -1
  204. package/dist/radio-group.test.form.js +0 -124
  205. package/dist/radio-group.test.validity.d.ts +0 -1
  206. package/dist/radio-group.test.validity.js +0 -311
  207. package/dist/split-button.primary-button.test.basics.d.ts +0 -1
  208. package/dist/split-button.primary-button.test.basics.js +0 -31
  209. package/dist/split-button.primary-button.test.focus.d.ts +0 -1
  210. package/dist/split-button.primary-button.test.focus.js +0 -14
  211. package/dist/split-button.primary-link.test.basics.d.ts +0 -1
  212. package/dist/split-button.primary-link.test.basics.js +0 -30
  213. package/dist/split-button.primary-link.test.focus.d.ts +0 -1
  214. package/dist/split-button.primary-link.test.focus.js +0 -15
  215. package/dist/split-button.secondary-button.test.basics.d.ts +0 -1
  216. package/dist/split-button.secondary-button.test.basics.js +0 -58
  217. package/dist/split-button.secondary-button.test.focus.d.ts +0 -1
  218. package/dist/split-button.secondary-button.test.focus.js +0 -14
  219. package/dist/split-button.secondary-button.test.interactions.d.ts +0 -2
  220. package/dist/split-button.secondary-button.test.interactions.js +0 -30
  221. package/dist/split-button.stories.d.ts +0 -13
  222. package/dist/split-button.test.basics.d.ts +0 -2
  223. package/dist/split-button.test.basics.js +0 -87
  224. package/dist/split-button.test.interactions.d.ts +0 -4
  225. package/dist/split-button.test.interactions.js +0 -51
  226. package/dist/tab.group.test.basics.d.ts +0 -3
  227. package/dist/tab.group.test.basics.js +0 -234
  228. package/dist/tab.group.test.interactions.d.ts +0 -3
  229. package/dist/tab.group.test.interactions.js +0 -434
  230. package/dist/tab.test.basics.d.ts +0 -1
  231. package/dist/tab.test.basics.js +0 -50
  232. package/dist/tabs.stories.d.ts +0 -8
  233. package/dist/tag.stories.d.ts +0 -7
  234. package/dist/tag.test.basics.d.ts +0 -1
  235. package/dist/tag.test.basics.js +0 -28
  236. package/dist/tag.test.events.d.ts +0 -1
  237. package/dist/tag.test.events.js +0 -93
  238. package/dist/tag.test.focus.d.ts +0 -1
  239. package/dist/tag.test.focus.js +0 -10
  240. package/dist/tag.test.interactions.d.ts +0 -1
  241. package/dist/tag.test.interactions.js +0 -36
  242. package/dist/textarea.stories.d.ts +0 -5
  243. package/dist/textarea.test.basics.d.ts +0 -1
  244. package/dist/textarea.test.basics.js +0 -177
  245. package/dist/textarea.test.events.d.ts +0 -1
  246. package/dist/textarea.test.events.js +0 -106
  247. package/dist/textarea.test.form.d.ts +0 -1
  248. package/dist/textarea.test.form.js +0 -71
  249. package/dist/textarea.test.validity.d.ts +0 -1
  250. package/dist/textarea.test.validity.js +0 -204
  251. package/dist/toasts.stories.d.ts +0 -7
  252. package/dist/toasts.test.basics.d.ts +0 -1
  253. package/dist/toasts.test.basics.js +0 -115
  254. package/dist/toasts.toast.test.basics.d.ts +0 -1
  255. package/dist/toasts.toast.test.basics.js +0 -139
  256. package/dist/toggle.stories.d.ts +0 -4
  257. package/dist/toggle.test.basics.d.ts +0 -1
  258. package/dist/toggle.test.basics.js +0 -69
  259. package/dist/toggle.test.events.d.ts +0 -1
  260. package/dist/toggle.test.events.js +0 -30
  261. package/dist/toggle.test.focus.d.ts +0 -1
  262. package/dist/toggle.test.focus.js +0 -9
  263. package/dist/toggle.test.interactions.d.ts +0 -1
  264. package/dist/toggle.test.interactions.js +0 -81
  265. package/dist/tooltip.stories.d.ts +0 -7
  266. package/dist/tooltip.test.basics.d.ts +0 -1
  267. package/dist/tooltip.test.basics.js +0 -100
  268. package/dist/tooltip.test.interactions.d.ts +0 -1
  269. package/dist/tooltip.test.interactions.js +0 -203
  270. package/dist/tree.item.icon-button.test.basics.d.ts +0 -1
  271. package/dist/tree.item.icon-button.test.basics.js +0 -22
  272. package/dist/tree.item.menu.test.basics.d.ts +0 -1
  273. package/dist/tree.item.menu.test.basics.js +0 -86
  274. package/dist/tree.item.test.basics.d.ts +0 -2
  275. package/dist/tree.item.test.basics.js +0 -138
  276. package/dist/tree.stories.d.ts +0 -9
  277. package/dist/tree.test.aria.d.ts +0 -1
  278. package/dist/tree.test.aria.js +0 -86
  279. package/dist/tree.test.basics.d.ts +0 -3
  280. package/dist/tree.test.basics.js +0 -130
  281. package/dist/tree.test.events.d.ts +0 -2
  282. package/dist/tree.test.events.js +0 -19
  283. package/dist/tree.test.focus.d.ts +0 -1
  284. package/dist/tree.test.focus.js +0 -383
@@ -1 +0,0 @@
1
- import './button-group.button.js';
@@ -1,42 +0,0 @@
1
- import './button-group.button.js';
2
- import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
3
- import GlideCoreButtonGroupButton from './button-group.button.js';
4
- GlideCoreButtonGroupButton.shadowRootOptions.mode = 'open';
5
- it('sets `aria-checked` when selected programmatically', async () => {
6
- const component = await fixture(html `<glide-core-button-group-button
7
- label="Button"
8
- ></glide-core-button-group-button>`);
9
- component.selected = true;
10
- await elementUpdated(component);
11
- const radio = component.shadowRoot?.querySelector('[role="radio"]');
12
- expect(radio?.getAttribute('aria-checked')).to.equal('true');
13
- });
14
- it('sets `aria-checked` when deselected programmatically', async () => {
15
- const component = await fixture(html `<glide-core-button-group-button
16
- label="Button"
17
- selected
18
- ></glide-core-button-group-button>`);
19
- component.selected = false;
20
- await elementUpdated(component);
21
- const radio = component.shadowRoot?.querySelector('[role="radio"]');
22
- expect(radio?.getAttribute('aria-checked')).to.equal('false');
23
- });
24
- it('sets `aria-disabled` when disabled programmatically', async () => {
25
- const component = await fixture(html `<glide-core-button-group-button
26
- label="Button"
27
- ></glide-core-button-group-button>`);
28
- component.disabled = true;
29
- await elementUpdated(component);
30
- const radio = component.shadowRoot?.querySelector('[role="radio"]');
31
- expect(radio?.getAttribute('aria-disabled')).to.equal('true');
32
- });
33
- it('sets `aria-disabled` when enabled programmatically', async () => {
34
- const component = await fixture(html `<glide-core-button-group-button
35
- label="Button"
36
- disabled
37
- ></glide-core-button-group-button>`);
38
- component.disabled = false;
39
- await elementUpdated(component);
40
- const radio = component.shadowRoot?.querySelector('[role="radio"]');
41
- expect(radio?.getAttribute('aria-disabled')).to.equal('false');
42
- });
@@ -1,7 +0,0 @@
1
- import './button-group.js';
2
- import './icons/storybook.js';
3
- import type { Meta, StoryObj } from '@storybook/web-components';
4
- declare const meta: Meta;
5
- export default meta;
6
- export declare const ButtonGroup: StoryObj;
7
- export declare const WithIcons: StoryObj;
@@ -1 +0,0 @@
1
- import './button-group.js';
@@ -1,148 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import './button-group.js';
3
- import { expect, fixture, html } from '@open-wc/testing';
4
- import GlideCoreButtonGroup from './button-group.js';
5
- import GlideCoreButtonGroupButton from './button-group.button.js';
6
- import expectArgumentError from './library/expect-argument-error.js';
7
- GlideCoreButtonGroup.shadowRootOptions.mode = 'open';
8
- GlideCoreButtonGroupButton.shadowRootOptions.mode = 'open';
9
- it('registers', async () => {
10
- expect(window.customElements.get('glide-core-button-group')).to.equal(GlideCoreButtonGroup);
11
- });
12
- it('has defaults', async () => {
13
- const component = await fixture(html `<glide-core-button-group label="Label">
14
- <glide-core-button-group-button
15
- label="One"
16
- ></glide-core-button-group-button>
17
-
18
- <glide-core-button-group-button
19
- label="Two"
20
- ></glide-core-button-group-button>
21
- </glide-core-button-group>`);
22
- expect(component.orientation).to.equal('horizontal');
23
- expect(component.variant).to.equal(undefined);
24
- expect(component.getAttribute('orientation')).to.equal('horizontal');
25
- expect(component).to.not.have.attribute('variant');
26
- });
27
- it('is accessible', async () => {
28
- const component = await fixture(html `<glide-core-button-group label="Label">
29
- <glide-core-button-group-button
30
- label="One"
31
- ></glide-core-button-group-button>
32
-
33
- <glide-core-button-group-button
34
- label="Two"
35
- ></glide-core-button-group-button>
36
- </glide-core-button-group>`);
37
- // It's unfortunate to ignore this rule. But the label doesn't meet color
38
- // contrast requirements.
39
- // Axe has an `ignoreTags` but no `ignoreSelectors`.
40
- await expect(component).to.be.accessible({
41
- ignoredRules: ['color-contrast'],
42
- });
43
- });
44
- it('can have a label', async () => {
45
- const component = await fixture(html `<glide-core-button-group label="Label">
46
- <glide-core-button-group-button
47
- label="One"
48
- ></glide-core-button-group-button>
49
-
50
- <glide-core-button-group-button
51
- label="Two"
52
- ></glide-core-button-group-button>
53
- </glide-core-button-group>`);
54
- const label = component.shadowRoot?.querySelector('[data-test="label"]');
55
- const radioGroup = component.shadowRoot?.querySelector('[role="radiogroup"]');
56
- expect(label?.textContent).to.equal('Label');
57
- expect(radioGroup?.getAttribute('aria-labelledby')).to.equal(label?.id);
58
- });
59
- it('sets the orientation of each button when horizontal', async () => {
60
- await fixture(html `<glide-core-button-group>
61
- <glide-core-button-group-button
62
- label="One"
63
- ></glide-core-button-group-button>
64
-
65
- <glide-core-button-group-button
66
- label="Two"
67
- ></glide-core-button-group-button>
68
- </glide-core-button-group>`);
69
- const buttons = document.querySelectorAll('glide-core-button-group-button');
70
- expect(buttons[0]?.privateOrientation).to.equal('horizontal');
71
- expect(buttons[1]?.privateOrientation).to.equal('horizontal');
72
- });
73
- it('sets the orientation of each button when vertical', async () => {
74
- await fixture(html `<glide-core-button-group orientation="vertical">
75
- <glide-core-button-group-button
76
- label="One"
77
- ></glide-core-button-group-button>
78
-
79
- <glide-core-button-group-button
80
- label="Two"
81
- ></glide-core-button-group-button>
82
- </glide-core-button-group>`);
83
- const buttons = document.querySelectorAll('glide-core-button-group-button');
84
- expect(buttons[0]?.privateOrientation).to.equal('vertical');
85
- expect(buttons[1]?.privateOrientation).to.equal('vertical');
86
- });
87
- it('sets `privateVariant` on each button', async () => {
88
- await fixture(html `<glide-core-button-group label="Label" variant="icon-only">
89
- <glide-core-button-group-button label="One">
90
- <div slot="icon">Icon</div>
91
- </glide-core-button-group-button>
92
-
93
- <glide-core-button-group-button label="Two">
94
- <div slot="icon">Icon</div>
95
- </glide-core-button-group-button>
96
- </glide-core-button-group>`);
97
- const buttons = document.querySelectorAll('glide-core-button-group-button');
98
- expect(buttons[0].privateVariant).to.equal('icon-only');
99
- expect(buttons[1].privateVariant).to.equal('icon-only');
100
- });
101
- it('throws when its default slot is the wrong type', async () => {
102
- await expectArgumentError(() => {
103
- return fixture(html `
104
- <glide-core-button-group label="Label">
105
- <div></div>
106
- </glide-core-button-group>
107
- `);
108
- });
109
- await expectArgumentError(() => {
110
- return fixture(html `<glide-core-button-group label="Label"> </glide-core-button-group>`);
111
- });
112
- });
113
- it('selects the first button not disabled', async () => {
114
- await fixture(html `<glide-core-button-group>
115
- <glide-core-button-group-button
116
- label="One"
117
- disabled
118
- ></glide-core-button-group-button>
119
-
120
- <glide-core-button-group-button
121
- label="Two"
122
- ></glide-core-button-group-button>
123
-
124
- <glide-core-button-group-button
125
- label="Three"
126
- ></glide-core-button-group-button>
127
- </glide-core-button-group>`);
128
- const buttons = document.querySelectorAll('glide-core-button-group-button');
129
- expect(buttons[0].selected).to.be.false;
130
- expect(buttons[1].selected).to.be.true;
131
- expect(buttons[2].selected).to.be.false;
132
- });
133
- it('selects no buttons when all are disabled', async () => {
134
- await fixture(html `<glide-core-button-group>
135
- <glide-core-button-group-button
136
- label="One"
137
- disabled
138
- ></glide-core-button-group-button>
139
-
140
- <glide-core-button-group-button
141
- label="Two"
142
- disabled
143
- ></glide-core-button-group-button>
144
- </glide-core-button-group>`);
145
- const buttons = document.querySelectorAll('glide-core-button-group-button');
146
- expect(buttons[0].selected).to.be.false;
147
- expect(buttons[1].selected).to.be.false;
148
- });
@@ -1 +0,0 @@
1
- import './button-group.button.js';
@@ -1,241 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import './button-group.button.js';
3
- import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
4
- import { sendKeys } from '@web/test-runner-commands';
5
- import GlideCoreButtonGroup from './button-group.js';
6
- import GlideCoreButtonGroupButton from './button-group.button.js';
7
- import sinon from 'sinon';
8
- GlideCoreButtonGroup.shadowRootOptions.mode = 'open';
9
- GlideCoreButtonGroupButton.shadowRootOptions.mode = 'open';
10
- it('emits a "change" event when a button is clicked and not already selected', async () => {
11
- const component = await fixture(html `<glide-core-button-group>
12
- <glide-core-button-group-button
13
- label="One"
14
- ></glide-core-button-group-button>
15
-
16
- <glide-core-button-group-button
17
- label="Two"
18
- ></glide-core-button-group-button>
19
- </glide-core-button-group>`);
20
- const button = component.querySelector('glide-core-button-group-button:last-of-type');
21
- setTimeout(() => {
22
- button?.click();
23
- });
24
- const event = await oneEvent(component, 'change');
25
- expect(event instanceof Event).to.be.true;
26
- expect(event.bubbles).to.be.true;
27
- expect(event.target).to.equal(button);
28
- });
29
- it('emits an "input" event when a button is clicked and not already selected', async () => {
30
- const component = await fixture(html `<glide-core-button-group>
31
- <glide-core-button-group-button
32
- label="One"
33
- ></glide-core-button-group-button>
34
-
35
- <glide-core-button-group-button
36
- label="Two"
37
- ></glide-core-button-group-button>
38
- </glide-core-button-group>`);
39
- const button = component.querySelector('glide-core-button-group-button:last-of-type');
40
- setTimeout(() => {
41
- button?.click();
42
- });
43
- const event = await oneEvent(component, 'input');
44
- expect(event instanceof Event).to.be.true;
45
- expect(event.bubbles).to.be.true;
46
- expect(event.target).to.equal(button);
47
- });
48
- it('does not emit an "change" event when clicked button is clicked and already selected', async () => {
49
- const component = await fixture(html `<glide-core-button-group>
50
- <glide-core-button-group-button
51
- label="One"
52
- selected
53
- ></glide-core-button-group-button>
54
-
55
- <glide-core-button-group-button
56
- label="One"
57
- ></glide-core-button-group-button>
58
- </glide-core-button-group>`);
59
- const spy = sinon.spy();
60
- const button = component.querySelector('glide-core-button-group-button');
61
- component.addEventListener('change', spy);
62
- setTimeout(() => {
63
- button?.click();
64
- });
65
- await aTimeout(0);
66
- expect(spy.callCount).to.equal(0);
67
- });
68
- it('does not emit an "input" event when clicked button is clicked and already selected', async () => {
69
- const component = await fixture(html `<glide-core-button-group>
70
- <glide-core-button-group-button
71
- label="One"
72
- selected
73
- ></glide-core-button-group-button>
74
-
75
- <glide-core-button-group-button
76
- label="Two"
77
- ></glide-core-button-group-button>
78
- </glide-core-button-group>`);
79
- const spy = sinon.spy();
80
- const button = component.querySelector('glide-core-button-group-button');
81
- component.addEventListener('input', spy);
82
- setTimeout(() => {
83
- button?.click();
84
- });
85
- await aTimeout(0);
86
- expect(spy.callCount).to.equal(0);
87
- });
88
- it('emits a "change" event when arrowing', async () => {
89
- const component = await fixture(html `<glide-core-button-group>
90
- <glide-core-button-group-button
91
- label="One"
92
- ></glide-core-button-group-button>
93
-
94
- <glide-core-button-group-button
95
- label="Two"
96
- selected
97
- ></glide-core-button-group-button>
98
- </glide-core-button-group>`);
99
- const buttons = document.querySelectorAll('glide-core-button-group-button');
100
- buttons[0].focus();
101
- let event;
102
- sendKeys({ press: 'ArrowRight' });
103
- event = await oneEvent(component, 'change');
104
- expect(event instanceof Event).to.be.true;
105
- expect(event.bubbles).to.be.true;
106
- sendKeys({ press: 'ArrowLeft' });
107
- event = await oneEvent(component, 'change');
108
- expect(event instanceof Event).to.be.true;
109
- expect(event.bubbles).to.be.true;
110
- sendKeys({ press: 'ArrowDown' });
111
- event = await oneEvent(component, 'change');
112
- expect(event instanceof Event).to.be.true;
113
- expect(event.bubbles).to.be.true;
114
- sendKeys({ press: 'ArrowUp' });
115
- event = await oneEvent(component, 'change');
116
- expect(event instanceof Event).to.be.true;
117
- expect(event.bubbles).to.be.true;
118
- });
119
- it('emits an "input" event when arrowing', async () => {
120
- const component = await fixture(html `<glide-core-button-group>
121
- <glide-core-button-group-button
122
- label="One"
123
- ></glide-core-button-group-button>
124
-
125
- <glide-core-button-group-button
126
- label="Two"
127
- ></glide-core-button-group-button>
128
- </glide-core-button-group>`);
129
- const buttons = document.querySelectorAll('glide-core-button-group-button');
130
- buttons[0].focus();
131
- let event;
132
- sendKeys({ press: 'ArrowRight' });
133
- event = await oneEvent(component, 'input');
134
- expect(event instanceof Event).to.be.true;
135
- expect(event.bubbles).to.be.true;
136
- sendKeys({ press: 'ArrowLeft' });
137
- event = await oneEvent(component, 'input');
138
- expect(event instanceof Event).to.be.true;
139
- expect(event.bubbles).to.be.true;
140
- sendKeys({ press: 'ArrowDown' });
141
- event = await oneEvent(component, 'input');
142
- expect(event instanceof Event).to.be.true;
143
- expect(event.bubbles).to.be.true;
144
- sendKeys({ press: 'ArrowUp' });
145
- event = await oneEvent(component, 'input');
146
- expect(event instanceof Event).to.be.true;
147
- expect(event.bubbles).to.be.true;
148
- });
149
- it('emits a "change" event when a button is selected via Space', async () => {
150
- const component = await fixture(html `<glide-core-button-group>
151
- <glide-core-button-group-button
152
- label="One"
153
- selected
154
- ></glide-core-button-group-button>
155
-
156
- <glide-core-button-group-button
157
- label="Two"
158
- ></glide-core-button-group-button>
159
- </glide-core-button-group>`);
160
- const buttons = document.querySelectorAll('glide-core-button-group-button');
161
- buttons[1]?.focus();
162
- sendKeys({ press: ' ' });
163
- const event = await oneEvent(component, 'input');
164
- expect(event instanceof Event).to.be.true;
165
- expect(event.bubbles).to.be.true;
166
- });
167
- it('emits a "change" event when a button is selected programmatically', async () => {
168
- const component = await fixture(html `<glide-core-button-group>
169
- <glide-core-button-group-button
170
- label="One"
171
- selected
172
- ></glide-core-button-group-button>
173
-
174
- <glide-core-button-group-button
175
- label="Two"
176
- ></glide-core-button-group-button>
177
- </glide-core-button-group>`);
178
- const buttons = document.querySelectorAll('glide-core-button-group-button');
179
- setTimeout(() => {
180
- buttons[1].selected = true;
181
- });
182
- const event = await oneEvent(component, 'input');
183
- expect(event instanceof Event).to.be.true;
184
- expect(event.bubbles).to.be.true;
185
- });
186
- it('does not emit a "change" event when an already selected button is selected via Space', async () => {
187
- const component = await fixture(html `<glide-core-button-group>
188
- <glide-core-button-group-button
189
- label="One"
190
- selected
191
- ></glide-core-button-group-button>
192
-
193
- <glide-core-button-group-button
194
- label="Two"
195
- ></glide-core-button-group-button>
196
- </glide-core-button-group>`);
197
- const buttons = document.querySelectorAll('glide-core-button-group-button');
198
- buttons[0]?.focus();
199
- const spy = sinon.spy();
200
- component.addEventListener('change', spy);
201
- sendKeys({ press: ' ' });
202
- expect(spy.callCount).to.equal(0);
203
- });
204
- it('does not emit a "change" event a button is selected programmatically', async () => {
205
- const component = await fixture(html `<glide-core-button-group>
206
- <glide-core-button-group-button
207
- label="One"
208
- selected
209
- ></glide-core-button-group-button>
210
-
211
- <glide-core-button-group-button
212
- label="Two"
213
- ></glide-core-button-group-button>
214
- </glide-core-button-group>`);
215
- const buttons = document.querySelectorAll('glide-core-button-group-button');
216
- const spy = sinon.spy();
217
- component.addEventListener('change', spy);
218
- setTimeout(() => {
219
- buttons[1].selected = true;
220
- });
221
- expect(spy.callCount).to.equal(0);
222
- });
223
- it('does not emit a "input" event a button is selected programmatically', async () => {
224
- const component = await fixture(html `<glide-core-button-group>
225
- <glide-core-button-group-button
226
- label="One"
227
- selected
228
- ></glide-core-button-group-button>
229
-
230
- <glide-core-button-group-button
231
- label="Two"
232
- ></glide-core-button-group-button>
233
- </glide-core-button-group>`);
234
- const buttons = document.querySelectorAll('glide-core-button-group-button');
235
- const spy = sinon.spy();
236
- component.addEventListener('input', spy);
237
- setTimeout(() => {
238
- buttons[1].selected = true;
239
- });
240
- expect(spy.callCount).to.equal(0);
241
- });
@@ -1 +0,0 @@
1
- import './button-group.button.js';
@@ -1,39 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import './button-group.button.js';
3
- import { expect, fixture, html } from '@open-wc/testing';
4
- import { sendKeys } from '@web/test-runner-commands';
5
- import GlideCoreButtonGroup from './button-group.js';
6
- import GlideCoreButtonGroupButton from './button-group.button.js';
7
- GlideCoreButtonGroup.shadowRootOptions.mode = 'open';
8
- GlideCoreButtonGroupButton.shadowRootOptions.mode = 'open';
9
- it('moves focus', async () => {
10
- await fixture(html `<glide-core-button-group>
11
- <glide-core-button-group-button
12
- label="One"
13
- ></glide-core-button-group-button>
14
-
15
- <glide-core-button-group-button
16
- label="Two"
17
- disabled
18
- ></glide-core-button-group-button>
19
-
20
- <glide-core-button-group-button
21
- label="Three"
22
- ></glide-core-button-group-button>
23
-
24
- <glide-core-button-group-button
25
- label="Four"
26
- selected
27
- ></glide-core-button-group-button>
28
- </glide-core-button-group>`);
29
- const buttons = document.querySelectorAll('glide-core-button-group-button');
30
- buttons[3]?.focus();
31
- await sendKeys({ press: 'ArrowRight' });
32
- expect(buttons[0]).to.have.focus;
33
- await sendKeys({ press: 'ArrowUp' });
34
- expect(buttons[3]).to.have.focus;
35
- await sendKeys({ press: 'ArrowLeft' });
36
- expect(buttons[2]).to.have.focus;
37
- await sendKeys({ press: 'ArrowDown' });
38
- expect(buttons[3]).to.have.focus;
39
- });
@@ -1 +0,0 @@
1
- import './button-group.button.js';
@@ -1,91 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import './button-group.button.js';
3
- import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
4
- import { sendKeys } from '@web/test-runner-commands';
5
- import GlideCoreButtonGroup from './button-group.js';
6
- import GlideCoreButtonGroupButton from './button-group.button.js';
7
- GlideCoreButtonGroup.shadowRootOptions.mode = 'open';
8
- GlideCoreButtonGroupButton.shadowRootOptions.mode = 'open';
9
- it('selects a button when clicked', async () => {
10
- const component = await fixture(html `<glide-core-button-group>
11
- <glide-core-button-group-button
12
- label="One"
13
- selected
14
- ></glide-core-button-group-button>
15
-
16
- <glide-core-button-group-button
17
- label="Two"
18
- ></glide-core-button-group-button>
19
- </glide-core-button-group>`);
20
- const buttons = document.querySelectorAll('glide-core-button-group-button');
21
- buttons[1]?.click();
22
- await elementUpdated(component);
23
- expect(buttons[0].selected).to.be.false;
24
- expect(buttons[1].selected).to.be.true;
25
- });
26
- it('selects buttons when arrowing', async () => {
27
- await fixture(html `<glide-core-button-group>
28
- <glide-core-button-group-button
29
- label="One"
30
- disabled
31
- ></glide-core-button-group-button>
32
-
33
- <glide-core-button-group-button
34
- label="Two"
35
- selected
36
- ></glide-core-button-group-button>
37
-
38
- <glide-core-button-group-button
39
- label="Three"
40
- ></glide-core-button-group-button>
41
-
42
- <glide-core-button-group-button
43
- label="Four"
44
- disabled
45
- ></glide-core-button-group-button>
46
- </glide-core-button-group>`);
47
- const buttons = document.querySelectorAll('glide-core-button-group-button');
48
- buttons[1]?.focus();
49
- await sendKeys({ press: 'ArrowRight' });
50
- expect(buttons[2].selected).to.be.true;
51
- await sendKeys({ press: 'ArrowDown' });
52
- expect(buttons[1].selected).to.be.true;
53
- await sendKeys({ press: 'ArrowLeft' });
54
- expect(buttons[2].selected).to.be.true;
55
- await sendKeys({ press: 'ArrowUp' });
56
- expect(buttons[1].selected).to.be.true;
57
- });
58
- it('selects a button on Space', async () => {
59
- await fixture(html `<glide-core-button-group>
60
- <glide-core-button-group-button
61
- label="One"
62
- selected
63
- ></glide-core-button-group-button>
64
-
65
- <glide-core-button-group-button
66
- label="Two"
67
- ></glide-core-button-group-button>
68
- </glide-core-button-group>`);
69
- const buttons = document.querySelectorAll('glide-core-button-group-button');
70
- buttons[1]?.focus();
71
- await sendKeys({ press: ' ' });
72
- expect(buttons[0].selected).to.be.false;
73
- expect(buttons[1].selected).to.be.true;
74
- });
75
- it('does not select a disabled button', async () => {
76
- await fixture(html `<glide-core-button-group>
77
- <glide-core-button-group-button
78
- label="One"
79
- selected
80
- ></glide-core-button-group-button>
81
-
82
- <glide-core-button-group-button
83
- label="Two"
84
- disabled
85
- ></glide-core-button-group-button>
86
- </glide-core-button-group>`);
87
- const buttons = document.querySelectorAll('glide-core-button-group-button');
88
- buttons[1]?.click();
89
- expect(buttons[0].selected).to.be.true;
90
- expect(buttons[1].selected).to.be.false;
91
- });
@@ -1,7 +0,0 @@
1
- import './button.js';
2
- import './icons/storybook.js';
3
- import type { Meta, StoryObj } from '@storybook/web-components';
4
- declare const meta: Meta;
5
- export default meta;
6
- export declare const Button: StoryObj;
7
- export declare const WithIcons: StoryObj;
@@ -1 +0,0 @@
1
- import './button.js';
@@ -1,69 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import './button.js';
3
- import { expect, fixture, html } from '@open-wc/testing';
4
- import GlideCoreButton from './button.js';
5
- GlideCoreButton.shadowRootOptions.mode = 'open';
6
- it('registers', async () => {
7
- expect(window.customElements.get('glide-core-button')).to.equal(GlideCoreButton);
8
- });
9
- it('is accessible', async () => {
10
- const component = await fixture(html `<glide-core-button label="Label"></glide-core-button>`);
11
- await expect(component).to.be.accessible();
12
- });
13
- it('has defaults', async () => {
14
- const component = await fixture(html `
15
- <glide-core-button label="Label"></glide-core-button>
16
- `);
17
- expect(component.ariaControls).to.be.null;
18
- expect(component.ariaExpanded).to.be.null;
19
- expect(component.ariaHasPopup).to.be.null;
20
- expect(component.autofocus).to.be.false;
21
- expect(component.disabled).to.be.false;
22
- expect(component.formAction).to.be.empty.string;
23
- expect(component.formEncType).to.be.empty.string;
24
- expect(component.formMethod).to.be.empty.string;
25
- expect(component.formNoValidate).to.be.false;
26
- expect(component.name).to.be.empty.string;
27
- expect(component.popoverTarget).to.be.undefined;
28
- expect(component.popoverTargetAction).to.be.empty.string;
29
- expect(component.value).to.be.empty.string;
30
- expect(component.type).to.equal('button');
31
- expect(component.hasAttribute('autofocus')).to.be.false;
32
- expect(component.getAttribute('aria-controls')).to.be.null;
33
- expect(component.getAttribute('aria-expanded')).to.be.null;
34
- expect(component.getAttribute('aria-haspopup')).to.be.null;
35
- expect(component.hasAttribute('disabled')).to.be.false;
36
- expect(component.getAttribute('formaction')).to.be.empty.string;
37
- expect(component.getAttribute('formenctype')).to.be.empty.string;
38
- expect(component.getAttribute('formmethod')).to.be.empty.string;
39
- expect(component.hasAttribute('formnovalidate')).to.be.false;
40
- expect(component.getAttribute('name')).to.be.empty.string;
41
- expect(component.getAttribute('popovertarget')).to.be.null;
42
- expect(component.getAttribute('popovertargetaction')).to.be.empty.string;
43
- expect(component.getAttribute('type')).to.equal('button');
44
- expect(component.getAttribute('value')).to.be.empty.string;
45
- const button = component.shadowRoot?.querySelector('button');
46
- expect(button?.getAttribute('aria-controls')).to.be.null;
47
- expect(button?.ariaExpanded).to.be.null;
48
- expect(button?.ariaHasPopup).to.be.null;
49
- expect(button?.disabled).to.be.false;
50
- });
51
- it('delegates focus', async () => {
52
- const component = await fixture(html `<glide-core-button label="Label"></glide-core-button>`);
53
- component.focus();
54
- expect(component.shadowRoot?.activeElement).to.equal(component.shadowRoot?.querySelector('button'));
55
- });
56
- it('has `#onPrefixSlotChange` coverage', async () => {
57
- await fixture(html `
58
- <glide-core-button label="Label">
59
- <span slot="prefix-icon">Prefix</span>
60
- </glide-core-button>
61
- `);
62
- });
63
- it('has `#onSuffixIconSlotChange` coverage', async () => {
64
- await fixture(html `
65
- <glide-core-button label="Label">
66
- <span slot="suffix-icon">Suffix</span>
67
- </glide-core-button>
68
- `);
69
- });
@@ -1 +0,0 @@
1
- import './button.js';