@lion/ui 0.7.2 → 0.7.3

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 (104) hide show
  1. package/components/button/test-suites/LionButtonReset.suite.js +7 -9
  2. package/components/calendar/test/lion-calendar.test.js +26 -30
  3. package/components/checkbox-group/test-suites/CheckboxIndeterminate.suite.js +3 -0
  4. package/components/combobox/test/lion-combobox.test.js +32 -32
  5. package/components/core/src/SlotMixin.js +7 -1
  6. package/components/form/test/lion-form.test.js +4 -4
  7. package/components/form-core/test-suites/ValidateMixin.suite.js +1 -0
  8. package/components/form-core/test-suites/form-group/FormGroupMixin.suite.js +18 -18
  9. package/components/form-integrations/test/dialog-integrations.test.js +6 -4
  10. package/components/helpers/src/SbActionLogger.js +11 -2
  11. package/components/icon/test/lion-icon.test.js +12 -14
  12. package/components/input-amount/test/lion-input-amount.test.js +10 -14
  13. package/components/input-datepicker/test/lion-input-datepicker.test.js +4 -4
  14. package/components/input-file/test/lion-input-file.test.js +3 -3
  15. package/components/input-tel-dropdown/test/LionInputTelDropdown.test.js +23 -23
  16. package/components/listbox/test-suites/ListboxMixin.suite.js +10 -3
  17. package/components/localize/src/date/utils/normalizeIntlDate.js +13 -2
  18. package/components/progress-indicator/test/lion-progress-indicator.test.js +42 -46
  19. package/components/select-rich/test/lion-select-rich.test.js +6 -8
  20. package/components/steps/test/lion-step.test.js +5 -7
  21. package/components/switch/test/lion-switch.test.js +5 -7
  22. package/custom-elements.json +517 -5134
  23. package/dist-types/components/button/test-suites/LionButtonReset.suite.d.ts.map +1 -1
  24. package/dist-types/components/checkbox-group/test-suites/CheckboxIndeterminate.suite.d.ts.map +1 -1
  25. package/dist-types/components/core/src/SlotMixin.d.ts.map +1 -1
  26. package/dist-types/components/form-core/test-suites/ValidateMixin.suite.d.ts.map +1 -1
  27. package/dist-types/components/helpers/src/SbActionLogger.d.ts.map +1 -1
  28. package/dist-types/components/input-tel-dropdown/test/LionInputTelDropdown.test.d.ts.map +1 -1
  29. package/dist-types/components/listbox/test-suites/ListboxMixin.suite.d.ts.map +1 -1
  30. package/dist-types/components/localize/src/date/utils/normalizeIntlDate.d.ts.map +1 -1
  31. package/dist-types/tsconfig.tsbuildinfo +1 -1
  32. package/docs/components/button/use-cases.md +11 -10
  33. package/docs/components/checkbox-group/overview.md +2 -2
  34. package/docs/components/collapsible/assets/applyDemoCollapsibleStyles.js +6 -2
  35. package/docs/components/collapsible/overview.md +1 -1
  36. package/docs/components/combobox/overview.md +4 -3
  37. package/docs/components/combobox/src/gh-combobox/gh-button.js +3 -1
  38. package/docs/components/combobox/src/gh-combobox/gh-combobox.js +9 -2
  39. package/docs/components/combobox/src/google-combobox/google-combobox.js +6 -8
  40. package/docs/components/combobox/src/md-combobox/MdFieldMixin.js +7 -3
  41. package/docs/components/combobox/src/md-combobox/style/md-ripple.js +1 -0
  42. package/docs/components/combobox/src/wa-combobox/wa-combobox.js +15 -3
  43. package/docs/components/combobox/use-cases.md +19 -17
  44. package/docs/components/dialog/overview.md +1 -1
  45. package/docs/components/fieldset/overview.md +5 -5
  46. package/docs/components/form/overview.md +3 -3
  47. package/docs/components/icon/use-cases.md +1 -1
  48. package/docs/components/input/overview.md +1 -1
  49. package/docs/components/input/use-cases.md +3 -2
  50. package/docs/components/input-amount/overview.md +3 -3
  51. package/docs/components/input-date/overview.md +3 -3
  52. package/docs/components/input-datepicker/overview.md +5 -5
  53. package/docs/components/input-email/overview.md +2 -2
  54. package/docs/components/input-file/overview.md +1 -1
  55. package/docs/components/input-iban/overview.md +2 -2
  56. package/docs/components/input-range/overview.md +2 -2
  57. package/docs/components/input-stepper/overview.md +1 -1
  58. package/docs/components/input-tel/overview.md +1 -1
  59. package/docs/components/input-tel/use-cases.md +6 -6
  60. package/docs/components/input-tel-dropdown/overview.md +1 -1
  61. package/docs/components/input-tel-dropdown/src/intl-input-tel-dropdown.js +15 -5
  62. package/docs/components/listbox/use-cases.md +1 -1
  63. package/docs/components/progress-indicator/examples.md +11 -11
  64. package/docs/components/radio-group/overview.md +3 -3
  65. package/docs/components/select/use-cases.md +1 -1
  66. package/docs/components/select-rich/use-cases.md +1 -1
  67. package/docs/components/tabs/examples.md +1 -1
  68. package/docs/components/tabs/src/lea-tab-panel.js +3 -1
  69. package/docs/components/tabs/src/lea-tab.js +7 -2
  70. package/docs/fundamentals/index.md +4 -4
  71. package/docs/fundamentals/node-tools/providence-analytics/LocalConfiguration.md +1 -1
  72. package/docs/fundamentals/node-tools/providence-analytics/QueryResult.md +1 -1
  73. package/docs/fundamentals/node-tools/providence-analytics/analyzer.md +1 -1
  74. package/docs/fundamentals/node-tools/providence-analytics/assets/_mermaid.svg.js +32 -8
  75. package/docs/fundamentals/node-tools/providence-analytics/dashboard.md +1 -1
  76. package/docs/fundamentals/node-tools/providence-analytics/overview.md +3 -3
  77. package/docs/fundamentals/node-tools/publish-docs/overview.md +3 -3
  78. package/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview.md +2 -2
  79. package/docs/fundamentals/rationales/accessibility.md +1 -1
  80. package/docs/fundamentals/systems/core/SlotMixin.md +1 -1
  81. package/docs/fundamentals/systems/core/overview.md +1 -1
  82. package/docs/fundamentals/systems/form/formatting-and-parsing.md +4 -4
  83. package/docs/fundamentals/systems/form/model-value.md +1 -1
  84. package/docs/fundamentals/systems/form/overview.md +28 -28
  85. package/docs/fundamentals/systems/form/validate.md +3 -3
  86. package/docs/fundamentals/systems/localize/overview.md +4 -4
  87. package/docs/fundamentals/systems/overlays/_configuration-positioning.md +0 -9
  88. package/docs/fundamentals/systems/overlays/_edge-cases.md +74 -80
  89. package/docs/fundamentals/systems/overlays/configuration.md +2 -2
  90. package/docs/fundamentals/systems/overlays/overview.md +5 -5
  91. package/docs/fundamentals/systems/overlays/use-cases.md +5 -8
  92. package/docs/fundamentals/tools/helpers/action-logger.md +3 -6
  93. package/docs/fundamentals/tools/helpers/overview.md +1 -1
  94. package/docs/fundamentals/tools/singleton-manager/example-complex/demo-app.js +3 -1
  95. package/docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js +3 -1
  96. package/docs/fundamentals/tools/singleton-manager/example-success/demo-app.js +3 -1
  97. package/docs/fundamentals/tools/singleton-manager/overview.md +4 -4
  98. package/docs/guides/how-to/create-a-custom-field.md +5 -5
  99. package/docs/guides/how-to/create-a-form.md +4 -4
  100. package/docs/guides/how-to/extend-a-native-input.md +2 -2
  101. package/docs/guides/index.md +8 -8
  102. package/docs/guides/principles/index.md +5 -5
  103. package/docs/guides/principles/styling.md +1 -1
  104. package/package.json +2 -2
@@ -24,9 +24,9 @@ describe('lion-progress-indicator', () => {
24
24
  });
25
25
 
26
26
  it('can override a label with "aria-label"', async () => {
27
- const el = await fixture(
28
- html` <lion-progress-indicator aria-label="foo"></lion-progress-indicator> `,
29
- );
27
+ const el = await fixture(html`
28
+ <lion-progress-indicator aria-label="foo"></lion-progress-indicator>
29
+ `);
30
30
  await el.localizeNamespacesLoaded;
31
31
  expect(el.getAttribute('aria-label')).to.equal('foo');
32
32
  el.setAttribute('aria-label', 'bar');
@@ -37,9 +37,9 @@ describe('lion-progress-indicator', () => {
37
37
  });
38
38
 
39
39
  it('can override a label with "aria-labelledby"', async () => {
40
- const el = await fixture(
41
- html` <lion-progress-indicator aria-labelledby="foo-id"></lion-progress-indicator> `,
42
- );
40
+ const el = await fixture(html`
41
+ <lion-progress-indicator aria-labelledby="foo-id"></lion-progress-indicator>
42
+ `);
43
43
  await el.localizeNamespacesLoaded;
44
44
  expect(el.getAttribute('aria-labelledby')).to.equal('foo-id');
45
45
  expect(el.hasAttribute('aria-label')).to.be.false;
@@ -62,9 +62,9 @@ describe('lion-progress-indicator', () => {
62
62
  });
63
63
 
64
64
  it('keeps own aria-label when switch to determinate state', async () => {
65
- const el = await fixture(
66
- html` <lion-progress-indicator aria-label="foo"></lion-progress-indicator> `,
67
- );
65
+ const el = await fixture(html`
66
+ <lion-progress-indicator aria-label="foo"></lion-progress-indicator>
67
+ `);
68
68
  expect(el.getAttribute('aria-label')).to.equal('foo');
69
69
  el.setAttribute('value', '30');
70
70
  await el.updateComplete;
@@ -74,16 +74,16 @@ describe('lion-progress-indicator', () => {
74
74
 
75
75
  describe('determinate', async () => {
76
76
  it('is determinate when it has a value', async () => {
77
- const el = await fixture(
78
- html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
79
- );
77
+ const el = await fixture(html`
78
+ <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
79
+ `);
80
80
  expect(el.indeterminate).to.be.false;
81
81
  });
82
82
 
83
83
  it('can update value', async () => {
84
- const el = await fixture(
85
- html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
86
- );
84
+ const el = await fixture(html`
85
+ <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
86
+ `);
87
87
  expect(el.getAttribute('aria-valuenow')).to.equal('25');
88
88
  el.value = 30;
89
89
  await el.updateComplete;
@@ -91,9 +91,9 @@ describe('lion-progress-indicator', () => {
91
91
  });
92
92
 
93
93
  it('can update min', async () => {
94
- const el = await fixture(
95
- html` <lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator> `,
96
- );
94
+ const el = await fixture(html`
95
+ <lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator>
96
+ `);
97
97
  expect(el.getAttribute('aria-valuemin')).to.equal('0');
98
98
  el.min = 30;
99
99
  await el.updateComplete;
@@ -101,9 +101,9 @@ describe('lion-progress-indicator', () => {
101
101
  });
102
102
 
103
103
  it('can update max', async () => {
104
- const el = await fixture(
105
- html` <lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator> `,
106
- );
104
+ const el = await fixture(html`
105
+ <lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator>
106
+ `);
107
107
  expect(el.getAttribute('aria-valuemax')).to.equal('100');
108
108
  el.max = 70;
109
109
  await el.updateComplete;
@@ -111,9 +111,9 @@ describe('lion-progress-indicator', () => {
111
111
  });
112
112
 
113
113
  it('min & max limits value', async () => {
114
- const el = await fixture(
115
- html` <lion-progress-indicator value="150" aria-label="foo"></lion-progress-indicator> `,
116
- );
114
+ const el = await fixture(html`
115
+ <lion-progress-indicator value="150" aria-label="foo"></lion-progress-indicator>
116
+ `);
117
117
  // sets to default max: 100
118
118
  expect(el.getAttribute('aria-valuenow')).to.equal('100');
119
119
  el.value = -20;
@@ -124,14 +124,12 @@ describe('lion-progress-indicator', () => {
124
124
 
125
125
  // TODO make this feature available
126
126
  it.skip('supports valuetext', async () => {
127
- const el = await fixture(
128
- html`
129
- <lion-progress-indicator
130
- value="8"
131
- value-text="{value}% (34 minutes) remaining"
132
- ></lion-progress-indicator>
133
- `,
134
- );
127
+ const el = await fixture(html`
128
+ <lion-progress-indicator
129
+ value="8"
130
+ value-text="{value}% (34 minutes) remaining"
131
+ ></lion-progress-indicator>
132
+ `);
135
133
  expect(el.getAttribute('aria-valuetext')).to.equal('8% (34 minutes) remaining');
136
134
  });
137
135
 
@@ -179,11 +177,9 @@ describe('lion-progress-indicator', () => {
179
177
 
180
178
  describe('Subclasers', () => {
181
179
  it('can use _progressPercentage getter to get the progress percentage', async () => {
182
- const el = await fixture(
183
- html`
184
- <lion-progress-indicator max="50" value="10" aria-label="foo"></lion-progress-indicator>
185
- `,
186
- );
180
+ const el = await fixture(html`
181
+ <lion-progress-indicator max="50" value="10" aria-label="foo"></lion-progress-indicator>
182
+ `);
187
183
  expect(el._progressPercentage).to.equal(20);
188
184
  });
189
185
  });
@@ -203,23 +199,23 @@ describe('lion-progress-indicator', () => {
203
199
 
204
200
  describe('determinate', () => {
205
201
  it('passes a11y test', async () => {
206
- const el = await fixture(
207
- html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
208
- );
202
+ const el = await fixture(html`
203
+ <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
204
+ `);
209
205
  await expect(el).to.be.accessible();
210
206
  });
211
207
 
212
208
  it('once value is set', async () => {
213
- const el = await fixture(
214
- html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
215
- );
209
+ const el = await fixture(html`
210
+ <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
211
+ `);
216
212
  expect(el.getAttribute('aria-valuenow')).to.equal('25');
217
213
  });
218
214
 
219
215
  it('allows to set min & max values', async () => {
220
- const el = await fixture(
221
- html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
222
- );
216
+ const el = await fixture(html`
217
+ <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
218
+ `);
223
219
  expect(el.getAttribute('aria-valuemin')).to.equal('0');
224
220
  expect(el.getAttribute('aria-valuemax')).to.equal('100');
225
221
  });
@@ -444,9 +444,9 @@ describe('lion-select-rich', () => {
444
444
  });
445
445
 
446
446
  it('adds focus to element with [role=listbox] when trapsKeyboardFocus is true', async () => {
447
- const el = await fixture(
448
- html` <lion-select-rich .config=${{ trapsKeyboardFocus: true }}></lion-select-rich> `,
449
- );
447
+ const el = await fixture(html`
448
+ <lion-select-rich .config=${{ trapsKeyboardFocus: true }}></lion-select-rich>
449
+ `);
450
450
  const { _listboxNode } = getSelectRichMembers(el);
451
451
  expect(document.activeElement).to.not.equal(_listboxNode);
452
452
 
@@ -503,11 +503,9 @@ describe('lion-select-rich', () => {
503
503
  });
504
504
 
505
505
  it('does not close the listbox with [Tab] key once opened when trapsKeyboardFocus is true', async () => {
506
- const el = await fixture(
507
- html`
508
- <lion-select-rich opened .config=${{ trapsKeyboardFocus: true }}> </lion-select-rich>
509
- `,
510
- );
506
+ const el = await fixture(html`
507
+ <lion-select-rich opened .config=${{ trapsKeyboardFocus: true }}> </lion-select-rich>
508
+ `);
511
509
  // tab can only be caught via keydown
512
510
  const { _listboxNode } = getSelectRichMembers(el);
513
511
  _listboxNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
@@ -50,13 +50,11 @@ describe('lion-step', () => {
50
50
  });
51
51
 
52
52
  it('is hidden when attribute hidden is true', async () => {
53
- const el = await fixture(
54
- html`
55
- <fake-lion-steps>
56
- <lion-step hidden>Step 1</lion-step>
57
- </fake-lion-steps>
58
- `,
59
- );
53
+ const el = await fixture(html`
54
+ <fake-lion-steps>
55
+ <lion-step hidden>Step 1</lion-step>
56
+ </fake-lion-steps>
57
+ `);
60
58
  expect(el.children[0]).not.to.be.displayed;
61
59
  });
62
60
 
@@ -160,13 +160,11 @@ describe('lion-switch', () => {
160
160
  it('should not propagate the "checked-changed" event further up when caught by switch', async () => {
161
161
  const handlerSpy = sinon.spy();
162
162
  const parentHandlerSpy = sinon.spy();
163
- const el = await fixture(
164
- html`
165
- <div @checked-changed=${parentHandlerSpy}>
166
- <lion-switch @checked-changed=${handlerSpy} .choiceValue=${'foo'}></lion-switch>
167
- </div>
168
- `,
169
- );
163
+ const el = await fixture(html`
164
+ <div @checked-changed=${parentHandlerSpy}>
165
+ <lion-switch @checked-changed=${handlerSpy} .choiceValue=${'foo'}></lion-switch>
166
+ </div>
167
+ `);
170
168
  const switchEl = /** @type {LionSwitch} */ (el.firstElementChild);
171
169
  switchEl.checked = true;
172
170
  await switchEl.updateComplete;