openproject-primer_view_components 0.22.1 → 0.23.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (50) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +34 -0
  3. data/app/assets/javascripts/primer_view_components.js +1 -1
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  5. data/app/assets/styles/primer_view_components.css +1 -1
  6. data/app/assets/styles/primer_view_components.css.map +1 -1
  7. data/app/components/primer/alpha/action_bar_element.js +16 -10
  8. data/app/components/primer/alpha/action_bar_element.ts +10 -4
  9. data/app/components/primer/alpha/action_menu/action_menu_element.js +16 -20
  10. data/app/components/primer/alpha/action_menu/action_menu_element.ts +4 -1
  11. data/app/components/primer/alpha/banner.html.erb +1 -2
  12. data/app/components/primer/alpha/banner.rb +21 -0
  13. data/app/components/primer/alpha/dialog.rb +0 -1
  14. data/app/components/primer/alpha/modal_dialog.js +11 -10
  15. data/app/components/primer/alpha/modal_dialog.ts +3 -0
  16. data/app/components/primer/alpha/segmented_control.js +2 -3
  17. data/app/components/primer/alpha/toggle_switch.js +2 -2
  18. data/app/components/primer/alpha/toggle_switch.ts +2 -2
  19. data/app/components/primer/alpha/tool_tip.js +6 -7
  20. data/app/components/primer/alpha/tool_tip.ts +1 -0
  21. data/app/components/primer/beta/button.css +1 -1
  22. data/app/components/primer/beta/button.css.json +0 -1
  23. data/app/components/primer/beta/button.css.map +1 -1
  24. data/app/components/primer/beta/button.pcss +1 -5
  25. data/app/components/primer/beta/button_group.rb +53 -1
  26. data/app/components/primer/beta/clipboard_copy.ts +1 -1
  27. data/app/components/primer/beta/flash.rb +3 -1
  28. data/app/components/primer/beta/nav_list.js +8 -10
  29. data/app/components/primer/beta/nav_list.ts +2 -0
  30. data/app/components/primer/beta/nav_list_group_element.js +2 -3
  31. data/app/components/primer/dialog_helper.js +39 -20
  32. data/app/components/primer/dialog_helper.ts +40 -14
  33. data/app/components/primer/focus_group.js +9 -12
  34. data/app/components/primer/focus_group.ts +1 -1
  35. data/lib/primer/deprecations.yml +5 -0
  36. data/lib/primer/forms/primer_multi_input.js +2 -3
  37. data/lib/primer/forms/primer_text_field.js +2 -4
  38. data/lib/primer/view_components/version.rb +2 -2
  39. data/previews/primer/alpha/dialog_preview/dialog_inside_overlay.html.erb +13 -2
  40. data/previews/primer/alpha/dialog_preview.rb +1 -0
  41. data/previews/primer/beta/button_group_preview/with_menu_button.html.erb +7 -0
  42. data/previews/primer/beta/button_group_preview.rb +6 -0
  43. data/static/arguments.json +23 -1
  44. data/static/audited_at.json +1 -0
  45. data/static/constants.json +3 -0
  46. data/static/info_arch.json +69 -5
  47. data/static/previews.json +15 -2
  48. data/static/statuses.json +2 -1
  49. metadata +4 -4
  50. data/previews/primer/beta/button_group_preview/action_menus.html.erb +0 -8
@@ -50,12 +50,11 @@ let ActionBarElement = class ActionBarElement extends HTMLElement {
50
50
  _ActionBarElement_focusZoneAbortController.set(this, null);
51
51
  }
52
52
  connectedCallback() {
53
- var _a, _b;
54
53
  // Calculate the width of all the items before hiding anything
55
54
  for (const item of this.items) {
56
55
  const width = item.getBoundingClientRect().width;
57
- const marginLeft = parseInt((_a = window.getComputedStyle(item)) === null || _a === void 0 ? void 0 : _a.marginLeft, 10);
58
- const marginRight = parseInt((_b = window.getComputedStyle(item)) === null || _b === void 0 ? void 0 : _b.marginRight, 10);
56
+ const marginLeft = parseInt(window.getComputedStyle(item)?.marginLeft, 10);
57
+ const marginRight = parseInt(window.getComputedStyle(item)?.marginRight, 10);
59
58
  item.setAttribute('data-offset-width', `${width + marginLeft + marginRight}`);
60
59
  }
61
60
  resizeObserver.observe(this);
@@ -73,11 +72,10 @@ let ActionBarElement = class ActionBarElement extends HTMLElement {
73
72
  instersectionObserver.unobserve(this);
74
73
  }
75
74
  menuItemClick(event) {
76
- var _a;
77
75
  const currentTarget = event.currentTarget;
78
- const id = currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.getAttribute('data-for');
76
+ const id = currentTarget?.getAttribute('data-for');
79
77
  if (id) {
80
- (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.click();
78
+ document.getElementById(id)?.click();
81
79
  }
82
80
  }
83
81
  update() {
@@ -140,12 +138,20 @@ _ActionBarElement_firstItem_get = function _ActionBarElement_firstItem_get() {
140
138
  return foundItem;
141
139
  };
142
140
  _ActionBarElement_showItem = function _ActionBarElement_showItem(index) {
143
- this.items[index].style.setProperty('visibility', 'visible');
144
- __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index].hidden = true;
141
+ const item = this.items[index];
142
+ const menuItem = __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index];
143
+ if (!item || !menuItem)
144
+ return;
145
+ item.style.setProperty('visibility', 'visible');
146
+ menuItem.hidden = true;
145
147
  };
146
148
  _ActionBarElement_hideItem = function _ActionBarElement_hideItem(index) {
147
- this.items[index].style.setProperty('visibility', 'hidden');
148
- __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index].hidden = false;
149
+ const item = this.items[index];
150
+ const menuItem = __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index];
151
+ if (!item || !menuItem)
152
+ return;
153
+ item.style.setProperty('visibility', 'hidden');
154
+ menuItem.hidden = false;
149
155
  };
150
156
  _ActionBarElement_menuItems_get = function _ActionBarElement_menuItems_get() {
151
157
  return this.moreMenu.querySelectorAll('[role="menu"] > li');
@@ -145,13 +145,19 @@ class ActionBarElement extends HTMLElement {
145
145
  }
146
146
 
147
147
  #showItem(index: number) {
148
- this.items[index].style.setProperty('visibility', 'visible')
149
- this.#menuItems[index]!.hidden = true
148
+ const item = this.items[index]
149
+ const menuItem = this.#menuItems[index]
150
+ if (!item || !menuItem) return
151
+ item.style.setProperty('visibility', 'visible')
152
+ menuItem.hidden = true
150
153
  }
151
154
 
152
155
  #hideItem(index: number) {
153
- this.items[index].style.setProperty('visibility', 'hidden')
154
- this.#menuItems[index]!.hidden = false
156
+ const item = this.items[index]
157
+ const menuItem = this.#menuItems[index]
158
+ if (!item || !menuItem) return
159
+ item.style.setProperty('visibility', 'hidden')
160
+ menuItem.hidden = false
155
161
  }
156
162
 
157
163
  get #menuItems(): NodeListOf<HTMLElement> {
@@ -56,12 +56,10 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
56
56
  this.toggleAttribute('data-dynamic-label', value);
57
57
  }
58
58
  get popoverElement() {
59
- var _a;
60
- return ((_a = this.invokerElement) === null || _a === void 0 ? void 0 : _a.popoverTargetElement) || null;
59
+ return this.invokerElement?.popoverTargetElement || null;
61
60
  }
62
61
  get invokerElement() {
63
- var _a;
64
- const id = (_a = this.querySelector('[role=menu]')) === null || _a === void 0 ? void 0 : _a.id;
62
+ const id = this.querySelector('[role=menu]')?.id;
65
63
  if (!id)
66
64
  return null;
67
65
  for (const el of this.querySelectorAll(`[aria-controls]`)) {
@@ -82,22 +80,21 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
82
80
  for (const selectedItem of selectedItems) {
83
81
  const labelEl = selectedItem.querySelector('.ActionListItem-label');
84
82
  results.push({
85
- label: labelEl === null || labelEl === void 0 ? void 0 : labelEl.textContent,
86
- value: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.getAttribute('data-value'),
83
+ label: labelEl?.textContent,
84
+ value: selectedItem?.getAttribute('data-value'),
87
85
  element: selectedItem,
88
86
  });
89
87
  }
90
88
  return results;
91
89
  }
92
90
  connectedCallback() {
93
- var _a;
94
91
  const { signal } = (__classPrivateFieldSet(this, _ActionMenuElement_abortController, new AbortController(), "f"));
95
92
  this.addEventListener('keydown', this, { signal });
96
93
  this.addEventListener('click', this, { signal });
97
94
  this.addEventListener('mouseover', this, { signal });
98
95
  this.addEventListener('focusout', this, { signal });
99
96
  this.addEventListener('mousedown', this, { signal });
100
- (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this, { signal });
97
+ this.popoverElement?.addEventListener('toggle', this, { signal });
101
98
  __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
102
99
  __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateInput).call(this);
103
100
  __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_softDisableItems).call(this);
@@ -111,11 +108,10 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
111
108
  __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f").abort();
112
109
  }
113
110
  handleEvent(event) {
114
- var _a, _b, _c;
115
- const targetIsInvoker = (_a = this.invokerElement) === null || _a === void 0 ? void 0 : _a.contains(event.target);
111
+ const targetIsInvoker = this.invokerElement?.contains(event.target);
116
112
  const eventIsActivation = __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivation).call(this, event);
117
113
  if (event.type === 'toggle' && event.newState === 'open') {
118
- (_b = __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get)) === null || _b === void 0 ? void 0 : _b.focus();
114
+ __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get)?.focus();
119
115
  }
120
116
  if (targetIsInvoker && event.type === 'mousedown') {
121
117
  __classPrivateFieldSet(this, _ActionMenuElement_invokerBeingClicked, true, "f");
@@ -165,7 +161,7 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
165
161
  if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isKeyboardActivationViaSpace).call(this, event)) {
166
162
  event.preventDefault();
167
163
  if (item.getAttribute('type') === 'submit') {
168
- (_c = item.closest('form')) === null || _c === void 0 ? void 0 : _c.submit();
164
+ item.closest('form')?.submit();
169
165
  }
170
166
  }
171
167
  return;
@@ -265,7 +261,9 @@ _ActionMenuElement_potentiallyDisallowActivation = function _ActionMenuElement_p
265
261
  return false;
266
262
  if (item.getAttribute('aria-disabled')) {
267
263
  event.preventDefault();
264
+ /* eslint-disable-next-line no-restricted-syntax */
268
265
  event.stopPropagation();
266
+ /* eslint-disable-next-line no-restricted-syntax */
269
267
  event.stopImmediatePropagation();
270
268
  return true;
271
269
  }
@@ -294,6 +292,7 @@ _ActionMenuElement_isActivation = function _ActionMenuElement_isActivation(event
294
292
  };
295
293
  _ActionMenuElement_handleInvokerActivated = function _ActionMenuElement_handleInvokerActivated(event) {
296
294
  event.preventDefault();
295
+ /* eslint-disable-next-line no-restricted-syntax */
297
296
  event.stopPropagation();
298
297
  if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isOpen).call(this)) {
299
298
  __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_hide).call(this);
@@ -316,11 +315,10 @@ _ActionMenuElement_handleDialogItemActivated = function _ActionMenuElement_handl
316
315
  const lostFocus = this.ownerDocument.activeElement === this.ownerDocument.body;
317
316
  const focusInClosedMenu = this.contains(activeElement);
318
317
  if (lostFocus || focusInClosedMenu) {
319
- setTimeout(() => { var _a; return (_a = this.invokerElement) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
318
+ setTimeout(() => this.invokerElement?.focus(), 0);
320
319
  }
321
320
  };
322
321
  // a modal <dialog> element will close all popovers
323
- setTimeout(() => __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_show).call(this), 0);
324
322
  dialog.addEventListener('close', handleDialogClose, { signal });
325
323
  dialog.addEventListener('cancel', handleDialogClose, { signal });
326
324
  };
@@ -377,6 +375,7 @@ _ActionMenuElement_activateItem = function _ActionMenuElement_activateItem(event
377
375
  return;
378
376
  // otherwise, event will not result in activation by default, so we stop it and
379
377
  // simulate a click
378
+ /* eslint-disable-next-line no-restricted-syntax */
380
379
  event.stopPropagation();
381
380
  const elem = item;
382
381
  elem.click();
@@ -390,16 +389,13 @@ _ActionMenuElement_handleFocusOut = function _ActionMenuElement_handleFocusOut()
390
389
  __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_hide).call(this);
391
390
  };
392
391
  _ActionMenuElement_show = function _ActionMenuElement_show() {
393
- var _a;
394
- (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.showPopover();
392
+ this.popoverElement?.showPopover();
395
393
  };
396
394
  _ActionMenuElement_hide = function _ActionMenuElement_hide() {
397
- var _a;
398
- (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.hidePopover();
395
+ this.popoverElement?.hidePopover();
399
396
  };
400
397
  _ActionMenuElement_isOpen = function _ActionMenuElement_isOpen() {
401
- var _a;
402
- return (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.matches(':popover-open');
398
+ return this.popoverElement?.matches(':popover-open');
403
399
  };
404
400
  _ActionMenuElement_setDynamicLabel = function _ActionMenuElement_setDynamicLabel() {
405
401
  if (!this.dynamicLabel)
@@ -141,7 +141,9 @@ export class ActionMenuElement extends HTMLElement {
141
141
 
142
142
  if (item.getAttribute('aria-disabled')) {
143
143
  event.preventDefault()
144
+ /* eslint-disable-next-line no-restricted-syntax */
144
145
  event.stopPropagation()
146
+ /* eslint-disable-next-line no-restricted-syntax */
145
147
  event.stopImmediatePropagation()
146
148
  return true
147
149
  }
@@ -260,6 +262,7 @@ export class ActionMenuElement extends HTMLElement {
260
262
 
261
263
  #handleInvokerActivated(event: Event) {
262
264
  event.preventDefault()
265
+ /* eslint-disable-next-line no-restricted-syntax */
263
266
  event.stopPropagation()
264
267
 
265
268
  if (this.#isOpen()) {
@@ -287,7 +290,6 @@ export class ActionMenuElement extends HTMLElement {
287
290
  }
288
291
  }
289
292
  // a modal <dialog> element will close all popovers
290
- setTimeout(() => this.#show(), 0)
291
293
  dialog.addEventListener('close', handleDialogClose, {signal})
292
294
  dialog.addEventListener('cancel', handleDialogClose, {signal})
293
295
  }
@@ -354,6 +356,7 @@ export class ActionMenuElement extends HTMLElement {
354
356
 
355
357
  // otherwise, event will not result in activation by default, so we stop it and
356
358
  // simulate a click
359
+ /* eslint-disable-next-line no-restricted-syntax */
357
360
  event.stopPropagation()
358
361
  const elem = item as HTMLElement
359
362
  elem.click()
@@ -23,8 +23,7 @@
23
23
  scheme: :invisible,
24
24
  icon: :x,
25
25
  aria: { label: @dismiss_label },
26
- data: { action: catalyst_action(event: "click", function: "dismiss") },
27
- autofocus: true
26
+ data: { action: catalyst_action(event: "click", function: "dismiss") }
28
27
  )
29
28
  ) %>
30
29
  </div>
@@ -3,6 +3,27 @@
3
3
  module Primer
4
4
  module Alpha
5
5
  # Use `Banner` to highlight important information.
6
+ #
7
+ # @accessibility
8
+ # Given that Banner is made visually prominent to sighted users through the use of icons and color, consider providing a heading and designating the Banner as a region landmark to improve navigability and discoverability of the Banner of assistive technology users. At this time, the PVC Banner does not render a heading nor render as a region landmark by default. This may be introduced in the future [as a breaking API change](https://github.com/primer/view_components/issues/2619). For now, consider providing an appropriate heading inside of the Banner and rendering the Banner as a `<section>` tag with `aria-labelledby="switch-this-with-banner-heading-id"` to implicitly designate the Banner as a region landmark.
9
+ #
10
+ # A Banner can be used in one of two ways – to highlight information on a page, or to communicate an urgent message/feedback for a user action. For the latter scenario, it may be necessary to use a live region or focus management technique to ensure that the Banner is discoverable and accessible for all users. Otherwise, the Banner can easily be missed, including by those using magnification software or screen reader users who may not realize that a Banner has appeared. The appropriate technique to use is highly context-dependent. Visit the [Banner's Accessibility section](https://primer.style/components/banner#accessibility) or defer to the accessibility team to determine if your scenario requires either techniques.
11
+ #
12
+ # ### Announcing a Banner
13
+ # When a Banner is used to communicate non-critical feedback, or is used in critical scenarios where moving focus is considered too disruptive, use a live region announcement to announce the content of the Banner to screen reader users.
14
+ #
15
+ # Live regions can be finicky and don't work well when injected dynamically. Setting a live region attribute on the Banner itself is discouraged as it will not announce as expected for most screen readers.
16
+ #
17
+ # To ensure a Banner is announced reliably, make sure that there's a live region container that is already on the page. When the Banner is shown, populate the live region container with the content of the Banner. This can be done in one of two ways. The first is to rely on a global live region container that is guaranteed to be on the page. When the Banner appears, populate this global live region container with the Banner content. The second technique is to hide or show the Banner within a live region wrapper that is guaranteed to always be on the page.
18
+ #
19
+ # For more information about either technique, visit [Staff only: Challenges with live regions](https://github.com/github/accessibility/blob/main/docs/coaching-recommendations/toast-flash-banner/accessible-banner-prototype.md#challenges-with-dynamically-inserted-live-region). This guidance is subject to change.
20
+ #
21
+ # ### Focusing a Banner
22
+ # Focusing a Banner when it appears helps to maximize discoverability of the message, especially in critical scenarios.
23
+ #
24
+ # To properly focus a banner, add a `tabindex="-1"` to the Banner container, and focus that container (one way is using the [`focus()` API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus)).
25
+ #
26
+ # For more information about the focus management technique, visit the [Staff only: Accessible Banner Prototype docs](https://github.com/github/accessibility/blob/main/docs/coaching-recommendations/toast-flash-banner/accessible-banner-prototype.md#consideration). This guidance is subject to change.
6
27
  class Banner < Primer::Component
7
28
  status :alpha
8
29
 
@@ -131,7 +131,6 @@ module Primer
131
131
  @system_arguments[:aria] = merge_aria(
132
132
  @system_arguments, {
133
133
  aria: {
134
- disabled: true,
135
134
  labelledby: labelledby,
136
135
  describedby: "#{@id}-description"
137
136
  }
@@ -14,18 +14,19 @@ import { focusTrap } from '@primer/behaviors';
14
14
  import { getFocusableChild } from '@primer/behaviors/utils';
15
15
  function focusIfNeeded(elem) {
16
16
  if (document.activeElement !== elem) {
17
- elem === null || elem === void 0 ? void 0 : elem.focus();
17
+ elem?.focus();
18
18
  }
19
19
  }
20
20
  const overlayStack = [];
21
21
  function clickHandler(event) {
22
22
  const target = event.target;
23
- const button = target === null || target === void 0 ? void 0 : target.closest('button');
23
+ const button = target?.closest('button');
24
24
  if (!button || button.hasAttribute('disabled') || button.getAttribute('aria-disabled') === 'true')
25
25
  return;
26
26
  // If the user is clicking a valid dialog trigger
27
- let dialogId = button === null || button === void 0 ? void 0 : button.getAttribute('data-show-dialog-id');
27
+ let dialogId = button?.getAttribute('data-show-dialog-id');
28
28
  if (dialogId) {
29
+ /* eslint-disable-next-line no-restricted-syntax */
29
30
  event.stopPropagation();
30
31
  const dialog = document.getElementById(dialogId);
31
32
  if (dialog instanceof ModalDialogElement) {
@@ -63,7 +64,7 @@ function keydownHandler(event) {
63
64
  }
64
65
  function mousedownHandler(event) {
65
66
  const target = event.target;
66
- if (target === null || target === void 0 ? void 0 : target.closest('button'))
67
+ if (target?.closest('button'))
67
68
  return;
68
69
  // Find the top level dialog that is open.
69
70
  const topLevelDialog = overlayStack[overlayStack.length - 1];
@@ -92,7 +93,6 @@ export class ModalDialogElement extends HTMLElement {
92
93
  return this.hasAttribute('open');
93
94
  }
94
95
  set open(value) {
95
- var _a, _b, _c, _d;
96
96
  if (value) {
97
97
  if (this.open)
98
98
  return;
@@ -100,7 +100,7 @@ export class ModalDialogElement extends HTMLElement {
100
100
  this.setAttribute('aria-disabled', 'false');
101
101
  document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`;
102
102
  document.body.style.overflow = 'hidden';
103
- (_a = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _a === void 0 ? void 0 : _a.classList.remove('Overlay--hidden');
103
+ __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)?.classList.remove('Overlay--hidden');
104
104
  if (__classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal.aborted) {
105
105
  __classPrivateFieldSet(this, _ModalDialogElement_focusAbortController, new AbortController(), "f");
106
106
  }
@@ -112,13 +112,13 @@ export class ModalDialogElement extends HTMLElement {
112
112
  return;
113
113
  this.removeAttribute('open');
114
114
  this.setAttribute('aria-disabled', 'true');
115
- (_b = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _b === void 0 ? void 0 : _b.classList.add('Overlay--hidden');
115
+ __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)?.classList.add('Overlay--hidden');
116
116
  document.body.style.paddingRight = '0';
117
117
  document.body.style.overflow = 'initial';
118
118
  __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").abort();
119
119
  // if #openButton is a child of a menu, we need to focus a suitable child of the menu
120
120
  // element since it is expected for the menu to close on click
121
- const menu = ((_c = this.openButton) === null || _c === void 0 ? void 0 : _c.closest('details')) || ((_d = this.openButton) === null || _d === void 0 ? void 0 : _d.closest('action-menu'));
121
+ const menu = this.openButton?.closest('details') || this.openButton?.closest('action-menu');
122
122
  if (menu) {
123
123
  focusIfNeeded(getFocusableChild(menu));
124
124
  }
@@ -153,8 +153,7 @@ export class ModalDialogElement extends HTMLElement {
153
153
  }
154
154
  }
155
155
  _ModalDialogElement_focusAbortController = new WeakMap(), _ModalDialogElement_instances = new WeakSet(), _ModalDialogElement_overlayBackdrop_get = function _ModalDialogElement_overlayBackdrop_get() {
156
- var _a;
157
- if ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('data-modal-dialog-overlay')) {
156
+ if (this.parentElement?.hasAttribute('data-modal-dialog-overlay')) {
158
157
  return this.parentElement;
159
158
  }
160
159
  return null;
@@ -169,11 +168,13 @@ _ModalDialogElement_focusAbortController = new WeakMap(), _ModalDialogElement_in
169
168
  case 'Escape':
170
169
  this.close();
171
170
  event.preventDefault();
171
+ /* eslint-disable-next-line no-restricted-syntax */
172
172
  event.stopPropagation();
173
173
  break;
174
174
  case 'Enter': {
175
175
  const target = event.target;
176
176
  if (target.getAttribute('data-close-dialog-id') === this.id) {
177
+ /* eslint-disable-next-line no-restricted-syntax */
177
178
  event.stopPropagation();
178
179
  }
179
180
  break;
@@ -18,6 +18,7 @@ function clickHandler(event: Event) {
18
18
  // If the user is clicking a valid dialog trigger
19
19
  let dialogId = button?.getAttribute('data-show-dialog-id')
20
20
  if (dialogId) {
21
+ /* eslint-disable-next-line no-restricted-syntax */
21
22
  event.stopPropagation()
22
23
  const dialog = document.getElementById(dialogId)
23
24
  if (dialog instanceof ModalDialogElement) {
@@ -170,12 +171,14 @@ export class ModalDialogElement extends HTMLElement {
170
171
  case 'Escape':
171
172
  this.close()
172
173
  event.preventDefault()
174
+ /* eslint-disable-next-line no-restricted-syntax */
173
175
  event.stopPropagation()
174
176
  break
175
177
  case 'Enter': {
176
178
  const target = event.target as HTMLElement
177
179
 
178
180
  if (target.getAttribute('data-close-dialog-id') === this.id) {
181
+ /* eslint-disable-next-line no-restricted-syntax */
179
182
  event.stopPropagation()
180
183
  }
181
184
  break
@@ -20,13 +20,12 @@ let SegmentedControlElement = class SegmentedControlElement extends HTMLElement
20
20
  __classPrivateFieldGet(this, _SegmentedControlElement_instances, "m", _SegmentedControlElement_updateButtonLabels).call(this);
21
21
  }
22
22
  select(event) {
23
- var _a, _b;
24
23
  const button = event.currentTarget;
25
24
  for (const item of this.items) {
26
25
  item.classList.remove('SegmentedControl-item--selected');
27
- (_a = item.querySelector('[aria-current]')) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-current', 'false');
26
+ item.querySelector('[aria-current]')?.setAttribute('aria-current', 'false');
28
27
  }
29
- (_b = button.closest('li.SegmentedControl-item')) === null || _b === void 0 ? void 0 : _b.classList.add('SegmentedControl-item--selected');
28
+ button.closest('li.SegmentedControl-item')?.classList.add('SegmentedControl-item--selected');
30
29
  button.setAttribute('aria-current', 'true');
31
30
  }
32
31
  };
@@ -134,9 +134,9 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
134
134
  credentials: 'same-origin',
135
135
  method: 'POST',
136
136
  headers: {
137
- 'Requested-With': 'XMLHttpRequest'
137
+ 'Requested-With': 'XMLHttpRequest',
138
138
  },
139
- body
139
+ body,
140
140
  });
141
141
  }
142
142
  catch (error) {
@@ -163,9 +163,9 @@ class ToggleSwitchElement extends HTMLElement {
163
163
  credentials: 'same-origin',
164
164
  method: 'POST',
165
165
  headers: {
166
- 'Requested-With': 'XMLHttpRequest'
166
+ 'Requested-With': 'XMLHttpRequest',
167
167
  },
168
- body
168
+ body,
169
169
  })
170
170
  } catch (error) {
171
171
  throw new Error('A network error occurred, please try again.')
@@ -19,12 +19,12 @@ const isPopoverOpen = (() => {
19
19
  selector = ':popover-open';
20
20
  return el.matches(selector);
21
21
  }
22
- catch (_a) {
22
+ catch {
23
23
  try {
24
24
  selector = ':open';
25
25
  return el.matches(':open');
26
26
  }
27
- catch (_b) {
27
+ catch {
28
28
  selector = '.\\:popover-open';
29
29
  return el.matches('.\\:popover-open');
30
30
  }
@@ -253,7 +253,6 @@ class ToolTipElement extends HTMLElement {
253
253
  return !isPopoverOpen(this);
254
254
  }
255
255
  connectedCallback() {
256
- var _a, _b;
257
256
  tooltips.add(this);
258
257
  __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateControlReference).call(this);
259
258
  __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateDirection).call(this);
@@ -268,7 +267,7 @@ class ToolTipElement extends HTMLElement {
268
267
  if (!this.control)
269
268
  return;
270
269
  this.setAttribute('role', 'tooltip');
271
- (_a = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
270
+ __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")?.abort();
272
271
  __classPrivateFieldSet(this, _ToolTipElement_abortController, new AbortController(), "f");
273
272
  const { signal } = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f");
274
273
  this.addEventListener('mouseleave', this, { signal });
@@ -279,7 +278,7 @@ class ToolTipElement extends HTMLElement {
279
278
  this.control.addEventListener('mousedown', this, { signal });
280
279
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
281
280
  // @ts-ignore popoverTargetElement is not in the type definition
282
- (_b = this.control.popoverTargetElement) === null || _b === void 0 ? void 0 : _b.addEventListener('beforetoggle', this, {
281
+ this.control.popoverTargetElement?.addEventListener('beforetoggle', this, {
283
282
  signal,
284
283
  });
285
284
  this.ownerDocument.addEventListener('focusout', focusOutListener);
@@ -287,10 +286,9 @@ class ToolTipElement extends HTMLElement {
287
286
  this.ownerDocument.addEventListener('keydown', this, { signal, capture: true });
288
287
  }
289
288
  disconnectedCallback() {
290
- var _a;
291
289
  tooltips.delete(this);
292
290
  openTooltips.delete(this);
293
- (_a = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
291
+ __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")?.abort();
294
292
  }
295
293
  async handleEvent(event) {
296
294
  if (!this.control)
@@ -310,6 +308,7 @@ class ToolTipElement extends HTMLElement {
310
308
  const isOpeningOtherPopover = event.type === 'beforetoggle' && event.currentTarget !== this;
311
309
  const shouldHide = isMouseLeaveFromButton || isEscapeKeydown || isMouseDownOnButton || isOpeningOtherPopover;
312
310
  if (showing && isEscapeKeydown) {
311
+ /* eslint-disable-next-line no-restricted-syntax */
313
312
  event.stopImmediatePropagation();
314
313
  event.preventDefault();
315
314
  }
@@ -316,6 +316,7 @@ class ToolTipElement extends HTMLElement {
316
316
  const shouldHide = isMouseLeaveFromButton || isEscapeKeydown || isMouseDownOnButton || isOpeningOtherPopover
317
317
 
318
318
  if (showing && isEscapeKeydown) {
319
+ /* eslint-disable-next-line no-restricted-syntax */
319
320
  event.stopImmediatePropagation()
320
321
  event.preventDefault()
321
322
  }
@@ -1 +1 @@
1
- :root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--button-default-fgColor-rest,var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,.25rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}a.Button:hover,summary.Button:hover{-webkit-text-decoration:none;text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium,1.4285);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-leadingVisual svg{fill:currentcolor}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4,.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small,1.6666)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.Button--large{gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.Button--fullWidth{width:100%}.Button--primary{color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text));fill:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow))}.Button--primary:hover:not(:disabled,.Button--inactive){background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));fill:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{color:var(--button-default-fgColor-rest,var(--color-btn-text));fill:var(--fgColor-muted,var(--color-fg-muted));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow))}.Button--secondary:hover:not(:disabled,.Button--inactive){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover,var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active,var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected,var(--color-btn-selected-bg));box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{background-color:var(--button-default-bgColor-disabled,var(--color-btn-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--invisible.Button--iconOnly{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible:hover:not(:disabled,.Button--inactive){background-color:var(--button-invisible-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:hover:not(:disabled,.Button--inactive) .Button-visual{color:var(--button-invisible-iconColor-hover,var(--color-fg-default))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active,var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{background-color:var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));border-color:var(--button-invisible-borderColor-disabled,var(--color-action-list-item-default-selected-bg));color:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));fill:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest,var(--color-btn-outline-text))}.Button--invisible .Button-visual{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default,var(--color-fg-default))}.Button--link{color:var(--fgColor-link,var(--color-accent-fg));fill:var(--fgColor-link,var(--color-accent-fg));border:none;display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled,.Button--inactive){-webkit-text-decoration:underline;text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--danger{color:var(--button-danger-fgColor-rest,var(--color-btn-danger-text));fill:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest,var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow))}.Button--danger:hover:not(:disabled,.Button--inactive){color:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));fill:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small))}.Button--danger:hover:not(:disabled,.Button--inactive) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));color:var(--buttonCounter-danger-fgColor-hover,var(--color-btn-danger-hover-counter-fg))}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{color:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));fill:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow))}.Button--danger:disabled,.Button--danger[aria-disabled=true]{color:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));fill:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border))}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));color:var(--buttonCounter-danger-fgColor-disabled,var(--color-btn-danger-disabled-counter-fg))}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));color:var(--buttonCounter-danger-fgColor-rest,var(--color-btn-danger-counter-fg))}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.Button--iconOnly.Button--small{width:var(--control-small-size,1.75rem)}.Button--iconOnly.Button--large{width:var(--control-large-size,2.5rem)}.Button--inactive:not([aria-disabled=true],:disabled){background-color:var(--button-inactive-bgColor);border:0;color:var(--button-inactive-fgColor);cursor:default}
1
+ :root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--button-default-fgColor-rest,var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,.25rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}a.Button:hover,summary.Button:hover{-webkit-text-decoration:none;text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium,1.4285);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-leadingVisual svg{fill:currentcolor}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4,.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small,1.6666)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.Button--large{gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.Button--fullWidth{width:100%}.Button--primary{color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text));fill:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow))}.Button--primary:hover:not(:disabled,.Button--inactive){background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));fill:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{color:var(--button-default-fgColor-rest,var(--color-btn-text));fill:var(--fgColor-muted,var(--color-fg-muted));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow))}.Button--secondary:hover:not(:disabled,.Button--inactive){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover,var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active,var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected,var(--color-btn-selected-bg));box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{background-color:var(--button-default-bgColor-disabled,var(--color-btn-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--invisible.Button--iconOnly{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible:hover:not(:disabled,.Button--inactive){background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active,var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{background-color:var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));border-color:var(--button-invisible-borderColor-disabled,var(--color-action-list-item-default-selected-bg));color:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));fill:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest,var(--color-btn-outline-text))}.Button--invisible .Button-visual{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default,var(--color-fg-default))}.Button--link{color:var(--fgColor-link,var(--color-accent-fg));fill:var(--fgColor-link,var(--color-accent-fg));border:none;display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled,.Button--inactive){-webkit-text-decoration:underline;text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--danger{color:var(--button-danger-fgColor-rest,var(--color-btn-danger-text));fill:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest,var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow))}.Button--danger:hover:not(:disabled,.Button--inactive){color:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));fill:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small))}.Button--danger:hover:not(:disabled,.Button--inactive) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));color:var(--buttonCounter-danger-fgColor-hover,var(--color-btn-danger-hover-counter-fg))}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{color:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));fill:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow))}.Button--danger:disabled,.Button--danger[aria-disabled=true]{color:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));fill:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border))}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));color:var(--buttonCounter-danger-fgColor-disabled,var(--color-btn-danger-disabled-counter-fg))}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));color:var(--buttonCounter-danger-fgColor-rest,var(--color-btn-danger-counter-fg))}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.Button--iconOnly.Button--small{width:var(--control-small-size,1.75rem)}.Button--iconOnly.Button--large{width:var(--control-large-size,2.5rem)}.Button--inactive:not([aria-disabled=true],:disabled){background-color:var(--button-inactive-bgColor);border:0;color:var(--button-inactive-fgColor);cursor:default}
@@ -46,7 +46,6 @@
46
46
  ".Button--invisible",
47
47
  ".Button--invisible.Button--iconOnly",
48
48
  ".Button--invisible:hover:not(:disabled,.Button--inactive)",
49
- ".Button--invisible:hover:not(:disabled,.Button--inactive) .Button-visual",
50
49
  ".Button--invisible:active:not(:disabled)",
51
50
  ".Button--invisible[aria-pressed=true]",
52
51
  ".Button--invisible:disabled",