jekyll-v4-theme-primer 0.12.0 → 0.13.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +18 -0
- data/_layouts/default.html +4 -2
- data/_sass/@primer/css/autocomplete/suggester.scss +11 -11
- data/_sass/@primer/css/avatars/avatar-parent-child.scss +2 -2
- data/_sass/@primer/css/avatars/circle-badge.scss +3 -3
- data/_sass/@primer/css/base/base.scss +5 -5
- data/_sass/@primer/css/base/kbd.scss +5 -5
- data/_sass/@primer/css/base/normalize.scss +2 -2
- data/_sass/@primer/css/box/box-overlay.scss +3 -3
- data/_sass/@primer/css/branch-name/branch-name.scss +6 -6
- data/_sass/@primer/css/buttons/button.scss +63 -63
- data/_sass/@primer/css/buttons/misc.scss +26 -26
- data/_sass/@primer/css/color-modes/native.scss +4 -2
- data/_sass/@primer/css/forms/form-control.scss +18 -18
- data/_sass/@primer/css/forms/form-group.scss +29 -29
- data/_sass/@primer/css/forms/form-select.scss +1 -1
- data/_sass/@primer/css/forms/input-group.scss +10 -0
- data/_sass/@primer/css/forms/radio-group.scss +6 -6
- data/_sass/@primer/css/header/header.scss +7 -7
- data/_sass/@primer/css/layout/app-frame.scss +7 -7
- data/_sass/@primer/css/layout/page-layout.scss +2 -6
- data/_sass/@primer/css/layout/stack.scss +1 -1
- data/_sass/@primer/css/markdown/blob-csv.scss +2 -2
- data/_sass/@primer/css/markdown/code.scss +3 -3
- data/_sass/@primer/css/markdown/footnotes.scss +3 -3
- data/_sass/@primer/css/markdown/headings.scss +4 -4
- data/_sass/@primer/css/markdown/images.scss +3 -3
- data/_sass/@primer/css/markdown/markdown-body.scss +4 -4
- data/_sass/@primer/css/markdown/tables.scss +4 -4
- data/_sass/@primer/css/marketing/buttons/button.scss +9 -10
- data/_sass/@primer/css/marketing/support/variables.scss +15 -0
- data/_sass/@primer/css/marketing/utilities/layout.scss +0 -1
- data/_sass/@primer/css/navigation/filter-list.scss +8 -8
- data/_sass/@primer/css/navigation/sidenav.scss +12 -12
- data/_sass/@primer/css/navigation/subnav.scss +9 -9
- data/_sass/@primer/css/pagination/pagination.scss +7 -7
- data/_sass/@primer/css/select-menu/select-menu.scss +41 -41
- data/_sass/@primer/css/support/mixins/color-modes.scss +89 -1
- data/_sass/@primer/css/support/mixins/misc.scss +8 -8
- data/_sass/@primer/css/support/variables/misc.scss +2 -2
- data/_sass/@primer/css/support/variables/typography.scss +1 -1
- data/_sass/@primer/css/toasts/toasts.scss +17 -17
- data/_sass/@primer/css/tooltips/tooltips.scss +9 -62
- data/_sass/@primer/css/utilities/borders.scss +1 -1
- data/_sass/@primer/css/utilities/box-shadow.scss +8 -4
- data/_sass/@primer/css/utilities/colors.scss +59 -60
- data/_sass/@primer/css/utilities/details.scss +1 -1
- data/_sass/@primer/css/utilities/flexbox.scss +0 -1
- data/_sass/@primer/css/utilities/layout.scss +7 -5
- data/_sass/@primer/css/utilities/margin.scss +0 -2
- data/_sass/@primer/css/utilities/padding.scss +0 -1
- data/_sass/@primer/css/utilities/typography.scss +8 -8
- data/_sass/@primer/primitives/dist/scss/base/size/size.scss +17 -0
- data/_sass/@primer/primitives/dist/scss/base/typography/typography.scss +4 -0
- data/_sass/@primer/primitives/dist/scss/colors/_dark.scss +29 -20
- data/_sass/@primer/primitives/dist/scss/colors/_dark_colorblind.scss +14 -5
- data/_sass/@primer/primitives/dist/scss/colors/_dark_dimmed.scss +14 -5
- data/_sass/@primer/primitives/dist/scss/colors/_dark_high_contrast.scss +12 -3
- data/_sass/@primer/primitives/dist/scss/colors/_dark_tritanopia.scss +14 -5
- data/_sass/@primer/primitives/dist/scss/colors/_light.scss +13 -4
- data/_sass/@primer/primitives/dist/scss/colors/_light_colorblind.scss +13 -4
- data/_sass/@primer/primitives/dist/scss/colors/_light_high_contrast.scss +13 -4
- data/_sass/@primer/primitives/dist/scss/colors/_light_tritanopia.scss +13 -4
- data/_sass/@primer/primitives/dist/scss/functional/motion/motion.scss +3 -0
- data/_sass/@primer/primitives/dist/scss/functional/size/border.scss +12 -0
- data/_sass/@primer/primitives/dist/scss/functional/size/breakpoints.scss +6 -0
- data/_sass/@primer/primitives/dist/scss/functional/size/size-coarse.scss +3 -0
- data/_sass/@primer/primitives/dist/scss/functional/size/size-fine.scss +3 -0
- data/_sass/@primer/primitives/dist/scss/functional/size/size.scss +72 -0
- data/_sass/@primer/primitives/dist/scss/functional/size/viewport.scss +6 -0
- data/_sass/@primer/primitives/dist/scss/functional/themes/dark-colorblind.scss +503 -0
- data/_sass/@primer/primitives/dist/scss/functional/themes/dark-dimmed.scss +503 -0
- data/_sass/@primer/primitives/dist/scss/functional/themes/dark-high-contrast.scss +503 -0
- data/_sass/@primer/primitives/dist/scss/functional/themes/dark-tritanopia.scss +503 -0
- data/_sass/@primer/primitives/dist/scss/functional/themes/dark.scss +503 -0
- data/_sass/@primer/primitives/dist/scss/functional/themes/light-colorblind.scss +503 -0
- data/_sass/@primer/primitives/dist/scss/functional/themes/light-high-contrast.scss +503 -0
- data/_sass/@primer/primitives/dist/scss/functional/themes/light-tritanopia.scss +503 -0
- data/_sass/@primer/primitives/dist/scss/functional/themes/light.scss +503 -0
- data/_sass/@primer/primitives/dist/scss/functional/typography/typography.scss +45 -0
- data/_sass/@primer/primitives/tokens-next-private/scss/base/size/size.scss +17 -21
- data/_sass/@primer/primitives/tokens-next-private/scss/base/typography/typography.scss +4 -8
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/motion/motion.scss +3 -0
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/size/border.scss +12 -16
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/size/breakpoints.scss +6 -10
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/size/size-coarse.scss +3 -7
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/size/size-fine.scss +3 -7
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/size/size.scss +72 -51
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/size/viewport.scss +6 -19
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/dark-colorblind.scss +503 -391
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/dark-dimmed.scss +503 -391
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/dark-high-contrast.scss +503 -391
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/dark-tritanopia.scss +503 -391
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/dark.scss +503 -391
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/light-colorblind.scss +503 -366
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/light-high-contrast.scss +503 -366
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/light-tritanopia.scss +503 -366
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/light.scss +503 -366
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/typography/typography.scss +45 -49
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/base/size/size.scss +2 -2
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/base/typography/typography.scss +2 -2
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/functional/size/border.scss +2 -2
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/functional/size/breakpoints.scss +2 -2
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/functional/size/size-coarse.scss +2 -2
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/functional/size/size-fine.scss +2 -2
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/functional/size/size.scss +2 -2
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/functional/size/viewport.scss +2 -2
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/functional/typography/typography.scss +2 -2
- data/_sass/@primer/view-components/README.md +1 -1
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/alpha/action_bar_element.d.ts +17 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/alpha/action_menu/action_menu_element.d.ts +51 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/alpha/dropdown/menu.d.ts +1 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/alpha/dropdown.d.ts +1 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/alpha/image_crop.d.ts +1 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/alpha/modal_dialog.d.ts +18 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/alpha/segmented_control.d.ts +12 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/alpha/tab_container.d.ts +1 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/alpha/toggle_switch.d.ts +30 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/alpha/tool_tip.d.ts +27 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/alpha/x_banner.d.ts +13 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/anchored_position.d.ts +27 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/beta/auto_complete/auto_complete.d.ts +1 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/beta/clipboard_copy.d.ts +1 -0
- data/_sass/@primer/view-components/app/{components/primer/alpha → assets/javascripts/app/components/primer/beta}/nav_list.d.ts +0 -11
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/beta/nav_list_group_element.d.ts +19 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/beta/relative_time.d.ts +1 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/dialog_helper.d.ts +15 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/focus_group.d.ts +19 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/primer.d.ts +23 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/scrollable_region.d.ts +13 -0
- data/_sass/@primer/view-components/app/assets/javascripts/lib/primer/forms/primer_multi_input.d.ts +10 -0
- data/_sass/@primer/view-components/app/assets/javascripts/lib/primer/forms/primer_text_field.d.ts +1 -0
- data/_sass/@primer/view-components/app/assets/javascripts/lib/primer/forms/toggle_switch_input.d.ts +5 -0
- data/_sass/@primer/view-components/app/assets/javascripts/primer_view_components.js +1 -1
- data/_sass/@primer/view-components/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/_sass/@primer/view-components/app/assets/styles/primer_view_components.css +1 -3
- data/_sass/@primer/view-components/app/assets/styles/primer_view_components.css.map +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/action_bar.css +1 -0
- data/_sass/@primer/view-components/app/components/primer/alpha/action_bar.css.json +14 -0
- data/_sass/@primer/view-components/app/components/primer/alpha/action_bar_element.d.ts +17 -0
- data/_sass/@primer/view-components/app/components/primer/alpha/action_bar_element.js +180 -0
- data/_sass/@primer/view-components/app/components/primer/alpha/action_list.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/action_list.css.json +21 -16
- data/_sass/@primer/view-components/app/components/primer/alpha/action_menu/action_menu_element.d.ts +26 -4
- data/_sass/@primer/view-components/app/components/primer/alpha/action_menu/action_menu_element.js +318 -65
- data/_sass/@primer/view-components/app/components/primer/alpha/auto_complete.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/banner.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/button_marketing.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/dialog.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/dialog.css.json +12 -27
- data/_sass/@primer/view-components/app/components/primer/alpha/dropdown.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/layout.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/menu.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/modal_dialog.js +38 -27
- data/_sass/@primer/view-components/app/components/primer/alpha/overlay.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/overlay.css.json +6 -3
- data/_sass/@primer/view-components/app/components/primer/alpha/segmented_control.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/segmented_control.css.json +11 -13
- data/_sass/@primer/view-components/app/components/primer/alpha/segmented_control.js +4 -4
- data/_sass/@primer/view-components/app/components/primer/alpha/tab_nav.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/text_field.css +1 -3
- data/_sass/@primer/view-components/app/components/primer/alpha/text_field.css.json +16 -6
- data/_sass/@primer/view-components/app/components/primer/alpha/toggle_switch.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/toggle_switch.css.json +11 -11
- data/_sass/@primer/view-components/app/components/primer/alpha/toggle_switch.d.ts +2 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/toggle_switch.js +54 -45
- data/_sass/@primer/view-components/app/components/primer/alpha/tool_tip.d.ts +4 -2
- data/_sass/@primer/view-components/app/components/primer/alpha/tool_tip.js +159 -72
- data/_sass/@primer/view-components/app/components/primer/alpha/underline_nav.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/x_banner.d.ts +3 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/x_banner.js +25 -10
- data/_sass/@primer/view-components/app/components/primer/anchored_position.js +16 -8
- data/_sass/@primer/view-components/app/components/primer/beta/avatar.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/avatar_stack.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/blankslate.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/blankslate.css.json +1 -0
- data/_sass/@primer/view-components/app/components/primer/beta/border_box.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/border_box.css.json +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/breadcrumbs.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/button.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/button.css.json +13 -7
- data/_sass/@primer/view-components/app/components/primer/beta/button_group.css +1 -0
- data/_sass/@primer/view-components/app/components/primer/beta/button_group.css.json +12 -0
- data/_sass/@primer/view-components/app/components/primer/beta/counter.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/flash.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/label.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/link.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/link.css.json +1 -0
- data/_sass/@primer/view-components/app/components/primer/beta/nav_list.d.ts +17 -0
- data/_sass/@primer/view-components/app/components/primer/{alpha → beta}/nav_list.js +28 -100
- data/_sass/@primer/view-components/app/components/primer/beta/nav_list_group_element.d.ts +19 -0
- data/_sass/@primer/view-components/app/components/primer/beta/nav_list_group_element.js +107 -0
- data/_sass/@primer/view-components/app/components/primer/beta/popover.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/progress_bar.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/state.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/subhead.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/subhead.css.json +2 -0
- data/_sass/@primer/view-components/app/components/primer/beta/timeline_item.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/truncate.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/dialog_helper.d.ts +15 -0
- data/_sass/@primer/view-components/app/components/primer/dialog_helper.js +117 -0
- data/_sass/@primer/view-components/app/components/primer/focus_group.js +41 -22
- data/_sass/@primer/view-components/app/components/primer/primer.d.ts +6 -2
- data/_sass/@primer/view-components/app/components/primer/primer.js +6 -2
- data/_sass/@primer/view-components/app/components/primer/scrollable_region.d.ts +13 -0
- data/_sass/@primer/view-components/app/components/primer/scrollable_region.js +52 -0
- data/_sass/@primer/view-components/lib/primer/forms/primer_multi_input.js +2 -3
- data/_sass/@primer/view-components/lib/primer/forms/primer_text_field.js +42 -9
- data/_sass/@primer/view-components/lib/primer/forms/toggle_switch_input.js +7 -2
- data/_sass/@primer/view-components/package.json +33 -34
- data/_sass/@primer/view-components/static/arguments.json +559 -48
- data/_sass/@primer/view-components/static/audited_at.json +18 -3
- data/_sass/@primer/view-components/static/classes.json +402 -369
- data/_sass/@primer/view-components/static/constants.json +104 -17
- data/_sass/@primer/view-components/static/info_arch.json +8248 -1640
- data/_sass/@primer/view-components/static/previews.json +6225 -1431
- data/_sass/@primer/view-components/static/statuses.json +20 -5
- data/_sass/jekyll-v4-theme-primer.scss +11 -0
- data/assets/js/github-clipboard-copy-element.js +154 -0
- data/assets/js/primer-clipboard-copy.js +106 -0
- metadata +63 -5
@@ -5,8 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
6
6
|
};
|
7
7
|
import { controller, target } from '@github/catalyst';
|
8
|
-
import { debounce } from '@github/mini-throttle/decorators';
|
9
8
|
let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
|
9
|
+
constructor() {
|
10
|
+
super(...arguments);
|
11
|
+
this.toggling = false;
|
12
|
+
}
|
10
13
|
get src() {
|
11
14
|
const src = this.getAttribute('src');
|
12
15
|
if (!src)
|
@@ -26,46 +29,66 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
|
|
26
29
|
isRemote() {
|
27
30
|
return this.src != null;
|
28
31
|
}
|
29
|
-
toggle() {
|
32
|
+
async toggle() {
|
33
|
+
if (this.toggling)
|
34
|
+
return;
|
35
|
+
this.toggling = true;
|
30
36
|
if (this.isDisabled()) {
|
31
37
|
return;
|
32
38
|
}
|
33
|
-
if (this.isRemote()) {
|
34
|
-
this.setLoadingState();
|
35
|
-
this.submitForm();
|
36
|
-
}
|
37
|
-
else {
|
39
|
+
if (!this.isRemote()) {
|
38
40
|
this.performToggle();
|
41
|
+
this.toggling = false;
|
42
|
+
return;
|
43
|
+
}
|
44
|
+
// toggle immediately to tell screen readers the switch was clicked
|
45
|
+
this.performToggle();
|
46
|
+
this.setLoadingState();
|
47
|
+
try {
|
48
|
+
await this.submitForm();
|
49
|
+
}
|
50
|
+
catch (error) {
|
51
|
+
if (error instanceof Error) {
|
52
|
+
// because we toggle immediately when the switch is clicked, toggle back to the
|
53
|
+
// old state on failure
|
54
|
+
this.setErrorState(error.message || 'An error occurred, please try again.');
|
55
|
+
this.performToggle();
|
56
|
+
}
|
57
|
+
return;
|
58
|
+
}
|
59
|
+
finally {
|
60
|
+
this.toggling = false;
|
39
61
|
}
|
62
|
+
this.setSuccessState();
|
40
63
|
}
|
41
64
|
turnOn() {
|
42
65
|
if (this.isDisabled()) {
|
43
66
|
return;
|
44
67
|
}
|
45
|
-
this.switch.setAttribute('aria-
|
68
|
+
this.switch.setAttribute('aria-pressed', 'true');
|
46
69
|
this.classList.add('ToggleSwitch--checked');
|
47
70
|
}
|
48
71
|
turnOff() {
|
49
72
|
if (this.isDisabled()) {
|
50
73
|
return;
|
51
74
|
}
|
52
|
-
this.switch.setAttribute('aria-
|
75
|
+
this.switch.setAttribute('aria-pressed', 'false');
|
53
76
|
this.classList.remove('ToggleSwitch--checked');
|
54
77
|
}
|
55
78
|
isOn() {
|
56
|
-
return this.switch.getAttribute('aria-
|
79
|
+
return this.switch.getAttribute('aria-pressed') === 'true';
|
57
80
|
}
|
58
81
|
isOff() {
|
59
82
|
return !this.isOn();
|
60
83
|
}
|
61
84
|
isDisabled() {
|
62
|
-
return this.switch.getAttribute('
|
85
|
+
return this.switch.getAttribute('disabled') != null;
|
63
86
|
}
|
64
87
|
disable() {
|
65
|
-
this.switch.setAttribute('
|
88
|
+
this.switch.setAttribute('disabled', 'disabled');
|
66
89
|
}
|
67
90
|
enable() {
|
68
|
-
this.switch.
|
91
|
+
this.switch.removeAttribute('disabled');
|
69
92
|
}
|
70
93
|
performToggle() {
|
71
94
|
if (this.isOn()) {
|
@@ -76,9 +99,10 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
|
|
76
99
|
}
|
77
100
|
}
|
78
101
|
setLoadingState() {
|
79
|
-
this.disable();
|
80
102
|
this.errorIcon.setAttribute('hidden', 'hidden');
|
81
103
|
this.loadingSpinner.removeAttribute('hidden');
|
104
|
+
const event = new CustomEvent('toggleSwitchLoading', { bubbles: true });
|
105
|
+
this.dispatchEvent(event);
|
82
106
|
}
|
83
107
|
setSuccessState() {
|
84
108
|
const event = new CustomEvent('toggleSwitchSuccess', { bubbles: true });
|
@@ -95,43 +119,31 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
|
|
95
119
|
this.errorIcon.removeAttribute('hidden');
|
96
120
|
}
|
97
121
|
this.loadingSpinner.setAttribute('hidden', 'hidden');
|
98
|
-
this.enable();
|
99
122
|
}
|
100
123
|
async submitForm() {
|
101
124
|
const body = new FormData();
|
102
125
|
if (this.csrf) {
|
103
126
|
body.append(this.csrfField, this.csrf);
|
104
127
|
}
|
105
|
-
body.append('value', this.isOn() ? '
|
128
|
+
body.append('value', this.isOn() ? '1' : '0');
|
129
|
+
if (!this.src)
|
130
|
+
throw new Error('invalid src');
|
131
|
+
let response;
|
106
132
|
try {
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
'Requested-With': 'XMLHttpRequest'
|
116
|
-
},
|
117
|
-
body
|
118
|
-
});
|
119
|
-
}
|
120
|
-
catch (error) {
|
121
|
-
throw new Error('A network error occurred, please try again.');
|
122
|
-
}
|
123
|
-
if (response.ok) {
|
124
|
-
this.setSuccessState();
|
125
|
-
this.performToggle();
|
126
|
-
}
|
127
|
-
else {
|
128
|
-
throw new Error(await response.text());
|
129
|
-
}
|
133
|
+
response = await fetch(this.src, {
|
134
|
+
credentials: 'same-origin',
|
135
|
+
method: 'POST',
|
136
|
+
headers: {
|
137
|
+
'Requested-With': 'XMLHttpRequest',
|
138
|
+
},
|
139
|
+
body,
|
140
|
+
});
|
130
141
|
}
|
131
142
|
catch (error) {
|
132
|
-
|
133
|
-
|
134
|
-
|
143
|
+
throw new Error('A network error occurred, please try again.');
|
144
|
+
}
|
145
|
+
if (!response.ok) {
|
146
|
+
throw new Error(await response.text());
|
135
147
|
}
|
136
148
|
}
|
137
149
|
};
|
@@ -144,9 +156,6 @@ __decorate([
|
|
144
156
|
__decorate([
|
145
157
|
target
|
146
158
|
], ToggleSwitchElement.prototype, "errorIcon", void 0);
|
147
|
-
__decorate([
|
148
|
-
debounce(300)
|
149
|
-
], ToggleSwitchElement.prototype, "submitForm", null);
|
150
159
|
ToggleSwitchElement = __decorate([
|
151
160
|
controller
|
152
161
|
], ToggleSwitchElement);
|
@@ -1,7 +1,9 @@
|
|
1
|
-
|
1
|
+
import '@oddbird/popover-polyfill';
|
2
|
+
type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw';
|
2
3
|
declare class ToolTipElement extends HTMLElement {
|
3
4
|
#private;
|
4
5
|
styles(): string;
|
6
|
+
get showReason(): "focus" | "mouse";
|
5
7
|
get htmlFor(): string;
|
6
8
|
set htmlFor(value: string);
|
7
9
|
get type(): 'description' | 'label';
|
@@ -13,7 +15,7 @@ declare class ToolTipElement extends HTMLElement {
|
|
13
15
|
get hiddenFromView(): true | false;
|
14
16
|
connectedCallback(): void;
|
15
17
|
disconnectedCallback(): void;
|
16
|
-
handleEvent(event: Event): void
|
18
|
+
handleEvent(event: Event): Promise<void>;
|
17
19
|
static observedAttributes: string[];
|
18
20
|
attributeChangedCallback(name: string): void;
|
19
21
|
}
|
@@ -9,11 +9,32 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
|
|
9
9
|
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
10
10
|
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
11
11
|
};
|
12
|
-
var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_update, _ToolTipElement_updateControlReference, _ToolTipElement_updateDirection, _ToolTipElement_updatePosition;
|
12
|
+
var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_showReason, _ToolTipElement_update, _ToolTipElement_updateControlReference, _ToolTipElement_updateDirection, _ToolTipElement_updatePosition;
|
13
|
+
import '@oddbird/popover-polyfill';
|
13
14
|
import { getAnchoredPosition } from '@primer/behaviors';
|
14
|
-
const
|
15
|
+
const isPopoverOpen = (() => {
|
16
|
+
let selector;
|
17
|
+
function setSelector(el) {
|
18
|
+
try {
|
19
|
+
selector = ':popover-open';
|
20
|
+
return el.matches(selector);
|
21
|
+
}
|
22
|
+
catch {
|
23
|
+
try {
|
24
|
+
selector = ':open';
|
25
|
+
return el.matches(':open');
|
26
|
+
}
|
27
|
+
catch {
|
28
|
+
selector = '.\\:popover-open';
|
29
|
+
return el.matches('.\\:popover-open');
|
30
|
+
}
|
31
|
+
}
|
32
|
+
}
|
33
|
+
return (el) => (selector ? el.matches(selector) : setSelector(el));
|
34
|
+
})();
|
15
35
|
const TOOLTIP_ARROW_EDGE_OFFSET = 6;
|
16
36
|
const TOOLTIP_SR_ONLY_CLASS = 'sr-only';
|
37
|
+
const TOOLTIP_OFFSET = 10;
|
17
38
|
const DIRECTION_CLASSES = [
|
18
39
|
'tooltip-n',
|
19
40
|
'tooltip-s',
|
@@ -22,8 +43,34 @@ const DIRECTION_CLASSES = [
|
|
22
43
|
'tooltip-ne',
|
23
44
|
'tooltip-se',
|
24
45
|
'tooltip-nw',
|
25
|
-
'tooltip-sw'
|
46
|
+
'tooltip-sw',
|
26
47
|
];
|
48
|
+
function closeOpenTooltips(except) {
|
49
|
+
for (const tooltip of openTooltips) {
|
50
|
+
if (tooltip === except)
|
51
|
+
continue;
|
52
|
+
if (isPopoverOpen(tooltip)) {
|
53
|
+
tooltip.hidePopover();
|
54
|
+
}
|
55
|
+
else {
|
56
|
+
openTooltips.delete(tooltip);
|
57
|
+
}
|
58
|
+
}
|
59
|
+
}
|
60
|
+
function focusOutListener() {
|
61
|
+
closeOpenTooltips();
|
62
|
+
}
|
63
|
+
function focusInListener(event) {
|
64
|
+
setTimeout(() => {
|
65
|
+
for (const tooltip of openTooltips) {
|
66
|
+
if (isPopoverOpen(tooltip) && tooltip.showReason === 'focus' && tooltip.control !== event.target) {
|
67
|
+
tooltip.hidePopover();
|
68
|
+
}
|
69
|
+
}
|
70
|
+
}, 0);
|
71
|
+
}
|
72
|
+
const tooltips = new Set();
|
73
|
+
const openTooltips = new Set();
|
27
74
|
class ToolTipElement extends HTMLElement {
|
28
75
|
constructor() {
|
29
76
|
super(...arguments);
|
@@ -32,16 +79,14 @@ class ToolTipElement extends HTMLElement {
|
|
32
79
|
_ToolTipElement_align.set(this, 'center');
|
33
80
|
_ToolTipElement_side.set(this, 'outside-bottom');
|
34
81
|
_ToolTipElement_allowUpdatePosition.set(this, false);
|
82
|
+
_ToolTipElement_showReason.set(this, 'mouse');
|
35
83
|
}
|
36
84
|
styles() {
|
37
85
|
return `
|
38
86
|
:host {
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
font: normal normal 11px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
43
|
-
-webkit-font-smoothing: subpixel-antialiased;
|
44
|
-
color: var(--color-fg-on-emphasis);
|
87
|
+
padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed) !important;
|
88
|
+
font: var(--text-body-shorthand-small);
|
89
|
+
color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)) !important;
|
45
90
|
text-align: center;
|
46
91
|
text-decoration: none;
|
47
92
|
text-shadow: none;
|
@@ -49,30 +94,34 @@ class ToolTipElement extends HTMLElement {
|
|
49
94
|
letter-spacing: normal;
|
50
95
|
word-wrap: break-word;
|
51
96
|
white-space: pre;
|
52
|
-
background: var(--color-neutral-emphasis-plus);
|
53
|
-
border-radius:
|
97
|
+
background: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)) !important;
|
98
|
+
border-radius: var(--borderRadius-medium);
|
99
|
+
border: 0 !important;
|
54
100
|
opacity: 0;
|
55
|
-
max-width:
|
101
|
+
max-width: var(--overlay-width-small);
|
56
102
|
word-wrap: break-word;
|
57
103
|
white-space: normal;
|
58
|
-
width: max-content;
|
104
|
+
width: max-content !important;
|
105
|
+
inset: var(--tool-tip-position-top, 0) auto auto var(--tool-tip-position-left, 0) !important;
|
106
|
+
overflow: visible !important;
|
107
|
+
text-wrap: balance;
|
59
108
|
}
|
60
109
|
|
61
110
|
:host:before{
|
62
111
|
position: absolute;
|
63
112
|
z-index: 1000001;
|
64
|
-
color: var(--color-neutral-emphasis-plus);
|
113
|
+
color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
|
65
114
|
content: "";
|
66
115
|
border: 6px solid transparent;
|
67
|
-
opacity: 0
|
116
|
+
opacity: 0;
|
68
117
|
}
|
69
118
|
|
70
119
|
@keyframes tooltip-appear {
|
71
120
|
from {
|
72
|
-
opacity: 0
|
121
|
+
opacity: 0;
|
73
122
|
}
|
74
123
|
to {
|
75
|
-
opacity: 1
|
124
|
+
opacity: 1;
|
76
125
|
}
|
77
126
|
}
|
78
127
|
|
@@ -82,16 +131,24 @@ class ToolTipElement extends HTMLElement {
|
|
82
131
|
right: 0;
|
83
132
|
left: 0;
|
84
133
|
height: 12px;
|
85
|
-
content: ""
|
134
|
+
content: "";
|
135
|
+
}
|
136
|
+
|
137
|
+
:host(:popover-open),
|
138
|
+
:host(:popover-open):before {
|
139
|
+
animation-name: tooltip-appear;
|
140
|
+
animation-duration: .1s;
|
141
|
+
animation-fill-mode: forwards;
|
142
|
+
animation-timing-function: ease-in;
|
86
143
|
}
|
87
144
|
|
88
|
-
:host(
|
89
|
-
:host(
|
145
|
+
:host(.\\:popover-open),
|
146
|
+
:host(.\\:popover-open):before {
|
90
147
|
animation-name: tooltip-appear;
|
91
148
|
animation-duration: .1s;
|
92
149
|
animation-fill-mode: forwards;
|
93
150
|
animation-timing-function: ease-in;
|
94
|
-
animation-delay: .4s
|
151
|
+
animation-delay: .4s;
|
95
152
|
}
|
96
153
|
|
97
154
|
:host(.tooltip-s):before,
|
@@ -99,62 +156,67 @@ class ToolTipElement extends HTMLElement {
|
|
99
156
|
right: 50%;
|
100
157
|
margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
|
101
158
|
}
|
102
|
-
|
103
159
|
:host(.tooltip-s):before,
|
104
160
|
:host(.tooltip-se):before,
|
105
161
|
:host(.tooltip-sw):before {
|
106
162
|
bottom: 100%;
|
107
|
-
border-bottom-color: var(--color-neutral-emphasis-plus)
|
163
|
+
border-bottom-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
|
108
164
|
}
|
109
|
-
|
110
165
|
:host(.tooltip-s):after,
|
111
166
|
:host(.tooltip-se):after,
|
112
167
|
:host(.tooltip-sw):after {
|
113
168
|
bottom: 100%
|
114
169
|
}
|
115
|
-
|
116
170
|
:host(.tooltip-n):before,
|
117
171
|
:host(.tooltip-ne):before,
|
118
172
|
:host(.tooltip-nw):before {
|
119
173
|
top: 100%;
|
120
|
-
border-top-color: var(--color-neutral-emphasis-plus)
|
174
|
+
border-top-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
|
121
175
|
}
|
122
|
-
|
123
176
|
:host(.tooltip-n):after,
|
124
177
|
:host(.tooltip-ne):after,
|
125
178
|
:host(.tooltip-nw):after {
|
126
|
-
top: 100
|
179
|
+
top: 100%;
|
127
180
|
}
|
128
|
-
|
129
181
|
:host(.tooltip-se):before,
|
130
182
|
:host(.tooltip-ne):before {
|
131
183
|
left: 0;
|
132
184
|
margin-left: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
|
133
185
|
}
|
134
|
-
|
135
186
|
:host(.tooltip-sw):before,
|
136
187
|
:host(.tooltip-nw):before {
|
137
188
|
right: 0;
|
138
189
|
margin-right: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
|
139
190
|
}
|
140
|
-
|
141
191
|
:host(.tooltip-w):before {
|
142
192
|
top: 50%;
|
143
193
|
bottom: 50%;
|
144
194
|
left: 100%;
|
145
195
|
margin-top: -6px;
|
146
|
-
border-left-color: var(--color-neutral-emphasis-plus)
|
196
|
+
border-left-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
|
147
197
|
}
|
148
|
-
|
149
198
|
:host(.tooltip-e):before {
|
150
199
|
top: 50%;
|
151
200
|
right: 100%;
|
152
201
|
bottom: 50%;
|
153
202
|
margin-top: -6px;
|
154
|
-
border-right-color: var(--color-neutral-emphasis-plus)
|
203
|
+
border-right-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
|
204
|
+
}
|
205
|
+
|
206
|
+
@media (forced-colors: active) {
|
207
|
+
:host {
|
208
|
+
outline: solid 1px transparent;
|
209
|
+
}
|
210
|
+
|
211
|
+
:host:before {
|
212
|
+
display: none;
|
213
|
+
}
|
155
214
|
}
|
156
215
|
`;
|
157
216
|
}
|
217
|
+
get showReason() {
|
218
|
+
return __classPrivateFieldGet(this, _ToolTipElement_showReason, "f");
|
219
|
+
}
|
158
220
|
get htmlFor() {
|
159
221
|
return this.getAttribute('for') || '';
|
160
222
|
}
|
@@ -177,16 +239,21 @@ class ToolTipElement extends HTMLElement {
|
|
177
239
|
get control() {
|
178
240
|
return this.ownerDocument.getElementById(this.htmlFor);
|
179
241
|
}
|
242
|
+
/* @deprecated */
|
180
243
|
set hiddenFromView(value) {
|
181
|
-
|
182
|
-
|
183
|
-
|
244
|
+
if (value && isPopoverOpen(this)) {
|
245
|
+
this.hidePopover();
|
246
|
+
}
|
247
|
+
else if (!value && !isPopoverOpen(this)) {
|
248
|
+
this.showPopover();
|
249
|
+
}
|
184
250
|
}
|
251
|
+
/* @deprecated */
|
185
252
|
get hiddenFromView() {
|
186
|
-
return this
|
253
|
+
return !isPopoverOpen(this);
|
187
254
|
}
|
188
255
|
connectedCallback() {
|
189
|
-
|
256
|
+
tooltips.add(this);
|
190
257
|
__classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateControlReference).call(this);
|
191
258
|
__classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateDirection).call(this);
|
192
259
|
if (!this.shadowRoot) {
|
@@ -195,44 +262,66 @@ class ToolTipElement extends HTMLElement {
|
|
195
262
|
style.textContent = this.styles();
|
196
263
|
shadow.appendChild(document.createElement('slot'));
|
197
264
|
}
|
198
|
-
this.
|
265
|
+
__classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this, false);
|
199
266
|
__classPrivateFieldSet(this, _ToolTipElement_allowUpdatePosition, true, "f");
|
200
267
|
if (!this.control)
|
201
268
|
return;
|
202
269
|
this.setAttribute('role', 'tooltip');
|
203
|
-
|
270
|
+
__classPrivateFieldGet(this, _ToolTipElement_abortController, "f")?.abort();
|
204
271
|
__classPrivateFieldSet(this, _ToolTipElement_abortController, new AbortController(), "f");
|
205
272
|
const { signal } = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f");
|
206
273
|
this.addEventListener('mouseleave', this, { signal });
|
274
|
+
this.addEventListener('toggle', this, { signal });
|
207
275
|
this.control.addEventListener('mouseenter', this, { signal });
|
208
276
|
this.control.addEventListener('mouseleave', this, { signal });
|
209
277
|
this.control.addEventListener('focus', this, { signal });
|
210
|
-
this.control.addEventListener('
|
211
|
-
|
212
|
-
|
278
|
+
this.control.addEventListener('mousedown', this, { signal });
|
279
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
280
|
+
// @ts-ignore popoverTargetElement is not in the type definition
|
281
|
+
this.control.popoverTargetElement?.addEventListener('beforetoggle', this, {
|
282
|
+
signal,
|
283
|
+
});
|
284
|
+
this.ownerDocument.addEventListener('focusout', focusOutListener);
|
285
|
+
this.ownerDocument.addEventListener('focusin', focusInListener);
|
286
|
+
this.ownerDocument.addEventListener('keydown', this, { signal, capture: true });
|
213
287
|
}
|
214
288
|
disconnectedCallback() {
|
215
|
-
|
216
|
-
(
|
289
|
+
tooltips.delete(this);
|
290
|
+
openTooltips.delete(this);
|
291
|
+
__classPrivateFieldGet(this, _ToolTipElement_abortController, "f")?.abort();
|
217
292
|
}
|
218
|
-
handleEvent(event) {
|
293
|
+
async handleEvent(event) {
|
219
294
|
if (!this.control)
|
220
295
|
return;
|
296
|
+
const showing = isPopoverOpen(this);
|
221
297
|
// Ensures that tooltip stays open when hovering between tooltip and element
|
222
298
|
// WCAG Success Criterion 1.4.13 Hoverable
|
223
|
-
|
224
|
-
|
299
|
+
const shouldShow = event.type === 'mouseenter' ||
|
300
|
+
// Only show tooltip on focus if running in headless browser (for tests) or if focus ring
|
301
|
+
// is visible (i.e. if user is using keyboard navigation)
|
302
|
+
(event.type === 'focus' && (navigator.webdriver || this.control.matches(':focus-visible')));
|
303
|
+
const isMouseLeaveFromButton = event.type === 'mouseleave' &&
|
304
|
+
event.relatedTarget !== this.control &&
|
305
|
+
event.relatedTarget !== this;
|
306
|
+
const isEscapeKeydown = event.type === 'keydown' && event.key === 'Escape';
|
307
|
+
const isMouseDownOnButton = event.type === 'mousedown' && event.currentTarget === this.control;
|
308
|
+
const isOpeningOtherPopover = event.type === 'beforetoggle' && event.currentTarget !== this;
|
309
|
+
const shouldHide = isMouseLeaveFromButton || isEscapeKeydown || isMouseDownOnButton || isOpeningOtherPopover;
|
310
|
+
if (showing && isEscapeKeydown) {
|
311
|
+
/* eslint-disable-next-line no-restricted-syntax */
|
312
|
+
event.stopImmediatePropagation();
|
313
|
+
event.preventDefault();
|
225
314
|
}
|
226
|
-
|
227
|
-
|
315
|
+
await Promise.resolve();
|
316
|
+
if (!showing && shouldShow && !isPopoverOpen(this)) {
|
317
|
+
__classPrivateFieldSet(this, _ToolTipElement_showReason, event.type === 'mouseenter' ? 'mouse' : 'focus', "f");
|
318
|
+
this.showPopover();
|
228
319
|
}
|
229
|
-
else if (
|
230
|
-
|
231
|
-
event.relatedTarget !== this) {
|
232
|
-
this.hiddenFromView = true;
|
320
|
+
else if (showing && shouldHide && isPopoverOpen(this)) {
|
321
|
+
this.hidePopover();
|
233
322
|
}
|
234
|
-
|
235
|
-
this.
|
323
|
+
if (event.type === 'toggle') {
|
324
|
+
__classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this, event.newState === 'open');
|
236
325
|
}
|
237
326
|
}
|
238
327
|
attributeChangedCallback(name) {
|
@@ -246,17 +335,17 @@ class ToolTipElement extends HTMLElement {
|
|
246
335
|
}
|
247
336
|
}
|
248
337
|
}
|
249
|
-
_ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new WeakMap(), _ToolTipElement_side = new WeakMap(), _ToolTipElement_allowUpdatePosition = new WeakMap(), _ToolTipElement_instances = new WeakSet(), _ToolTipElement_update = function _ToolTipElement_update() {
|
250
|
-
if (
|
251
|
-
|
338
|
+
_ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new WeakMap(), _ToolTipElement_side = new WeakMap(), _ToolTipElement_allowUpdatePosition = new WeakMap(), _ToolTipElement_showReason = new WeakMap(), _ToolTipElement_instances = new WeakSet(), _ToolTipElement_update = function _ToolTipElement_update(isOpen) {
|
339
|
+
if (isOpen) {
|
340
|
+
openTooltips.add(this);
|
341
|
+
this.classList.remove(TOOLTIP_SR_ONLY_CLASS);
|
342
|
+
closeOpenTooltips(this);
|
343
|
+
__classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updatePosition).call(this);
|
252
344
|
}
|
253
345
|
else {
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
tooltip.hiddenFromView = true;
|
258
|
-
}
|
259
|
-
__classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updatePosition).call(this);
|
346
|
+
openTooltips.delete(this);
|
347
|
+
this.classList.remove(...DIRECTION_CLASSES);
|
348
|
+
this.classList.add(TOOLTIP_SR_ONLY_CLASS);
|
260
349
|
}
|
261
350
|
}, _ToolTipElement_updateControlReference = function _ToolTipElement_updateControlReference() {
|
262
351
|
if (!this.id || !this.control)
|
@@ -331,19 +420,17 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
|
|
331
420
|
}, _ToolTipElement_updatePosition = function _ToolTipElement_updatePosition() {
|
332
421
|
if (!this.control)
|
333
422
|
return;
|
334
|
-
if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || this
|
423
|
+
if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || !isPopoverOpen(this))
|
335
424
|
return;
|
336
|
-
const TOOLTIP_OFFSET = 10;
|
337
|
-
this.style.left = `0px`; // Ensures we have reliable tooltip width in `getAnchoredPosition`
|
338
425
|
const position = getAnchoredPosition(this, this.control, {
|
339
426
|
side: __classPrivateFieldGet(this, _ToolTipElement_side, "f"),
|
340
427
|
align: __classPrivateFieldGet(this, _ToolTipElement_align, "f"),
|
341
|
-
anchorOffset: TOOLTIP_OFFSET
|
428
|
+
anchorOffset: TOOLTIP_OFFSET,
|
342
429
|
});
|
343
430
|
const anchorSide = position.anchorSide;
|
344
431
|
const align = position.anchorAlign;
|
345
|
-
this.style.top
|
346
|
-
this.style.left
|
432
|
+
this.style.setProperty('--tool-tip-position-top', `${position.top}px`);
|
433
|
+
this.style.setProperty('--tool-tip-position-left', `${position.left}px`);
|
347
434
|
let direction = 's';
|
348
435
|
if (anchorSide === 'outside-left') {
|
349
436
|
direction = 'w';
|
@@ -1 +1 @@
|
|
1
|
-
.UnderlineNav{
|
1
|
+
.UnderlineNav{box-shadow:inset 0 -1px 0 var(--borderColor-muted,var(--color-border-muted));display:flex;min-height:var(--base-size-48,3rem);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:auto;justify-content:space-between}.UnderlineNav .Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-default,var(--color-fg-default));margin-left:var(--control-medium-gap,.5rem)}.UnderlineNav .Counter--primary{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.UnderlineNav-body{align-items:center;display:flex;gap:var(--control-medium-gap,.5rem);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;display:flex;font-size:var(--text-body-size-medium,.875rem);line-height:30px;padding:0 var(--control-medium-paddingInline-condensed,.5rem);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--borderColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-default,var(--color-fg-default));outline-offset:-2px;-webkit-text-decoration:none;text-decoration:none;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.UnderlineNav-item:before{content:"";height:100%;left:50%;min-height:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:fine){.UnderlineNav-item:hover{background:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));color:var(--fgColor-default,var(--color-fg-default));-webkit-text-decoration:none;text-decoration:none;transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{border-bottom-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active));color:var(--fgColor-default,var(--color-fg-default));font-weight:var(--base-text-weight-semibold,600)}.UnderlineNav-item.selected:after,.UnderlineNav-item[aria-current]:not([aria-current=false]):after,.UnderlineNav-item[role=tab][aria-selected=true]:after{background:var(--underlineNav-borderColor-active,var(--color-primer-border-active));border-radius:var(--borderRadius-medium,.375rem);bottom:calc(50% - 25px);content:"";height:2px;position:absolute;right:50%;transform:translate(50%,-50%);width:100%;z-index:1}.UnderlineNav--right{justify-content:flex-end}.UnderlineNav--right .UnderlineNav-actions{flex:1 1 auto}.UnderlineNav-actions{align-self:center}.UnderlineNav--full{display:block}.UnderlineNav--full .UnderlineNav-body{min-height:var(--base-size-48,3rem)}.UnderlineNav-octicon{color:var(--fgColor-muted,var(--color-fg-muted));display:inline!important;margin-right:var(--control-medium-gap,.5rem);fill:var(--fgColor-muted,var(--color-fg-muted))}.UnderlineNav-container{display:flex;justify-content:space-between}
|