jekyll-v4-theme-primer 0.12.0 → 0.14.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 +12 -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 +70 -0
- metadata +77 -5
@@ -1 +1 @@
|
|
1
|
-
.dropdown{position:relative}.dropdown-caret{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;border-style:solid;border-width:var(--borderWidth-thicker,4px) var(--borderWidth-thicker,4px) 0;content:"";display:inline-block;height:0;vertical-align:middle;width:0}.dropdown-menu{background-clip:padding-box;background-color:var(--color-canvas-overlay);border:var(--borderWidth-thin,1px) solid var(--color-border-default);border-radius:var(--borderRadius-medium
|
1
|
+
.dropdown{position:relative}.dropdown-caret{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;border-style:solid;border-width:var(--borderWidth-thicker,max(4px,.25rem)) var(--borderWidth-thicker,max(4px,.25rem)) 0;content:"";display:inline-block;height:0;vertical-align:middle;width:0}.dropdown-menu{background-clip:padding-box;background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,.375rem);box-shadow:var(--shadow-floating-large,var(--color-shadow-large));left:0;list-style:none;margin-top:2px;padding-bottom:var(--control-small-paddingBlock,.25rem);padding-top:var(--control-small-paddingBlock,.25rem);position:absolute;top:100%;width:160px;z-index:100}.dropdown-menu:after,.dropdown-menu:before{content:"";display:inline-block;position:absolute}.dropdown-menu:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default,var(--color-border-default))}.dropdown-menu:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor,var(--color-canvas-overlay))}.dropdown-menu>ul{list-style:none}.dropdown-menu-no-overflow{width:auto}.dropdown-menu-no-overflow .dropdown-item{overflow:visible;padding:var(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-spacious,1rem);text-overflow:inherit}.dropdown-item{color:var(--fgColor-default,var(--color-fg-default));display:block;overflow:hidden;padding:var(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-condensed,.5rem) var(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-spacious,1rem);text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover{background-color:var(--bgColor-accent-emphasis,var(--color-accent-emphasis));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));-webkit-text-decoration:none;text-decoration:none}.dropdown-item:hover>.octicon{color:inherit;opacity:1}.dropdown-item:hover [class*=color-fg-]{color:inherit!important}.dropdown-item:hover>.Label{border-color:currentcolor;color:inherit!important}.dropdown-item.btn-link,.dropdown-signout{text-align:left;width:100%}.dropdown-signout{background:none;border:0}.dropdown-divider{border-top:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));display:block;height:0;margin:var(--stack-gap-condensed,.5rem) 0}.dropdown-header{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);padding:var(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-spacious,1rem)}.dropdown-item[aria-checked=false] .octicon-check{display:none}.dropdown-menu-w{left:auto;margin-right:8px;margin-top:0;right:100%;top:0;width:auto}.dropdown-menu-w:before{border-color:#0000;border-left-color:var(--borderColor-default,var(--color-border-default));left:auto;right:-16px;top:10px}.dropdown-menu-w:after{border-color:#0000;border-left-color:var(--overlay-bgColor,var(--color-canvas-overlay));left:auto;right:-14px;top:11px}.dropdown-menu-e{left:100%;margin-left:8px;margin-top:0;top:0;width:auto}.dropdown-menu-e:before{border-color:#0000;border-right-color:var(--borderColor-default,var(--color-border-default));left:-16px;top:10px}.dropdown-menu-e:after{border-color:#0000;border-right-color:var(--overlay-bgColor,var(--color-canvas-overlay));left:-14px;top:11px}.dropdown-menu-ne{bottom:100%;left:0;margin-bottom:3px;top:auto}.dropdown-menu-ne:after,.dropdown-menu-ne:before{right:auto;top:auto}.dropdown-menu-ne:before{border-bottom:0;border-left:8px solid #0000;border-right:8px solid #0000;border-top:8px solid var(--borderColor-default,var(--color-border-default));bottom:-8px;left:9px}.dropdown-menu-ne:after{border-bottom:0;border-left:7px solid #0000;border-right:7px solid #0000;border-top:7px solid var(--overlay-bgColor,var(--color-canvas-overlay));bottom:-7px;left:10px}.dropdown-menu-s{left:auto;right:50%;transform:translateX(50%)}.dropdown-menu-s:before{right:50%;top:-16px;transform:translateX(50%)}.dropdown-menu-s:after{right:50%;top:-14px;transform:translateX(50%)}.dropdown-menu-sw{left:auto;right:0}.dropdown-menu-sw:before{left:auto;right:9px;top:-16px}.dropdown-menu-sw:after{left:auto;right:10px;top:-14px}.dropdown-menu-se:before{left:9px;top:-16px}.dropdown-menu-se:after{left:10px;top:-14px}
|
@@ -1 +1 @@
|
|
1
|
-
.Layout{
|
1
|
+
.Layout{display:grid;--Layout-sidebar-width:220px;--Layout-gutter:16px;grid-auto-flow:column;grid-template-columns:auto 0 minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter)));grid-gap:var(--Layout-gutter)}@media (max-width:calc(544px - 0.02px)){.Layout{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout .Layout-divider,.Layout .Layout-main,.Layout .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--divided{--Layout-gutter:0}.Layout.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--bgColor-inset,var(--color-canvas-inset));border-color:var(--borderColor-default,var(--color-border-default));border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;height:8px;margin-right:0}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(768px - 0.02px)){.Layout.Layout--flowRow-until-md{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-md .Layout-divider,.Layout.Layout--flowRow-until-md .Layout-main,.Layout.Layout--flowRow-until-md .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-md.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--bgColor-inset,var(--color-canvas-inset));border-color:var(--borderColor-default,var(--color-border-default));border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;height:8px;margin-right:0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(1012px - 0.02px)){.Layout.Layout--flowRow-until-lg{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-lg .Layout-divider,.Layout.Layout--flowRow-until-lg .Layout-main,.Layout.Layout--flowRow-until-lg .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-lg.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--bgColor-inset,var(--color-canvas-inset));border-color:var(--borderColor-default,var(--color-border-default));border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;height:8px;margin-right:0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}.Layout .Layout-sidebar{grid-column:1}.Layout .Layout-divider{display:none}.Layout .Layout-main{grid-column:2/span 2}@media (min-width:1012px){.Layout{--Layout-gutter:24px}}.Layout.Layout--gutter-none{--Layout-gutter:0px}.Layout.Layout--gutter-condensed{--Layout-gutter:16px}@media (min-width:1012px){.Layout.Layout--gutter-spacious{--Layout-gutter:32px}}@media (min-width:1280px){.Layout.Layout--gutter-spacious{--Layout-gutter:40px}}@media (min-width:544px){.Layout{--Layout-sidebar-width:220px}}@media (min-width:768px){.Layout{--Layout-sidebar-width:256px}}@media (min-width:1012px){.Layout{--Layout-sidebar-width:296px}}@media (min-width:768px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:240px}}@media (min-width:1012px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:256px}.Layout.Layout--sidebar-wide{--Layout-sidebar-width:320px}}@media (min-width:1280px){.Layout.Layout--sidebar-wide{--Layout-sidebar-width:336px}}.Layout.Layout--sidebarPosition-start .Layout-sidebar{grid-column:1}.Layout.Layout--sidebarPosition-start .Layout-main{grid-column:2/span 2}.Layout.Layout--sidebarPosition-end{grid-template-columns:minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto}.Layout.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout.Layout--sidebarPosition-end .Layout-sidebar{grid-column:2/span 2}.Layout.Layout--divided .Layout-divider{background:var(--borderColor-default,var(--color-border-default));display:block;grid-column:2;margin-right:-1px;width:1px}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar{grid-column:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout-divider{display:none;width:1px}.Layout-sidebar{width:var(--Layout-sidebar-width)}.Layout-main{min-width:0}.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-xl{margin-left:auto;margin-right:auto}.Layout-main .Layout-main-centered-lg>.container-lg,.Layout-main .Layout-main-centered-lg>.container-md,.Layout-main .Layout-main-centered-lg>.container-xl,.Layout-main .Layout-main-centered-md>.container-lg,.Layout-main .Layout-main-centered-md>.container-md,.Layout-main .Layout-main-centered-md>.container-xl,.Layout-main .Layout-main-centered-xl>.container-lg,.Layout-main .Layout-main-centered-xl>.container-md,.Layout-main .Layout-main-centered-xl>.container-xl{margin-left:0}.Layout-main .Layout-main-centered-md{max-width:calc(var(--breakpoint-medium,48rem) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-lg{max-width:calc(var(--breakpoint-large,63.25rem) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-xl{max-width:calc(var(--breakpoint-xlarge,80rem) + var(--Layout-sidebar-width) + var(--Layout-gutter))}
|
@@ -1 +1 @@
|
|
1
|
-
.menu{background-color:var(--color-canvas-default);border:var(--borderWidth-thin,1px) solid var(--color-border-default);border-radius:var(--borderRadius-medium
|
1
|
+
.menu{background-color:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,.375rem);list-style:none;margin-bottom:var(--stack-gap-normal,1rem)}.menu-item{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));color:var(--fgColor-default,var(--color-fg-default));display:block;padding:var(--control-medium-paddingInline-condensed,.5rem) var(--control-medium-paddingInline-spacious,1rem);position:relative}.menu-item:first-child{border-top:0;border-top-right-radius:var(--borderRadius-medium,.375rem)}.menu-item:first-child,.menu-item:first-child:before{border-top-left-radius:var(--borderRadius-medium,.375rem)}.menu-item:last-child{border-bottom:0;border-bottom-right-radius:var(--borderRadius-medium,.375rem)}.menu-item:last-child,.menu-item:last-child:before{border-bottom-left-radius:var(--borderRadius-medium,.375rem)}.menu-item:hover{background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle));-webkit-text-decoration:none;text-decoration:none}.menu-item:active{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.menu-item.selected,.menu-item[aria-current]:not([aria-current=false]),.menu-item[aria-selected=true]{background-color:var(--menu-bgColor-active,var(--color-menu-bg-active));cursor:default}.menu-item.selected:before,.menu-item[aria-current]:not([aria-current=false]):before,.menu-item[aria-selected=true]:before{background-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active));bottom:0;content:"";left:0;position:absolute;top:0;width:2px}.menu-item .octicon{color:var(--fgColor-muted,var(--color-fg-muted));margin-right:var(--control-medium-gap,.5rem);text-align:center;width:16px}.menu-item .Counter{float:right;margin-left:var(--control-small-gap,.25rem)}.menu-item .menu-warning{color:var(--fgColor-attention,var(--color-attention-fg));float:right}.menu-item .avatar{float:left;margin-right:var(--control-small-gap,.25rem)}.menu-item.alert .Counter{color:var(--fgColor-danger,var(--color-danger-fg))}.menu-heading{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));color:var(--fgColor-default,var(--color-fg-default));display:block;font-size:inherit;font-weight:var(--base-text-weight-semibold,600);margin-bottom:0;margin-top:0;padding:var(--control-medium-paddingInline-condensed,.5rem) var(--control-medium-paddingInline-spacious,1rem)}.menu-heading:hover{-webkit-text-decoration:none;text-decoration:none}.menu-heading:first-child{border-top-left-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}.menu-heading:last-child{border-bottom:0;border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-bottom-right-radius:var(--borderRadius-medium,.375rem)}
|
@@ -14,39 +14,41 @@ 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
|
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
|
24
|
-
if (!button)
|
23
|
+
const button = target?.closest('button');
|
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
|
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) {
|
32
33
|
dialog.openButton = button;
|
33
34
|
dialog.show();
|
35
|
+
// A buttons default behaviour in some browsers it to send a pointer event
|
36
|
+
// If the behaviour is allowed through the dialog will be shown but then
|
37
|
+
// quickly hidden- as if it were never shown. This prevents that.
|
38
|
+
event.preventDefault();
|
34
39
|
return;
|
35
40
|
}
|
36
41
|
}
|
37
|
-
|
38
|
-
const topLevelDialog = overlayStack[overlayStack.length - 1];
|
39
|
-
if (!topLevelDialog)
|
42
|
+
if (!overlayStack.length)
|
40
43
|
return;
|
41
|
-
dialogId = button.getAttribute('data-close-dialog-id');
|
42
|
-
if (dialogId
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
topLevelDialog.close(true);
|
44
|
+
dialogId = button.getAttribute('data-close-dialog-id') || button.getAttribute('data-submit-dialog-id');
|
45
|
+
if (dialogId) {
|
46
|
+
const dialog = document.getElementById(dialogId);
|
47
|
+
if (dialog instanceof ModalDialogElement) {
|
48
|
+
const dialogIndex = overlayStack.findIndex(ele => ele.id === dialogId);
|
49
|
+
overlayStack.splice(dialogIndex, 1);
|
50
|
+
dialog.close(button.hasAttribute('data-submit-dialog-id'));
|
51
|
+
}
|
50
52
|
}
|
51
53
|
}
|
52
54
|
function keydownHandler(event) {
|
@@ -62,7 +64,7 @@ function keydownHandler(event) {
|
|
62
64
|
}
|
63
65
|
function mousedownHandler(event) {
|
64
66
|
const target = event.target;
|
65
|
-
if (target
|
67
|
+
if (target?.closest('button'))
|
66
68
|
return;
|
67
69
|
// Find the top level dialog that is open.
|
68
70
|
const topLevelDialog = overlayStack[overlayStack.length - 1];
|
@@ -91,31 +93,32 @@ export class ModalDialogElement extends HTMLElement {
|
|
91
93
|
return this.hasAttribute('open');
|
92
94
|
}
|
93
95
|
set open(value) {
|
94
|
-
var _a, _b, _c, _d;
|
95
96
|
if (value) {
|
96
97
|
if (this.open)
|
97
98
|
return;
|
98
99
|
this.setAttribute('open', '');
|
99
|
-
|
100
|
+
this.setAttribute('aria-disabled', 'false');
|
100
101
|
document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`;
|
101
102
|
document.body.style.overflow = 'hidden';
|
103
|
+
__classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)?.classList.remove('Overlay--hidden');
|
102
104
|
if (__classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal.aborted) {
|
103
105
|
__classPrivateFieldSet(this, _ModalDialogElement_focusAbortController, new AbortController(), "f");
|
104
106
|
}
|
105
|
-
focusTrap(this,
|
107
|
+
focusTrap(this, this.querySelector('[autofocus]'), __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal);
|
106
108
|
overlayStack.push(this);
|
107
109
|
}
|
108
110
|
else {
|
109
111
|
if (!this.open)
|
110
112
|
return;
|
111
113
|
this.removeAttribute('open');
|
112
|
-
|
114
|
+
this.setAttribute('aria-disabled', 'true');
|
115
|
+
__classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)?.classList.add('Overlay--hidden');
|
113
116
|
document.body.style.paddingRight = '0';
|
114
117
|
document.body.style.overflow = 'initial';
|
115
118
|
__classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").abort();
|
116
119
|
// if #openButton is a child of a menu, we need to focus a suitable child of the menu
|
117
120
|
// element since it is expected for the menu to close on click
|
118
|
-
const menu =
|
121
|
+
const menu = this.openButton?.closest('details') || this.openButton?.closest('action-menu');
|
119
122
|
if (menu) {
|
120
123
|
focusIfNeeded(getFocusableChild(menu));
|
121
124
|
}
|
@@ -150,8 +153,7 @@ export class ModalDialogElement extends HTMLElement {
|
|
150
153
|
}
|
151
154
|
}
|
152
155
|
_ModalDialogElement_focusAbortController = new WeakMap(), _ModalDialogElement_instances = new WeakSet(), _ModalDialogElement_overlayBackdrop_get = function _ModalDialogElement_overlayBackdrop_get() {
|
153
|
-
|
154
|
-
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')) {
|
155
157
|
return this.parentElement;
|
156
158
|
}
|
157
159
|
return null;
|
@@ -160,14 +162,23 @@ _ModalDialogElement_focusAbortController = new WeakMap(), _ModalDialogElement_in
|
|
160
162
|
return;
|
161
163
|
if (event.isComposing)
|
162
164
|
return;
|
165
|
+
if (!this.open)
|
166
|
+
return;
|
163
167
|
switch (event.key) {
|
164
168
|
case 'Escape':
|
165
|
-
|
166
|
-
|
167
|
-
|
169
|
+
this.close();
|
170
|
+
event.preventDefault();
|
171
|
+
/* eslint-disable-next-line no-restricted-syntax */
|
172
|
+
event.stopPropagation();
|
173
|
+
break;
|
174
|
+
case 'Enter': {
|
175
|
+
const target = event.target;
|
176
|
+
if (target.getAttribute('data-close-dialog-id') === this.id) {
|
177
|
+
/* eslint-disable-next-line no-restricted-syntax */
|
168
178
|
event.stopPropagation();
|
169
179
|
}
|
170
180
|
break;
|
181
|
+
}
|
171
182
|
}
|
172
183
|
};
|
173
184
|
if (!window.customElements.get('modal-dialog')) {
|
@@ -1 +1 @@
|
|
1
|
-
|
1
|
+
anchored-position[popover]{border-width:0;min-width:192px;overflow:visible;padding:0;position:absolute}anchored-position:not(.Overlay){background:none}.Overlay[popover]:not(:popover-open){display:none}anchored-position.not-anchored::backdrop,dialog::backdrop{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted))}@media (forced-colors:active){.Overlay{outline:1px solid #0000}}
|
@@ -1,8 +1,11 @@
|
|
1
1
|
{
|
2
2
|
"name": "alpha/overlay",
|
3
3
|
"selectors": [
|
4
|
-
"
|
5
|
-
"
|
6
|
-
"
|
4
|
+
"anchored-position[popover]",
|
5
|
+
"anchored-position:not(.Overlay)",
|
6
|
+
".Overlay[popover]:not(:popover-open)",
|
7
|
+
"anchored-position.not-anchored::backdrop",
|
8
|
+
"dialog::backdrop",
|
9
|
+
".Overlay"
|
7
10
|
]
|
8
11
|
}
|
@@ -1 +1 @@
|
|
1
|
-
.SegmentedControl{background-color:var(--color-segmented-control-bg);border-radius:var(--borderRadius-medium
|
1
|
+
.SegmentedControl{--segmentedControl-item-padding:var(--control-small-paddingBlock,0.25rem);background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;list-style:none}.SegmentedControl--iconOnly .Button--iconOnly.Button--medium,.SegmentedControl--iconOnly .Button--iconOnly.Button--small{padding-inline:0!important;width:100%}.SegmentedControl--small{--segmentedControl-item-padding:var(--control-xsmall-paddingBlock,0.125rem)}.SegmentedControl--small .SegmentedControl-item{height:var(--control-small-size,1.75rem)}.SegmentedControl--small .SegmentedControl-item .Button{padding-inline:calc(var(--control-xsmall-paddingInline-normal,.5rem) - var(--segmentedControl-item-padding))}.SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-small-size,1.75rem)}.SegmentedControl--medium .SegmentedControl-item{height:var(--control-medium-size,2rem)}.SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-medium-size,2rem)}.SegmentedControl-item{border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;height:var(--control-medium-size,2rem);justify-content:center;padding:var(--segmentedControl-item-padding);position:relative}.SegmentedControl-item .Button--invisible:hover:not(:disabled){background-color:var(--controlTrack-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.SegmentedControl-item .Button--invisible:active:not(:disabled){background-color:var(--controlTrack-bgColor-active,var(--color-action-list-item-default-active-bg))}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-selected-border))}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold,600)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock,.375rem);margin-top:var(--control-medium-paddingBlock,.375rem);position:absolute}.SegmentedControl-item .Button{border:0;border-radius:calc(var(--borderRadius-medium,.375rem) - var(--segmentedControl-item-padding)/2);font-weight:var(--base-text-weight-normal,400);height:100%;padding-inline:calc(var(--control-medium-paddingInline-normal,.75rem) - var(--segmentedControl-item-padding));width:100%}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--borderRadius-medium,.375rem) - var(--segmentedControl-item-padding)/1);outline-offset:calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin,max(1px, .0625rem)))}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}
|
@@ -2,7 +2,17 @@
|
|
2
2
|
"name": "alpha/segmented_control",
|
3
3
|
"selectors": [
|
4
4
|
".SegmentedControl",
|
5
|
+
".SegmentedControl--iconOnly .Button--iconOnly.Button--medium",
|
6
|
+
".SegmentedControl--iconOnly .Button--iconOnly.Button--small",
|
7
|
+
".SegmentedControl--small",
|
8
|
+
".SegmentedControl--small .SegmentedControl-item",
|
9
|
+
".SegmentedControl--small .SegmentedControl-item .Button",
|
10
|
+
".SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item",
|
11
|
+
".SegmentedControl--medium .SegmentedControl-item",
|
12
|
+
".SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item",
|
5
13
|
".SegmentedControl-item",
|
14
|
+
".SegmentedControl-item .Button--invisible:hover:not(:disabled)",
|
15
|
+
".SegmentedControl-item .Button--invisible:active:not(:disabled)",
|
6
16
|
".SegmentedControl-item.SegmentedControl-item--selected",
|
7
17
|
".SegmentedControl-item.SegmentedControl-item--selected .Button",
|
8
18
|
".SegmentedControl-item.SegmentedControl-item--selected .Button:hover",
|
@@ -12,20 +22,8 @@
|
|
12
22
|
".SegmentedControl-item:not(:first-child):before",
|
13
23
|
".SegmentedControl-item .Button",
|
14
24
|
".SegmentedControl-item .Button:focus-visible",
|
15
|
-
".SegmentedControl-item .Button--small",
|
16
|
-
".SegmentedControl-item .Button--small.Button--iconOnly",
|
17
|
-
".SegmentedControl-item .Button--small.Button--iconOnly:before",
|
18
|
-
".SegmentedControl-item .Button--medium",
|
19
|
-
".SegmentedControl-item .Button--medium.Button--iconOnly",
|
20
|
-
".SegmentedControl-item .Button--medium.Button--iconOnly:before",
|
21
|
-
".SegmentedControl-item .Button--large",
|
22
|
-
".SegmentedControl-item .Button--large.Button--iconOnly",
|
23
|
-
".SegmentedControl-item .Button--large.Button--iconOnly:before",
|
24
|
-
".SegmentedControl-item .Button--iconOnly",
|
25
25
|
".SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label",
|
26
26
|
".SegmentedControl--fullWidth",
|
27
|
-
".SegmentedControl--fullWidth .SegmentedControl-item"
|
28
|
-
".SegmentedControl--fullWidth .Button--iconOnly",
|
29
|
-
".SegmentedControl--fullWidth .Button-withTooltip"
|
27
|
+
".SegmentedControl--fullWidth .SegmentedControl-item"
|
30
28
|
]
|
31
29
|
}
|
@@ -20,17 +20,17 @@ 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
|
-
|
26
|
+
item.querySelector('[aria-current]')?.setAttribute('aria-current', 'false');
|
28
27
|
}
|
29
|
-
|
28
|
+
button.closest('li.SegmentedControl-item')?.classList.add('SegmentedControl-item--selected');
|
30
29
|
button.setAttribute('aria-current', 'true');
|
31
30
|
}
|
32
31
|
};
|
33
|
-
_SegmentedControlElement_instances = new WeakSet()
|
32
|
+
_SegmentedControlElement_instances = new WeakSet();
|
33
|
+
_SegmentedControlElement_updateButtonLabels = function _SegmentedControlElement_updateButtonLabels() {
|
34
34
|
for (const label of this.querySelectorAll('.Button-label')) {
|
35
35
|
label.setAttribute('data-content', label.textContent || '');
|
36
36
|
}
|
@@ -1 +1 @@
|
|
1
|
-
.tabnav{border-bottom:var(--borderWidth-thin,1px) solid var(--color-border-default);margin-bottom:var(--stack-gap-normal,
|
1
|
+
.tabnav{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));margin-bottom:var(--stack-gap-normal,1rem);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);overflow:auto}.tabnav-tab{background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-bottom:0;color:var(--fgColor-muted,var(--color-fg-muted));display:inline-block;flex-shrink:0;font-size:var(--text-body-size-medium,.875rem);line-height:23px;padding:var(--base-size-8,.5rem) var(--control-medium-paddingInline-spacious,1rem);-webkit-text-decoration:none;text-decoration:none;transition:color .2s cubic-bezier(.3,0,.5,1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--bgColor-default,var(--color-canvas-default));border-color:var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,.375rem) var(--borderRadius-medium,.375rem) 0 0;color:var(--fgColor-default,var(--color-fg-default))}.tabnav-tab.selected .octicon,.tabnav-tab[aria-current]:not([aria-current=false]) .octicon,.tabnav-tab[aria-selected=true] .octicon{color:inherit}.tabnav-tab:hover{color:var(--fgColor-default,var(--color-fg-default));-webkit-text-decoration:none;text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--borderRadius-medium,.375rem) var(--borderRadius-medium,.375rem) 0 0!important;outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--fgColor-muted,var(--color-fg-muted))}.tabnav-tab .octicon{margin-right:var(--control-small-gap,.25rem)}.tabnav-tab .Counter{color:inherit;margin-left:var(--control-small-gap,.25rem)}.tabnav-extra{color:var(--fgColor-muted,var(--color-fg-muted));display:inline-block;font-size:var(--text-body-size-small,.75rem);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:2px}a.tabnav-extra:hover{color:var(--fgColor-accent,var(--color-accent-fg));-webkit-text-decoration:none;text-decoration:none}.tabnav-btn{margin-left:var(--controlStack-medium-gap-condensed,.5rem)}
|
@@ -1,3 +1 @@
|
|
1
|
-
.FormControl{display:inline-flex;flex-direction:column;gap:var(--base-size-4,4px)}.FormControl--fullWidth{display:flex}.FormControl-label{color:var(--color-fg-default);font-size:var(--text-body-size-medium,14px);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-medium,1.42857);-webkit-user-select:none;user-select:none}.FormControl-caption{color:var(--color-fg-muted);font-size:var(--text-caption-size,12px);font-weight:var(--text-caption-weight,400);line-height:var(--text-caption-lineHeight,1.33333);margin-bottom:0}.FormControl-inlineValidation{fill:var(--color-danger-fg);align-items:center;color:var(--color-danger-fg);display:flex;flex-direction:row;font-size:var(--text-caption-size,12px);font-weight:var(--base-text-weight-semibold,600);gap:var(--base-size-4,4px)}.FormControl-inlineValidation p{margin-bottom:0}.FormControl-spacingWrapper{display:flex;flex-direction:column;row-gap:.5rem}.FormControl-horizontalGroup{column-gap:.5rem;display:flex}.FormControl-input,.FormControl-select,.FormControl-textarea{background-color:var(--color-canvas-default);border:var(--borderWidth-thin,1px) solid var(--color-border-default);color:var(--color-fg-default)}.FormControl-input[disabled],.FormControl-select[disabled],.FormControl-textarea[disabled]{-webkit-text-fill-color:var(--color-primer-fg-disabled);background-color:var(--color-input-disabled-bg);border-color:var(--color-border-default);color:var(--color-primer-fg-disabled);cursor:not-allowed;opacity:1}.FormControl-input[invalid]:not(:focus),.FormControl-select[invalid]:not(:focus),.FormControl-textarea[invalid]:not(:focus){border-color:var(--color-danger-emphasis)}.FormControl-input:not([type=checkbox],[type=radio]):focus,.FormControl-select:not([type=checkbox],[type=radio]):focus,.FormControl-textarea:not([type=checkbox],[type=radio]):focus{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}.FormControl-input:not([type=checkbox],[type=radio]):focus:not(:focus-visible),.FormControl-select:not([type=checkbox],[type=radio]):focus:not(:focus-visible),.FormControl-textarea:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px #0000 var(--color-accent-fg);outline:none}.FormControl-input:not([type=checkbox],[type=radio]):focus-visible,.FormControl-select:not([type=checkbox],[type=radio]):focus-visible,.FormControl-textarea:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}.FormControl-input,.FormControl-select,.FormControl-textarea{border-radius:var(--borderRadius-medium,6px);font-size:var(--text-body-size-medium,14px);line-height:var(--text-body-lineHeight-medium,1.42857);padding-block:calc(var(--control-medium-paddingBlock, 6px) - var(--borderWidth-thin, 1px));padding-inline:var(--control-medium-paddingInline-condensed,8px);transition:80ms cubic-bezier(.33,1,.68,1);transition-property:color,background-color,box-shadow,border-color;width:100%}.FormControl-input[disabled]::placeholder,.FormControl-select[disabled]::placeholder,.FormControl-textarea[disabled]::placeholder{color:var(--color-primer-fg-disabled)}.FormControl-input[readonly],.FormControl-select[readonly],.FormControl-textarea[readonly]{background-color:var(--color-input-disabled-bg)}.FormControl-input::placeholder,.FormControl-select::placeholder,.FormControl-textarea::placeholder{color:var(--color-fg-subtle);opacity:1}.FormControl-input.FormControl-small,.FormControl-select.FormControl-small,.FormControl-textarea.FormControl-small{font-size:var(--text-body-size-small,12px);height:var(--control-small-size,28px);padding-block:var(--control-small-paddingBlock,4px);padding-inline:var(--control-small-paddingInline-normal,8px)}.FormControl-input.FormControl-medium,.FormControl-select.FormControl-medium,.FormControl-textarea.FormControl-medium{height:var(--control-medium-size,32px)}.FormControl-input.FormControl-large,.FormControl-select.FormControl-large,.FormControl-textarea.FormControl-large{height:var(--control-large-size,40px);padding-block:var(--control-large-paddingBlock,10px);padding-inline:var(--control-large-paddingInline-normal,12px)}.FormControl-input.FormControl-inset,.FormControl-select.FormControl-inset,.FormControl-textarea.FormControl-inset{background-color:var(--color-canvas-inset)}.FormControl-input.FormControl-inset:focus,.FormControl-input.FormControl-inset:focus-visible,.FormControl-select.FormControl-inset:focus,.FormControl-select.FormControl-inset:focus-visible,.FormControl-textarea.FormControl-inset:focus,.FormControl-textarea.FormControl-inset:focus-visible{background-color:var(--color-canvas-default)}.FormControl-input.FormControl-monospace,.FormControl-select.FormControl-monospace,.FormControl-textarea.FormControl-monospace{font-family:var(
|
2
|
-
--fontStack-monospace,"ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace"
|
3
|
-
)}.FormControl-input.FormControl-error,.FormControl-select.FormControl-error,.FormControl-textarea.FormControl-error{border-color:var(--color-danger-emphasis)}.FormControl-input.FormControl-success,.FormControl-select.FormControl-success,.FormControl-textarea.FormControl-success{border-color:var(--color-success-emphasis)}.FormControl-input.FormControl-warning,.FormControl-select.FormControl-warning,.FormControl-textarea.FormControl-warning{border-color:var(--color-attention-emphasis)}.FormControl-toggleSwitchInput{align-items:flex-start;display:flex;gap:var(--base-size-16,16px)}.FormControl-input-wrap{display:grid;position:relative}.FormControl-input-wrap .FormControl-input-leadingVisualWrap{color:var(--color-fg-muted);display:block;height:var(--base-size-16,16px);left:var(--base-size-8,8px);pointer-events:none;position:absolute;top:var(--base-size-8,8px);width:var(--base-size-16,16px)}.FormControl-input-wrap .FormControl-input-leadingVisualWrap .FormControl-input-leadingVisual{display:block;-webkit-user-select:none;user-select:none}.FormControl-input-wrap .FormControl-input-trailingAction{align-items:center;background:#0000;border:0;border-radius:var(--borderRadius-small);color:var(--color-fg-muted);cursor:pointer;display:grid;height:var(--control-xsmall-size,24px);justify-content:center;padding:0;position:absolute;right:var(--base-size-4,4px);top:var(--base-size-4,4px);transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;width:var(--control-xsmall-size,24px);z-index:4}.FormControl-input-wrap .FormControl-input-trailingAction svg{-webkit-user-select:none;user-select:none}.FormControl-input-wrap .FormControl-input-trailingAction[disabled]{color:var(--color-primer-fg-disabled);pointer-events:none}.FormControl-input-wrap .FormControl-input-trailingAction:hover{background:var(--color-action-list-item-default-hover-bg)}.FormControl-input-wrap .FormControl-input-trailingAction:active{background:var(--color-action-list-item-default-active-bg)}.FormControl-input-wrap .FormControl-input-trailingAction.FormControl-input-trailingAction--divider:before{background:var(--color-border-default);content:"";display:block;height:var(--base-size-16);left:calc(var(--base-size-4, 4px)*-1);position:absolute;top:calc((var(--control-xsmall-size) - var(--base-size-16))/2);width:var(--borderWidth-thin)}.FormControl-input-wrap .FormControl-input-trailingAction:after{content:"";height:100%;left:50%;min-height:var(--control-medium-size,32px) var(--control-medium-size,32px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:coarse){.FormControl-input-wrap .FormControl-input-trailingAction:after{min-height:var(--control-minTarget-coarse,44px);min-width:var(--control-minTarget-coarse,44px)}}.FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input{padding-inline-start:calc(var(--control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--control-medium-gap, 8px))}.FormControl-input-wrap.FormControl-input-wrap--trailingAction .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--control-medium-gap, 8px))}.FormControl-input-wrap.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--control-medium-gap, 8px) + var(--borderWidth-thin, 1px))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-leadingVisualWrap{left:calc(var(--control-medium-paddingInline-condensed, 8px) - .125rem);top:calc(var(--control-medium-paddingInline-condensed, 8px) - .125rem)}.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-small{padding-inline-end:calc(var(--control-small-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--control-small-gap, 8px))}.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-small{padding-inline-end:calc(var(--control-small-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--control-small-gap, 8px) + var(--borderWidth-thin, 1px))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction{height:calc(var(--control-small-size, 28px) - var(--base-size-8, 8px));width:calc(var(--control-small-size, 28px) - var(--base-size-8, 8px))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction:before{top:calc((var(--control-xsmall-size) - var(--base-size-16))/4)}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-leadingVisualWrap{left:var(--control-medium-paddingInline-normal,12px);top:var(--control-medium-paddingInline-normal,12px)}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large{padding-inline-start:calc(var(--control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) + var(--control-large-gap, 8px))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-large{padding-inline-end:calc(var(--control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) + var(--control-large-gap, 8px))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-large{padding-inline-end:calc(var(--control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) + var(--control-large-gap, 8px) + var(--borderWidth-thin, 1px))}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction{height:var(--control-small-size,28px);right:calc(var(--control-medium-paddingInline-condensed, 8px) - .125rem);top:calc(var(--control-medium-paddingInline-condensed, 8px) - .125rem);width:var(--control-small-size,28px)}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction:before{height:var(--base-size-20);top:unset}.FormControl-select-wrap{display:grid;grid-template-columns:minmax(0,auto) var(--base-size-16,16px)}.FormControl-select-wrap:after{background-color:var(--color-fg-muted);content:"";grid-column:2;grid-row:1;height:var(--base-size-16,16px);-webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiM1ODYwNjkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuNDI3IDkuNDI3IDMuMzk2IDMuMzk2YS4yNTEuMjUxIDAgMCAwIC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwIDAgMTEuMzk2IDlINC42MDRhLjI1LjI1IDAgMCAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3IDcuODIgMy4wNzJhLjI1LjI1IDAgMCAxIC4zNTQgMEwxMS41NyA2LjQ3YS4yNS4yNSAwIDAgMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMCAxLS4xNzctLjQyN3oiLz48L3N2Zz4=");mask:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiM1ODYwNjkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuNDI3IDkuNDI3IDMuMzk2IDMuMzk2YS4yNTEuMjUxIDAgMCAwIC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwIDAgMTEuMzk2IDlINC42MDRhLjI1LjI1IDAgMCAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3IDcuODIgMy4wNzJhLjI1LjI1IDAgMCAxIC4zNTQgMEwxMS41NyA2LjQ3YS4yNS4yNSAwIDAgMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMCAxLS4xNzctLjQyN3oiLz48L3N2Zz4=");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;padding-right:var(--base-size-4,4px);place-self:center end;pointer-events:none;width:var(--base-size-16,16px)}.FormControl-select-wrap .FormControl-select{-webkit-appearance:none;appearance:none;grid-column:1/-1;grid-row:1;padding-right:var(--base-size-20,20px)}.FormControl-checkbox-wrap,.FormControl-radio-wrap{display:inline-grid;gap:var(--base-size-8,8px);grid-template-columns:min-content auto}.FormControl-checkbox-wrap .FormControl-checkbox-labelWrap,.FormControl-checkbox-wrap .FormControl-radio-labelWrap,.FormControl-radio-wrap .FormControl-checkbox-labelWrap,.FormControl-radio-wrap .FormControl-radio-labelWrap{display:flex;flex-direction:column;gap:var(--base-size-4,4px)}.FormControl-checkbox-wrap .FormControl-label,.FormControl-radio-wrap .FormControl-label{cursor:pointer}.FormControl-check-group-wrap fieldset,.FormControl-radio-group-wrap fieldset{border:0;margin:0;padding:0}input[type=checkbox].FormControl-checkbox{background-color:var(--color-canvas-default);border:var(--borderWidth-thin,1px) solid var(--color-border-default);color:var(--color-fg-default)}input.FormControl-checkbox[type=checkbox][disabled]{-webkit-text-fill-color:var(--color-primer-fg-disabled);background-color:var(--color-input-disabled-bg);border-color:var(--color-border-default);color:var(--color-primer-fg-disabled);cursor:not-allowed;opacity:1}input.FormControl-checkbox[type=checkbox][invalid]:not(:focus){border-color:var(--color-danger-emphasis)}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px #0000 var(--color-accent-fg);outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}input[type=checkbox].FormControl-checkbox{-webkit-appearance:none;appearance:none;border-color:var(--color-neutral-emphasis);border-radius:var(--borderRadius-small,3px);cursor:pointer;display:grid;height:var(--base-size-16,16px);margin:.125rem 0 0;place-content:center;position:relative;transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);width:var(--base-size-16,16px)}input.FormControl-checkbox[type=checkbox]:before{background-color:var(--color-fg-on-emphasis);clip-path:inset(var(--base-size-16,16px) 0 0 0);content:"";height:var(--base-size-16,16px);-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjc4LjIyYS43NS43NSAwIDAgMSAwIDEuMDYxTDQuNTIgOC41NDFhLjc1Mi43NTIgMCAwIDEtMS4wNjIgMEwuMjAyIDUuMjg1YS43NS43NSAwIDAgMSAxLjA2MS0xLjA2MWwyLjcyNSAyLjcyM0wxMC43MTguMjJhLjc1MS43NTEgMCAwIDEgMS4wNjIgMFoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjc4LjIyYS43NS43NSAwIDAgMSAwIDEuMDYxTDQuNTIgOC41NDFhLjc1Mi43NTIgMCAwIDEtMS4wNjIgMEwuMjAyIDUuMjg1YS43NS43NSAwIDAgMSAxLjA2MS0xLjA2MWwyLjcyNSAyLjcyM0wxMC43MTguMjJhLjc1MS43NTEgMCAwIDEgMS4wNjIgMFoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:75%;mask-size:75%;transition:visibility 0s linear .23s;visibility:hidden;width:var(--base-size-16,16px)}@media screen and (prefers-reduced-motion:no-preference){input.FormControl-checkbox[type=checkbox]:before{animation:checkmarkOut 80ms cubic-bezier(.65,0,.35,1) forwards}}input.FormControl-checkbox[type=checkbox]:after{content:"";height:100%;left:50%;min-height:var(--control-medium-size,32px) var(--control-medium-size,32px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-checkbox-labelWrap .FormControl-label,input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-radio-labelWrap .FormControl-label{color:var(--color-primer-fg-disabled);cursor:not-allowed}input.FormControl-checkbox[type=checkbox]:checked{background:var(--color-accent-fg);border-color:var(--color-accent-fg);transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0ms}input.FormControl-checkbox[type=checkbox]:checked:before{transition:visibility 0s linear 0s;visibility:visible}@media screen and (prefers-reduced-motion:no-preference){input.FormControl-checkbox[type=checkbox]:checked:before{animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards}}input.FormControl-checkbox[type=checkbox]:checked:disabled{background-color:var(--color-primer-fg-disabled);border-color:var(--color-primer-fg-disabled);cursor:not-allowed;opacity:1}input.FormControl-checkbox[type=checkbox]:checked:disabled:before{background-color:var(--color-fg-on-emphasis)}@media (forced-colors:active){input.FormControl-checkbox[type=checkbox]:checked{background-color:canvastext;border-color:canvastext}}input.FormControl-checkbox[type=checkbox]:focus-visible{box-shadow:none;outline:2px solid var(--color-accent-fg);outline-offset:2px}input.FormControl-checkbox[type=checkbox]:indeterminate:before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAgMWExIDEgMCAwIDEgMS0xaDhhMSAxIDAgMSAxIDAgMkgxYTEgMSAwIDAgMS0xLTFaIiBmaWxsPSIjZmZmIi8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAgMWExIDEgMCAwIDEgMS0xaDhhMSAxIDAgMSAxIDAgMkgxYTEgMSAwIDAgMS0xLTFaIiBmaWxsPSIjZmZmIi8+PC9zdmc+");visibility:visible}input[type=radio].FormControl-radio{background-color:var(--color-canvas-default);border:var(--borderWidth-thin,1px) solid var(--color-border-default);color:var(--color-fg-default)}input.FormControl-radio[type=radio][disabled]{-webkit-text-fill-color:var(--color-primer-fg-disabled);background-color:var(--color-input-disabled-bg);border-color:var(--color-border-default);color:var(--color-primer-fg-disabled);cursor:not-allowed;opacity:1}input.FormControl-radio[type=radio][invalid]:not(:focus){border-color:var(--color-danger-emphasis)}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px #0000 var(--color-accent-fg);outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}input[type=radio].FormControl-radio{-webkit-appearance:none;appearance:none;border-color:var(--color-neutral-emphasis);border-radius:var(--borderRadius-full,100vh);cursor:pointer;height:var(--base-size-16,16px);margin:.125rem 0 0;position:relative;transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);width:var(--base-size-16,16px)}input.FormControl-radio[type=radio]:after{content:"";height:100%;left:50%;min-height:var(--control-medium-size,32px) var(--control-medium-size,32px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}input.FormControl-radio[type=radio]:checked{border-color:var(--color-accent-fg);border-width:var(--base-size-4,4px)}input.FormControl-radio[type=radio]:checked:disabled{border-color:var(--color-primer-fg-disabled);cursor:not-allowed}input.FormControl-radio[type=radio]:focus-visible{box-shadow:none;outline:2px solid var(--color-accent-fg);outline-offset:2px}@media (forced-colors:active){input[type=radio].FormControl-radio{background-color:canvastext;border-color:canvastext}}@keyframes checkmarkIn{0%{clip-path:inset(var(--base-size-16,16px) 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(var(--base-size-16,16px) 0 0 0)}}
|
1
|
+
.FormControl{display:inline-flex;flex-direction:column;gap:var(--base-size-4,.25rem)}.FormControl--fullWidth{display:flex}.FormControl-label{color:var(--fgColor-default,var(--color-fg-default));font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-medium,1.4285)}.FormControl-caption{color:var(--fgColor-muted,var(--color-fg-muted));font-weight:var(--text-caption-weight,400);margin-bottom:0}.FormControl-caption,.FormControl-inlineValidation{font-size:var(--text-caption-size,.75rem);line-height:var(--text-caption-lineHeight,1.3333)}.FormControl-inlineValidation{color:var(--control-borderColor-danger,var(--color-danger-emphasis));display:flex;font-weight:var(--base-text-weight-semibold,600);fill:var(--control-borderColor-danger,var(--color-danger-emphasis));align-items:flex-start;flex-direction:row;gap:var(--base-size-4,.25rem)}.FormControl-inlineValidation p{margin-bottom:0}.FormControl-inlineValidation--success{color:var(--control-borderColor-success,var(--color-success-emphasis));fill:var(--control-borderColor-success,var(--color-success-emphasis))}.FormControl-inlineValidation--visual{align-items:center;display:flex;min-height:var(--base-size-16,1rem)}.FormControl-spacingWrapper{display:flex;flex-direction:column;row-gap:.5rem}.FormControl-horizontalGroup{column-gap:.5rem;display:flex}.FormControl-input,.FormControl-select,.FormControl-textarea{background-color:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--control-borderColor-rest,var(--color-border-default));border-radius:var(--borderRadius-medium,.375rem);box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset));color:var(--fgColor-default,var(--color-fg-default));font-size:var(--text-body-size-medium,.875rem);line-height:var(--text-body-lineHeight-medium,1.4285);padding-block:calc(var(--control-medium-paddingBlock, 6px) - var(--borderWidth-thin, 1px));padding-inline:var(--control-medium-paddingInline-condensed,.5rem);transition:80ms cubic-bezier(.33,1,.68,1);transition-property:color,background-color,box-shadow,border-color;width:100%}.FormControl-input[disabled],.FormControl-select[disabled],.FormControl-textarea[disabled]{background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg));border-color:var(--control-borderColor-disabled,var(--color-btn-border));box-shadow:none;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.FormControl-input[invalid=true]:not(:focus),.FormControl-select[invalid=true]:not(:focus),.FormControl-textarea[invalid=true]:not(:focus){border-color:var(--control-borderColor-danger,var(--color-danger-emphasis))}.FormControl-input[invalid=false]:not(:focus),.FormControl-select[invalid=false]:not(:focus),.FormControl-textarea[invalid=false]:not(:focus){border-color:var(--control-borderColor-success,var(--color-success-emphasis))}.FormControl-input:not([type=checkbox],[type=radio]):focus,.FormControl-select:not([type=checkbox],[type=radio]):focus,.FormControl-textarea:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}.FormControl-input:not([type=checkbox],[type=radio]):focus:not(:focus-visible),.FormControl-select:not([type=checkbox],[type=radio]):focus:not(:focus-visible),.FormControl-textarea:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor,var(--color-accent-fg));outline:none}.FormControl-input:not([type=checkbox],[type=radio]):focus-visible,.FormControl-select:not([type=checkbox],[type=radio]):focus-visible,.FormControl-textarea:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}.FormControl-input[disabled]::placeholder,.FormControl-select[disabled]::placeholder,.FormControl-textarea[disabled]::placeholder{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.FormControl-input[readonly],.FormControl-select[readonly],.FormControl-textarea[readonly]{background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg))}.FormControl-input::placeholder,.FormControl-select::placeholder,.FormControl-textarea::placeholder{color:var(--control-fgColor-placeholder,var(--color-fg-subtle));opacity:1}.FormControl-input.FormControl-small,.FormControl-select.FormControl-small,.FormControl-textarea.FormControl-small{font-size:var(--text-body-size-small,.75rem);height:var(--control-small-size,1.75rem);padding-block:var(--control-small-paddingBlock,.25rem);padding-inline:var(--control-small-paddingInline-normal,.75rem)}.FormControl-input.FormControl-medium,.FormControl-select.FormControl-medium,.FormControl-textarea.FormControl-medium{height:var(--control-medium-size,2rem)}.FormControl-input.FormControl-large,.FormControl-select.FormControl-large,.FormControl-textarea.FormControl-large{height:var(--control-large-size,2.5rem);padding-block:var(--control-large-paddingBlock,.625rem);padding-inline:var(--control-large-paddingInline-normal,.75rem)}.FormControl-input.FormControl-inset,.FormControl-select.FormControl-inset,.FormControl-textarea.FormControl-inset{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.FormControl-input.FormControl-inset:focus,.FormControl-input.FormControl-inset:focus-visible,.FormControl-select.FormControl-inset:focus,.FormControl-select.FormControl-inset:focus-visible,.FormControl-textarea.FormControl-inset:focus,.FormControl-textarea.FormControl-inset:focus-visible{background-color:var(--bgColor-default,var(--color-canvas-default))}.FormControl-input.FormControl-monospace,.FormControl-select.FormControl-monospace,.FormControl-textarea.FormControl-monospace{font-family:var(--fontStack-monospace,ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace)}.FormControl-input.FormControl-error,.FormControl-select.FormControl-error,.FormControl-textarea.FormControl-error{border-color:var(--control-borderColor-danger,var(--color-danger-emphasis))}.FormControl-input.FormControl-success,.FormControl-select.FormControl-success,.FormControl-textarea.FormControl-success{border-color:var(--control-borderColor-success,var(--color-success-emphasis))}.FormControl-input.FormControl-warning,.FormControl-select.FormControl-warning,.FormControl-textarea.FormControl-warning{border-color:var(--control-borderColor-warning,var(--color-attention-emphasis))}.FormControl-toggleSwitchInput{align-items:flex-start;display:flex;gap:var(--base-size-16,1rem)}.FormControl-input-wrap{display:grid;position:relative}.FormControl-input-wrap .FormControl-input-leadingVisualWrap{color:var(--fgColor-muted,var(--color-fg-muted));display:block;height:var(--base-size-16,1rem);left:var(--base-size-8,.5rem);pointer-events:none;position:absolute;top:var(--base-size-8,.5rem);width:var(--base-size-16,1rem)}.FormControl-input-wrap .FormControl-input-leadingVisualWrap .FormControl-input-leadingVisual{display:block;-webkit-user-select:none;user-select:none}.FormControl-input-wrap .FormControl-input-trailingAction{align-items:center;background:#0000;border:0;border-radius:var(--borderRadius-small,.1875rem);color:var(--fgColor-muted,var(--color-fg-muted));cursor:pointer;display:grid;height:var(--control-xsmall-size,1.5rem);justify-content:center;padding:0;position:absolute;right:var(--base-size-4,.25rem);top:var(--base-size-4,.25rem);transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;width:var(--control-xsmall-size,1.5rem);z-index:4}.FormControl-input-wrap .FormControl-input-trailingAction svg{-webkit-user-select:none;user-select:none}.FormControl-input-wrap .FormControl-input-trailingAction[disabled]{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));pointer-events:none}.FormControl-input-wrap .FormControl-input-trailingAction:hover{background:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.FormControl-input-wrap .FormControl-input-trailingAction:active{background:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}.FormControl-input-wrap .FormControl-input-trailingAction.FormControl-input-trailingAction--divider:before{background:var(--borderColor-default,var(--color-border-default));content:"";display:block;height:var(--base-size-16,1rem);left:calc(var(--base-size-4,.25rem)*-1);position:absolute;top:calc((var(--control-xsmall-size,1.5rem) - var(--base-size-16,1rem))/2);width:var(--borderWidth-thin,max(1px,.0625rem))}.FormControl-input-wrap .FormControl-input-trailingAction:after{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem) var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:coarse){.FormControl-input-wrap .FormControl-input-trailingAction:after{min-height:var(--control-minTarget-coarse,2.75rem);min-width:var(--control-minTarget-coarse,2.75rem)}}.FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input{padding-inline-start:calc(var(--control-medium-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-medium-gap,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--trailingAction .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-medium-gap,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-medium-gap,.5rem) + var(--borderWidth-thin,max(1px, .0625rem)))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-leadingVisualWrap{left:calc(var(--control-medium-paddingInline-condensed,.5rem) - .125rem);top:calc(var(--control-medium-paddingInline-condensed,.5rem) - .125rem)}.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-small{padding-inline-end:calc(var(--control-small-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-small-gap,.25rem))}.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-small{padding-inline-end:calc(var(--control-small-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-small-gap,.25rem) + var(--borderWidth-thin,max(1px, .0625rem)))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction{height:calc(var(--control-small-size,1.75rem) - var(--base-size-8,.5rem));width:calc(var(--control-small-size,1.75rem) - var(--base-size-8,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction:before{top:calc((var(--control-xsmall-size,1.5rem) - var(--base-size-16,1rem))/4)}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-leadingVisualWrap{left:var(--control-medium-paddingInline-normal,.75rem);top:var(--control-medium-paddingInline-normal,.75rem)}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large{padding-inline-start:calc(var(--control-large-paddingInline-normal,.75rem) + var(--base-size-16,1rem) + var(--control-large-gap,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-large{padding-inline-end:calc(var(--control-large-paddingInline-normal,.75rem) + var(--base-size-16,1rem) + var(--control-large-gap,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-large{padding-inline-end:calc(var(--control-large-paddingInline-normal,.75rem) + var(--base-size-16,1rem) + var(--control-large-gap,.5rem) + var(--borderWidth-thin,max(1px, .0625rem)))}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction{height:var(--control-small-size,1.75rem);right:calc(var(--control-medium-paddingInline-condensed,.5rem) - .125rem);top:calc(var(--control-medium-paddingInline-condensed,.5rem) - .125rem);width:var(--control-small-size,1.75rem)}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction:before{height:var(--base-size-20,1.25rem);top:unset}.FormControl-select-wrap{display:grid;grid-template-columns:minmax(0,auto) var(--base-size-16,1rem)}.FormControl-select-wrap:after{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));content:"";grid-column:2;grid-row:1;height:var(--base-size-16,1rem);-webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzU4NjA2OSI+PHBhdGggZD0ibTQuNDI3IDkuNDI3IDMuMzk2IDMuMzk2YS4yNS4yNSAwIDAgMCAuMzU0IDBsMy4zOTYtMy4zOTZBLjI1LjI1IDAgMCAwIDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAgMC0uMTc3LjQyN000LjQyMyA2LjQ3IDcuODIgMy4wNzJhLjI1LjI1IDAgMCAxIC4zNTQgMEwxMS41NyA2LjQ3YS4yNS4yNSAwIDAgMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMCAxLS4xNzctLjQyNyIvPjwvc3ZnPg==");mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzU4NjA2OSI+PHBhdGggZD0ibTQuNDI3IDkuNDI3IDMuMzk2IDMuMzk2YS4yNS4yNSAwIDAgMCAuMzU0IDBsMy4zOTYtMy4zOTZBLjI1LjI1IDAgMCAwIDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAgMC0uMTc3LjQyN000LjQyMyA2LjQ3IDcuODIgMy4wNzJhLjI1LjI1IDAgMCAxIC4zNTQgMEwxMS41NyA2LjQ3YS4yNS4yNSAwIDAgMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMCAxLS4xNzctLjQyNyIvPjwvc3ZnPg==");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;padding-right:var(--base-size-4,.25rem);place-self:center end;pointer-events:none;width:var(--base-size-16,1rem)}.FormControl-select-wrap .FormControl-select{-webkit-appearance:none;appearance:none;grid-column:1/-1;grid-row:1;padding-right:var(--base-size-20,1.25rem)}.FormControl-checkbox-wrap,.FormControl-radio-wrap{display:inline-grid;gap:var(--base-size-8,.5rem);grid-template-columns:min-content auto}.FormControl-checkbox-wrap .FormControl-checkbox-labelWrap,.FormControl-checkbox-wrap .FormControl-radio-labelWrap,.FormControl-radio-wrap .FormControl-checkbox-labelWrap,.FormControl-radio-wrap .FormControl-radio-labelWrap{display:flex;flex-direction:column;gap:var(--base-size-4,.25rem)}.FormControl-checkbox-wrap .FormControl-label,.FormControl-radio-wrap .FormControl-label{cursor:pointer}.FormControl-check-group-wrap fieldset,.FormControl-radio-group-wrap fieldset{border:0;margin:0;padding:0}input[type=checkbox].FormControl-checkbox{-webkit-appearance:none;appearance:none;background-color:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--control-borderColor-rest,var(--color-border-default));border-color:var(--control-borderColor-emphasis,var(--color-switch-knob-border));border-radius:var(--borderRadius-small,.1875rem);box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset));color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;display:grid;height:var(--base-size-16,1rem);margin:.125rem 0 0;place-content:center;position:relative;transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);width:var(--base-size-16,1rem)}input.FormControl-checkbox[type=checkbox][disabled]{background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg));border-color:var(--control-borderColor-disabled,var(--color-btn-border));box-shadow:none;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}input.FormControl-checkbox[type=checkbox][invalid=true]:not(:focus){border-color:var(--control-borderColor-danger,var(--color-danger-emphasis))}input.FormControl-checkbox[type=checkbox][invalid=false]:not(:focus){border-color:var(--control-borderColor-success,var(--color-success-emphasis))}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-checkbox[type=checkbox]:before{background-color:var(--control-checked-fgColor-rest,var(--color-switch-track-checked-fg));clip-path:inset(var(--base-size-16,1rem) 0 0 0);content:"";height:var(--base-size-16,1rem);-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiBmaWxsPSJub25lIj48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS43OC4yMmEuNzUuNzUgMCAwIDEgMCAxLjA2MUw0LjUyIDguNTQxYS43NS43NSAwIDAgMS0xLjA2MiAwTC4yMDIgNS4yODVhLjc1Ljc1IDAgMCAxIDEuMDYxLTEuMDYxbDIuNzI1IDIuNzIzTDEwLjcxOC4yMmEuNzUuNzUgMCAwIDEgMS4wNjIgMCIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiBmaWxsPSJub25lIj48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS43OC4yMmEuNzUuNzUgMCAwIDEgMCAxLjA2MUw0LjUyIDguNTQxYS43NS43NSAwIDAgMS0xLjA2MiAwTC4yMDIgNS4yODVhLjc1Ljc1IDAgMCAxIDEuMDYxLTEuMDYxbDIuNzI1IDIuNzIzTDEwLjcxOC4yMmEuNzUuNzUgMCAwIDEgMS4wNjIgMCIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:75%;mask-size:75%;transition:visibility 0s linear .23s;visibility:hidden;width:var(--base-size-16,1rem)}@media screen and (prefers-reduced-motion:no-preference){input.FormControl-checkbox[type=checkbox]:before{animation:checkmarkOut 80ms cubic-bezier(.65,0,.35,1) forwards}}input.FormControl-checkbox[type=checkbox]:after{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem) var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-checkbox-labelWrap .FormControl-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed}input.FormControl-checkbox[type=checkbox]:checked{background:var(--control-checked-bgColor-rest,var(--color-accent-fg));border-color:var(--control-checked-borderColor-rest,var(--color-accent-fg));transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0ms}input.FormControl-checkbox[type=checkbox]:checked:before{transition:visibility 0s linear 0s;visibility:visible}@media screen and (prefers-reduced-motion:no-preference){input.FormControl-checkbox[type=checkbox]:checked:before{animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards}}input.FormControl-checkbox[type=checkbox]:checked:disabled{background-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));border-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed;opacity:1}input.FormControl-checkbox[type=checkbox]:checked:disabled:before{background-color:var(--control-checked-fgColor-rest,var(--color-switch-track-checked-fg))}@media (forced-colors:active){input.FormControl-checkbox[type=checkbox]:checked{background-color:canvastext;border-color:canvastext}}input.FormControl-checkbox[type=checkbox]:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:2px}input.FormControl-checkbox[type=checkbox]:indeterminate:before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIj48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDFhMSAxIDAgMCAxIDEtMWg4YTEgMSAwIDEgMSAwIDJIMWExIDEgMCAwIDEtMS0xIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIj48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDFhMSAxIDAgMCAxIDEtMWg4YTEgMSAwIDEgMSAwIDJIMWExIDEgMCAwIDEtMS0xIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=");visibility:visible}input[type=radio].FormControl-radio{-webkit-appearance:none;appearance:none;background-color:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--control-borderColor-rest,var(--color-border-default));border-color:var(--control-borderColor-emphasis,var(--color-switch-knob-border));border-radius:var(--borderRadius-full,624.9375rem);box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset));color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;height:var(--base-size-16,1rem);margin:.125rem 0 0;position:relative;transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);width:var(--base-size-16,1rem)}input.FormControl-radio[type=radio][disabled]{background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg));border-color:var(--control-borderColor-disabled,var(--color-btn-border));box-shadow:none;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}input.FormControl-radio[type=radio][invalid=true]:not(:focus){border-color:var(--control-borderColor-danger,var(--color-danger-emphasis))}input.FormControl-radio[type=radio][invalid=false]:not(:focus){border-color:var(--control-borderColor-success,var(--color-success-emphasis))}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-radio[type=radio]:after{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem) var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}input.FormControl-radio[type=radio][disabled]~.FormControl-radio-labelWrap .FormControl-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed}input.FormControl-radio[type=radio]:checked{border-color:var(--control-checked-borderColor-rest,var(--color-accent-fg));border-width:var(--base-size-4,.25rem)}input.FormControl-radio[type=radio]:checked:disabled,input.FormControl-radio[type=radio][disabled]:checked{border-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed}input.FormControl-radio[type=radio]:checked:disabled~.FormControl-radio-labelWrap .FormControl-label,input.FormControl-radio[type=radio][disabled]:checked~.FormControl-radio-labelWrap .FormControl-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed}input.FormControl-radio[type=radio]:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:2px}@media (forced-colors:active){input[type=radio].FormControl-radio{background-color:canvastext;border-color:canvastext}}@keyframes checkmarkIn{0%{clip-path:inset(var(--base-size-16,1rem) 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(var(--base-size-16,1rem) 0 0 0)}}
|
@@ -7,6 +7,8 @@
|
|
7
7
|
".FormControl-caption",
|
8
8
|
".FormControl-inlineValidation",
|
9
9
|
".FormControl-inlineValidation p",
|
10
|
+
".FormControl-inlineValidation--success",
|
11
|
+
".FormControl-inlineValidation--visual",
|
10
12
|
".FormControl-spacingWrapper",
|
11
13
|
".FormControl-horizontalGroup",
|
12
14
|
".FormControl-input",
|
@@ -15,9 +17,12 @@
|
|
15
17
|
".FormControl-input[disabled]",
|
16
18
|
".FormControl-select[disabled]",
|
17
19
|
".FormControl-textarea[disabled]",
|
18
|
-
".FormControl-input[invalid]:not(:focus)",
|
19
|
-
".FormControl-select[invalid]:not(:focus)",
|
20
|
-
".FormControl-textarea[invalid]:not(:focus)",
|
20
|
+
".FormControl-input[invalid=true]:not(:focus)",
|
21
|
+
".FormControl-select[invalid=true]:not(:focus)",
|
22
|
+
".FormControl-textarea[invalid=true]:not(:focus)",
|
23
|
+
".FormControl-input[invalid=false]:not(:focus)",
|
24
|
+
".FormControl-select[invalid=false]:not(:focus)",
|
25
|
+
".FormControl-textarea[invalid=false]:not(:focus)",
|
21
26
|
".FormControl-input:not([type=checkbox],[type=radio]):focus",
|
22
27
|
".FormControl-select:not([type=checkbox],[type=radio]):focus",
|
23
28
|
".FormControl-textarea:not([type=checkbox],[type=radio]):focus",
|
@@ -106,14 +111,14 @@
|
|
106
111
|
".FormControl-radio-group-wrap fieldset",
|
107
112
|
"input[type=checkbox].FormControl-checkbox",
|
108
113
|
"input.FormControl-checkbox[type=checkbox][disabled]",
|
109
|
-
"input.FormControl-checkbox[type=checkbox][invalid]:not(:focus)",
|
114
|
+
"input.FormControl-checkbox[type=checkbox][invalid=true]:not(:focus)",
|
115
|
+
"input.FormControl-checkbox[type=checkbox][invalid=false]:not(:focus)",
|
110
116
|
"input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus",
|
111
117
|
"input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
|
112
118
|
"input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus-visible",
|
113
119
|
"input.FormControl-checkbox[type=checkbox]:before",
|
114
120
|
"input.FormControl-checkbox[type=checkbox]:after",
|
115
121
|
"input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-checkbox-labelWrap .FormControl-label",
|
116
|
-
"input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-radio-labelWrap .FormControl-label",
|
117
122
|
"input.FormControl-checkbox[type=checkbox]:checked",
|
118
123
|
"input.FormControl-checkbox[type=checkbox]:checked:before",
|
119
124
|
"input.FormControl-checkbox[type=checkbox]:checked:disabled",
|
@@ -122,13 +127,18 @@
|
|
122
127
|
"input.FormControl-checkbox[type=checkbox]:indeterminate:before",
|
123
128
|
"input[type=radio].FormControl-radio",
|
124
129
|
"input.FormControl-radio[type=radio][disabled]",
|
125
|
-
"input.FormControl-radio[type=radio][invalid]:not(:focus)",
|
130
|
+
"input.FormControl-radio[type=radio][invalid=true]:not(:focus)",
|
131
|
+
"input.FormControl-radio[type=radio][invalid=false]:not(:focus)",
|
126
132
|
"input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus",
|
127
133
|
"input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
|
128
134
|
"input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus-visible",
|
129
135
|
"input.FormControl-radio[type=radio]:after",
|
136
|
+
"input.FormControl-radio[type=radio][disabled]~.FormControl-radio-labelWrap .FormControl-label",
|
130
137
|
"input.FormControl-radio[type=radio]:checked",
|
131
138
|
"input.FormControl-radio[type=radio]:checked:disabled",
|
139
|
+
"input.FormControl-radio[type=radio][disabled]:checked",
|
140
|
+
"input.FormControl-radio[type=radio]:checked:disabled~.FormControl-radio-labelWrap .FormControl-label",
|
141
|
+
"input.FormControl-radio[type=radio][disabled]:checked~.FormControl-radio-labelWrap .FormControl-label",
|
132
142
|
"input.FormControl-radio[type=radio]:focus-visible"
|
133
143
|
]
|
134
144
|
}
|
@@ -1 +1 @@
|
|
1
|
-
.ToggleSwitch,.ToggleSwitch.ToggleSwitch{display:inline-flex}.ToggleSwitch{align-items:center;gap:var(--controlStack-medium-gap-condensed
|
1
|
+
.ToggleSwitch,.ToggleSwitch.ToggleSwitch{display:inline-flex}.ToggleSwitch{align-items:center;gap:var(--controlStack-medium-gap-condensed,.5rem)}.ToggleSwitch--checked .ToggleSwitch-statusOn{height:auto;visibility:visible}.ToggleSwitch--checked .ToggleSwitch-statusOff{height:0;visibility:hidden}.ToggleSwitch-track{-webkit-appearance:none;appearance:none;background-color:var(--controlTrack-bgColor-rest,var(--color-switch-track-bg));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--controlTrack-borderColor-rest,var(--color-switch-track-border));border-radius:var(--borderRadius-medium,.375rem);cursor:pointer;display:block;height:var(--control-medium-size,2rem);overflow:hidden;padding:0;position:relative;-webkit-text-decoration:none;text-decoration:none;transition-duration:80ms;transition-property:background-color,border-color;transition-timing-function:cubic-bezier(.5,1,.89,1);-webkit-user-select:none;user-select:none;width:var(--base-size-64,4rem)}.ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible{outline-offset:1px}.ToggleSwitch-track:hover{background-color:var(--controlTrack-bgColor-hover,var(--color-switch-track-hover-bg))}.ToggleSwitch-track:active{background-color:var(--controlTrack-bgColor-active,var(--color-switch-track-active-bg))}@media (pointer:coarse){.ToggleSwitch-track:before{content:"";height:100%;left:50%;min-height:44px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}@media (prefers-reduced-motion){.ToggleSwitch-track,.ToggleSwitch-track *{transition:none}}.ToggleSwitch-track[aria-pressed=true][disabled]{background-color:var(--controlTrack-bgColor-disabled,var(--color-switch-track-disabled-bg));border-color:#0000;color:var(--control-checked-fgColor-disabled,var(--color-switch-track-checked-disabled-fg))}.ToggleSwitch-track[aria-pressed=true]{background-color:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));border-color:var(--borderColor-transparent,#0000)}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):hover{background-color:var(--control-checked-bgColor-hover,var(--color-switch-track-checked-hover-bg))}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):active{background-color:var(--control-checked-bgColor-active,var(--color-switch-track-checked-active-bg))}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-knob{background-color:var(--controlKnob-bgColor-checked,var(--color-switch-knob-checked-bg));border-color:var(--controlKnob-borderColor-checked,var(--color-switch-knob-checked-border));transform:translateX(100%)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-lineIcon{transform:translateX(0)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-circleIcon{transform:translateX(100%)}.ToggleSwitch-track[disabled]{background-color:var(--controlTrack-bgColor-disabled,var(--color-switch-track-disabled-bg));border-color:#0000;cursor:not-allowed;transition-property:none}.ToggleSwitch-track[disabled] .ToggleSwitch-knob{border-color:var(--borderColor-default,var(--color-border-default));box-shadow:none}.ToggleSwitch-track[disabled] .ToggleSwitch-circleIcon,.ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon{color:var(--controlTrack-fgColor-disabled,var(--color-switch-track-disabled-fg))}.ToggleSwitch-icons{align-items:center;display:flex;height:100%;overflow:hidden;width:100%}.ToggleSwitch-lineIcon{color:var(--control-checked-fgColor-rest,var(--color-switch-track-checked-fg));transform:translateX(-100%)}.ToggleSwitch-circleIcon,.ToggleSwitch-lineIcon{flex:1 0 50%;line-height:0;transition-duration:80ms;transition-property:transform}.ToggleSwitch-circleIcon{color:var(--controlTrack-fgColor-rest,var(--color-switch-track-fg));transform:translateX(0)}.ToggleSwitch-knob{background-color:var(--controlKnob-bgColor-rest,var(--color-switch-knob-bg));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--controlKnob-borderColor-rest,var(--color-switch-knob-border));border-radius:var(--borderRadius-medium,.375rem);bottom:0;box-shadow:var(--shadow-resting-medium,var(--color-shadow-medium)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));position:absolute;top:0;transition-duration:80ms;transition-property:transform;transition-timing-function:cubic-bezier(.5,1,.89,1);width:50%;z-index:1}@media (prefers-reduced-motion){.ToggleSwitch-knob{transition:none}}.ToggleSwitch-status{color:var(--fgColor-default,var(--color-fg-default));font-size:var(--text-body-size-medium,.875rem);line-height:1.5;position:relative;text-align:right}.ToggleSwitch-statusIcon{display:flex;margin-top:.063rem;width:var(--base-size-16,1rem)}.ToggleSwitch--small .ToggleSwitch-status{font-size:var(--text-body-size-small,.75rem)}.ToggleSwitch--small .ToggleSwitch-track{height:var(--control-xsmall-size,1.5rem);width:var(--base-size-48,3rem)}.ToggleSwitch--disabled .ToggleSwitch-status{color:var(--fgColor-muted,var(--color-fg-muted))}.ToggleSwitch-statusOn{height:0;visibility:hidden}.ToggleSwitch-statusOff{height:auto;visibility:visible}.ToggleSwitch--statusAtEnd{flex-direction:row-reverse}.ToggleSwitch--statusAtEnd .ToggleSwitch-status{text-align:left}
|
@@ -12,17 +12,17 @@
|
|
12
12
|
".ToggleSwitch-track:active",
|
13
13
|
".ToggleSwitch-track:before",
|
14
14
|
".ToggleSwitch-track *",
|
15
|
-
".ToggleSwitch-track[aria-
|
16
|
-
".ToggleSwitch-track[aria-
|
17
|
-
".ToggleSwitch-track[aria-
|
18
|
-
".ToggleSwitch-track[aria-
|
19
|
-
".ToggleSwitch-track[aria-
|
20
|
-
".ToggleSwitch-track[aria-
|
21
|
-
".ToggleSwitch-track[aria-
|
22
|
-
".ToggleSwitch-track[
|
23
|
-
".ToggleSwitch-track[
|
24
|
-
".ToggleSwitch-track[
|
25
|
-
".ToggleSwitch-track[
|
15
|
+
".ToggleSwitch-track[aria-pressed=true][disabled]",
|
16
|
+
".ToggleSwitch-track[aria-pressed=true]",
|
17
|
+
".ToggleSwitch-track[aria-pressed=true]:not([disabled]):hover",
|
18
|
+
".ToggleSwitch-track[aria-pressed=true]:not([disabled]):active",
|
19
|
+
".ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-knob",
|
20
|
+
".ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-lineIcon",
|
21
|
+
".ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-circleIcon",
|
22
|
+
".ToggleSwitch-track[disabled]",
|
23
|
+
".ToggleSwitch-track[disabled] .ToggleSwitch-knob",
|
24
|
+
".ToggleSwitch-track[disabled] .ToggleSwitch-circleIcon",
|
25
|
+
".ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon",
|
26
26
|
".ToggleSwitch-icons",
|
27
27
|
".ToggleSwitch-lineIcon",
|
28
28
|
".ToggleSwitch-circleIcon",
|
@@ -2,11 +2,12 @@ declare class ToggleSwitchElement extends HTMLElement {
|
|
2
2
|
switch: HTMLElement;
|
3
3
|
loadingSpinner: HTMLElement;
|
4
4
|
errorIcon: HTMLElement;
|
5
|
+
private toggling;
|
5
6
|
get src(): string | null;
|
6
7
|
get csrf(): string | null;
|
7
8
|
get csrfField(): string;
|
8
9
|
isRemote(): boolean;
|
9
|
-
toggle(): void
|
10
|
+
toggle(): Promise<void>;
|
10
11
|
turnOn(): void;
|
11
12
|
turnOff(): void;
|
12
13
|
isOn(): boolean;
|