@primer/view-components 0.21.0-rc.be66f7bb → 0.21.1-rc.1c4aed32
Sign up to get free protection for your applications and to get access to all the features.
- package/app/assets/javascripts/primer_view_components.js +1 -1
- package/app/assets/javascripts/primer_view_components.js.map +1 -1
- package/app/assets/styles/primer_view_components.css +1 -1
- package/app/assets/styles/primer_view_components.css.map +1 -1
- package/app/components/primer/alpha/banner.css +1 -1
- package/app/components/primer/alpha/dialog.css +1 -1
- package/app/components/primer/alpha/dialog.css.json +1 -2
- package/app/components/primer/alpha/segmented_control.css +1 -1
- package/app/components/primer/alpha/tool_tip.js +46 -77
- package/app/components/primer/beta/button.css +1 -1
- package/app/components/primer/beta/button.css.json +2 -0
- package/app/components/primer/beta/flash.css +1 -1
- package/package.json +2 -2
- package/static/arguments.json +1 -1
- package/static/constants.json +4 -0
- package/static/info_arch.json +118 -1
- package/static/previews.json +117 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
.Banner{background-
|
|
1
|
+
.Banner{background-image:linear-gradient(var(--bgColor-accent-muted,var(--color-accent-subtle)),var(--bgColor-accent-muted,var(--color-accent-subtle)));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-accent-muted,var(--color-accent-muted));border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default,var(--color-fg-default));display:grid;grid-auto-flow:column;grid-template-areas:"visual message actions close";grid-template-columns:min-content 1fr minmax(0,auto) min-content;grid-template-rows:min-content;padding:var(--base-size-8,.5rem);position:relative}@media (max-width:543.98px){.Banner{grid-template-areas:"visual message close" ". actions actions";grid-template-columns:min-content 1fr min-content;grid-template-rows:min-content min-content}.Banner .Banner-actions{margin:var(--base-size-8,.5rem) 0 0 var(--base-size-8,.5rem)}}.Banner .Banner-visual{align-self:start;display:grid;grid-area:visual;padding:.375rem var(--base-size-8,.5rem)}.Banner .Banner-visual>.octicon{margin-block:calc(var(--base-size-4,.25rem)/2)}.Banner .Banner-visual>*{align-self:center}.Banner .Banner-message{align-self:center;grid-area:message;padding:.375rem var(--base-size-8,.5rem)}.Banner .Banner-message p:last-child{margin-bottom:0}.Banner .Banner-message .Banner-title:not(:only-child){font-weight:var(--base-text-weight-semibold,600);margin-bottom:0}.Banner .Banner-actions{grid-area:actions}.Banner .Banner-actions:last-child{align-self:center}.Banner .Banner-close{grid-area:close;margin-left:var(--controlStack-medium-gap-condensed,.5rem)}.Banner .Banner-visual .octicon{color:var(--fgColor-accent,var(--color-accent-fg))}.Banner.Banner--warning{background-image:linear-gradient(var(--bgColor-attention-muted,var(--color-attention-subtle)),var(--bgColor-attention-muted,var(--color-attention-subtle)));border-color:var(--borderColor-attention-muted,var(--color-attention-muted));color:var(--fgColor-default,var(--color-fg-default))}.Banner.Banner--warning .Banner-visual .octicon{color:var(--fgColor-attention,var(--color-attention-fg))}.Banner.Banner--error{background-image:linear-gradient(var(--bgColor-danger-muted,var(--color-danger-subtle)),var(--bgColor-danger-muted,var(--color-danger-subtle)));border-color:var(--borderColor-danger-muted,var(--color-danger-muted));color:var(--fgColor-default,var(--color-fg-default))}.Banner.Banner--error .Banner-visual .octicon{color:var(--fgColor-danger,var(--color-danger-fg))}.Banner.Banner--success{background-image:linear-gradient(var(--bgColor-success-muted,var(--color-success-subtle)),var(--bgColor-success-muted,var(--color-success-subtle)));border-color:var(--borderColor-success-muted,var(--color-success-muted));color:var(--fgColor-default,var(--color-fg-default))}.Banner.Banner--success .Banner-visual .octicon{color:var(--fgColor-success,var(--color-success-fg))}.Banner.Banner--full{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}@media (max-width:767.98px){.Banner.Banner--full-whenNarrow{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
body.has-modal{overflow:hidden!important;padding-right:var(--dialog-scrollgutter)!important}dialog.Overlay:not([open]){display:none}.Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}:
|
|
1
|
+
body.has-modal{overflow:hidden!important;padding-right:var(--dialog-scrollgutter)!important}dialog.Overlay:not([open]){display:none}.Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}@supports not selector(:popover-open){[popover]:not(.\:popover-open){display:none}}.Overlay{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border:0;border-radius:var(--borderRadius-large,.75rem);box-shadow:var(--shadow-floating-small,var(--color-overlay-shadow));color:var(--fgColor-default,var(--color-fg-default));display:flex;flex-direction:column;inset:0;margin:auto;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;padding:0;position:static;white-space:normal;width:min(var(--overlay-width),100vw - 2rem)}.Overlay.Overlay--size-auto{max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);min-width:192px}.Overlay.Overlay--size-full{height:100vh;width:100vw}.Overlay.Overlay--size-xsmall{--overlay-width:192px;max-height:calc(100vh - 2rem)}.Overlay.Overlay--size-small{--overlay-height:256px;--overlay-width:320px}.Overlay.Overlay--size-small-portrait{--overlay-height:432px;--overlay-width:320px}.Overlay.Overlay--size-medium{--overlay-height:320px;--overlay-width:480px}.Overlay.Overlay--size-medium-portrait{--overlay-height:600px;--overlay-width:480px}.Overlay.Overlay--size-large{--overlay-height:432px;--overlay-width:640px}.Overlay.Overlay--size-xlarge{--overlay-height:600px;--overlay-width:960px}.Overlay.Overlay--height-auto{height:auto}.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{height:100%;max-height:unset;position:fixed}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade,.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay.Overlay--placement-left{animation-name:Overlay--motion-slideInRight;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--height-xsmall{height:min(192px,100vh - 2rem)}.Overlay.Overlay--height-small{height:min(256px,100vh - 2rem)}.Overlay.Overlay--height-medium{height:min(320px,100vh - 2rem)}.Overlay.Overlay--height-large{height:min(432px,100vh - 2rem)}.Overlay.Overlay--height-xlarge{height:min(600px,100vh - 2rem)}.Overlay.Overlay--width-auto{width:auto}.Overlay.Overlay--width-small{width:min(256px,100vw - 2rem)}.Overlay.Overlay--width-medium{width:min(320px,100vw - 2rem)}.Overlay.Overlay--width-large{width:min(480px,100vw - 2rem)}.Overlay.Overlay--width-xlarge{width:min(640px,100vw - 2rem)}.Overlay.Overlay--width-xxlarge{width:min(960px,100vw - 2rem)}.Overlay:modal{position:fixed}@keyframes Overlay--motion-scaleFade{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.Overlay-form{flex-grow:1;overflow:auto}.Overlay-form,.Overlay-header{display:flex;flex-direction:column}.Overlay-header{color:var(--fgColor-default,var(--color-fg-default));z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--borderWidth-thin,max(1px, .0625rem))*-1) var(--borderColor-default,var(--color-border-default));padding-bottom:var(--stack-padding-condensed,.5rem)}.Overlay-header.Overlay-header--divided+.Overlay-body{padding-top:var(--stack-padding-normal,1rem)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap{gap:var(--stack-gap-condensed,.5rem)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--text-title-size-medium,1.25rem)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{font-size:var(--text-body-size-medium,.875rem)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--stack-gap-condensed,.5rem);padding:var(--stack-gap-condensed,.5rem) var(--stack-gap-condensed,.5rem) 0 var(--stack-gap-condensed,.5rem)}.Overlay-header .Overlay-headerContentWrap .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--stack-gap-condensed,.5rem)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--control-small-gap,.25rem);padding:calc(var(--stack-gap-condensed,.5rem)*.75) 0 calc(var(--stack-gap-condensed,.5rem)*.75) var(--stack-gap-condensed,.5rem)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600);margin:0}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);margin:0}.Overlay-body{flex-grow:1;font-size:var(--text-body-size-medium,.875rem);overflow-y:auto;padding:var(--stack-padding-normal,1rem);padding-top:0;scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--stack-padding-condensed,.5rem);padding-top:0}.Overlay-body.Overlay-body--paddingNone{padding:0}.Overlay-footer{display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;padding:0 var(--stack-padding-normal,1rem) var(--stack-padding-normal,1rem) var(--stack-padding-normal,1rem);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-default,var(--color-border-default));padding-top:var(--stack-padding-normal,1rem)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--stack-gap-condensed,.5rem);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--stack-gap-condensed,.5rem);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--stack-gap-condensed,.5rem);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-muted,var(--color-fg-muted));cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32,2rem);padding:0;place-content:center;position:relative;transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;-webkit-user-select:none;user-select:none;width:var(--base-size-32,2rem)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--control-bgColor-hover,var(--color-btn-hover-bg))}.Overlay-closeButton.close-button{border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000}.Overlay--full{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}@media (max-width:767px){.Overlay--placement-right-whenNarrow,.Overlay.Overlay--placement-left-whenNarrow{height:100%;max-height:100vh;position:fixed}.Overlay.Overlay--placement-left-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--placement-bottom-whenNarrow{animation-name:Overlay--motion-slideUp;border-bottom-left-radius:0;border-bottom-right-radius:0;inset:auto 0 0;max-width:100vw;width:100%}.Overlay--full-whenNarrow{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}}@keyframes Overlay--motion-slideDown{0%{transform:translateY(-100%)}}@keyframes Overlay--motion-slideUp{0%{transform:translateY(100%)}}@keyframes Overlay--motion-slideInRight{0%{transform:translateX(-100%)}}@keyframes Overlay--motion-slideInLeft{0%{transform:translateX(100%)}}
|
|
@@ -5,8 +5,7 @@
|
|
|
5
5
|
"dialog.Overlay:not([open])",
|
|
6
6
|
".Overlay--hidden",
|
|
7
7
|
".Overlay--visibilityHidden",
|
|
8
|
-
"
|
|
9
|
-
":popover-open",
|
|
8
|
+
"[popover]:not(.\\:popover-open)",
|
|
10
9
|
".Overlay",
|
|
11
10
|
".Overlay.Overlay--size-auto",
|
|
12
11
|
".Overlay.Overlay--size-full",
|
|
@@ -1 +1 @@
|
|
|
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}
|
|
1
|
+
.SegmentedControl{--segmentedControl-item-padding:var(--control-small-paddingBlock,0.25rem);--overlay-offset:0.5rem;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}
|
|
@@ -32,9 +32,7 @@ const isPopoverOpen = (() => {
|
|
|
32
32
|
}
|
|
33
33
|
return (el) => (selector ? el.matches(selector) : setSelector(el));
|
|
34
34
|
})();
|
|
35
|
-
const TOOLTIP_ARROW_EDGE_OFFSET = 6;
|
|
36
35
|
const TOOLTIP_SR_ONLY_CLASS = 'sr-only';
|
|
37
|
-
const TOOLTIP_OFFSET = 10;
|
|
38
36
|
const DIRECTION_CLASSES = [
|
|
39
37
|
'tooltip-n',
|
|
40
38
|
'tooltip-s',
|
|
@@ -84,6 +82,8 @@ class ToolTipElement extends HTMLElement {
|
|
|
84
82
|
styles() {
|
|
85
83
|
return `
|
|
86
84
|
:host {
|
|
85
|
+
--tooltip-top: var(--tool-tip-position-top, 0);
|
|
86
|
+
--tooltip-left: var(--tool-tip-position-left, 0);
|
|
87
87
|
padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed) !important;
|
|
88
88
|
font: var(--text-body-shorthand-small);
|
|
89
89
|
color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)) !important;
|
|
@@ -102,27 +102,29 @@ class ToolTipElement extends HTMLElement {
|
|
|
102
102
|
word-wrap: break-word;
|
|
103
103
|
white-space: normal;
|
|
104
104
|
width: max-content !important;
|
|
105
|
-
inset: var(--
|
|
105
|
+
inset: var(--tooltip-top) auto auto var(--tooltip-left) !important;
|
|
106
106
|
overflow: visible !important;
|
|
107
107
|
text-wrap: balance;
|
|
108
108
|
}
|
|
109
109
|
|
|
110
|
-
:host:
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
|
|
114
|
-
content: "";
|
|
115
|
-
border: 6px solid transparent;
|
|
116
|
-
opacity: 0;
|
|
110
|
+
:host(:is(.tooltip-n, .tooltip-nw, .tooltip-ne)) {
|
|
111
|
+
--tooltip-top: calc(var(--tool-tip-position-top, 0) - var(--overlay-offset, 0.25rem));
|
|
112
|
+
--tooltip-left: var(--tool-tip-position-left);
|
|
117
113
|
}
|
|
118
114
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
115
|
+
:host(:is(.tooltip-s, .tooltip-sw, .tooltip-se)) {
|
|
116
|
+
--tooltip-top: calc(var(--tool-tip-position-top, 0) + var(--overlay-offset, 0.25rem));
|
|
117
|
+
--tooltip-left: var(--tool-tip-position-left);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
:host(.tooltip-w) {
|
|
121
|
+
--tooltip-top: var(--tool-tip-position-top);
|
|
122
|
+
--tooltip-left: calc(var(--tool-tip-position-left, 0) - var(--overlay-offset, 0.25rem));
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
:host(.tooltip-e) {
|
|
126
|
+
--tooltip-top: var(--tool-tip-position-top);
|
|
127
|
+
--tooltip-left: calc(var(--tool-tip-position-left, 0) + var(--overlay-offset, 0.25rem));
|
|
126
128
|
}
|
|
127
129
|
|
|
128
130
|
:host:after{
|
|
@@ -134,73 +136,40 @@ class ToolTipElement extends HTMLElement {
|
|
|
134
136
|
content: "";
|
|
135
137
|
}
|
|
136
138
|
|
|
137
|
-
:host(:popover-open),
|
|
138
|
-
:host(:popover-open):before {
|
|
139
|
-
animation-name: tooltip-appear;
|
|
140
|
-
animation-duration: .1s;
|
|
141
|
-
animation-fill-mode: forwards;
|
|
142
|
-
animation-timing-function: ease-in;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
:host(.\\:popover-open),
|
|
146
|
-
:host(.\\:popover-open):before {
|
|
147
|
-
animation-name: tooltip-appear;
|
|
148
|
-
animation-duration: .1s;
|
|
149
|
-
animation-fill-mode: forwards;
|
|
150
|
-
animation-timing-function: ease-in;
|
|
151
|
-
animation-delay: .4s;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
:host(.tooltip-s):before,
|
|
155
|
-
:host(.tooltip-n):before {
|
|
156
|
-
right: 50%;
|
|
157
|
-
margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
|
|
158
|
-
}
|
|
159
|
-
:host(.tooltip-s):before,
|
|
160
|
-
:host(.tooltip-se):before,
|
|
161
|
-
:host(.tooltip-sw):before {
|
|
162
|
-
bottom: 100%;
|
|
163
|
-
border-bottom-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
|
|
164
|
-
}
|
|
165
139
|
:host(.tooltip-s):after,
|
|
166
140
|
:host(.tooltip-se):after,
|
|
167
141
|
:host(.tooltip-sw):after {
|
|
168
142
|
bottom: 100%
|
|
169
143
|
}
|
|
170
|
-
|
|
171
|
-
:host(.tooltip-ne):before,
|
|
172
|
-
:host(.tooltip-nw):before {
|
|
173
|
-
top: 100%;
|
|
174
|
-
border-top-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
|
|
175
|
-
}
|
|
144
|
+
|
|
176
145
|
:host(.tooltip-n):after,
|
|
177
146
|
:host(.tooltip-ne):after,
|
|
178
147
|
:host(.tooltip-nw):after {
|
|
179
148
|
top: 100%;
|
|
180
149
|
}
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
margin-right: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
|
|
150
|
+
|
|
151
|
+
@keyframes tooltip-appear {
|
|
152
|
+
from {
|
|
153
|
+
opacity: 0;
|
|
154
|
+
}
|
|
155
|
+
to {
|
|
156
|
+
opacity: 1;
|
|
157
|
+
}
|
|
190
158
|
}
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
159
|
+
|
|
160
|
+
:host(:popover-open),
|
|
161
|
+
:host(:popover-open):before {
|
|
162
|
+
animation-name: tooltip-appear;
|
|
163
|
+
animation-duration: .1s;
|
|
164
|
+
animation-fill-mode: forwards;
|
|
165
|
+
animation-timing-function: ease-in;
|
|
197
166
|
}
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
167
|
+
|
|
168
|
+
:host(.\\:popover-open) {
|
|
169
|
+
animation-name: tooltip-appear;
|
|
170
|
+
animation-duration: .1s;
|
|
171
|
+
animation-fill-mode: forwards;
|
|
172
|
+
animation-timing-function: ease-in;
|
|
204
173
|
}
|
|
205
174
|
|
|
206
175
|
@media (forced-colors: active) {
|
|
@@ -390,7 +359,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
|
|
|
390
359
|
__classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
|
|
391
360
|
}
|
|
392
361
|
else if (direction === 'ne') {
|
|
393
|
-
__classPrivateFieldSet(this, _ToolTipElement_align, '
|
|
362
|
+
__classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
|
|
394
363
|
__classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
|
|
395
364
|
}
|
|
396
365
|
else if (direction === 'e') {
|
|
@@ -398,7 +367,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
|
|
|
398
367
|
__classPrivateFieldSet(this, _ToolTipElement_side, 'outside-right', "f");
|
|
399
368
|
}
|
|
400
369
|
else if (direction === 'se') {
|
|
401
|
-
__classPrivateFieldSet(this, _ToolTipElement_align, '
|
|
370
|
+
__classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
|
|
402
371
|
__classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
|
|
403
372
|
}
|
|
404
373
|
else if (direction === 's') {
|
|
@@ -406,7 +375,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
|
|
|
406
375
|
__classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
|
|
407
376
|
}
|
|
408
377
|
else if (direction === 'sw') {
|
|
409
|
-
__classPrivateFieldSet(this, _ToolTipElement_align, '
|
|
378
|
+
__classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
|
|
410
379
|
__classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
|
|
411
380
|
}
|
|
412
381
|
else if (direction === 'w') {
|
|
@@ -414,7 +383,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
|
|
|
414
383
|
__classPrivateFieldSet(this, _ToolTipElement_side, 'outside-left', "f");
|
|
415
384
|
}
|
|
416
385
|
else if (direction === 'nw') {
|
|
417
|
-
__classPrivateFieldSet(this, _ToolTipElement_align, '
|
|
386
|
+
__classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
|
|
418
387
|
__classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
|
|
419
388
|
}
|
|
420
389
|
}, _ToolTipElement_updatePosition = function _ToolTipElement_updatePosition() {
|
|
@@ -425,7 +394,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
|
|
|
425
394
|
const position = getAnchoredPosition(this, this.control, {
|
|
426
395
|
side: __classPrivateFieldGet(this, _ToolTipElement_side, "f"),
|
|
427
396
|
align: __classPrivateFieldGet(this, _ToolTipElement_align, "f"),
|
|
428
|
-
anchorOffset:
|
|
397
|
+
anchorOffset: 0,
|
|
429
398
|
});
|
|
430
399
|
const anchorSide = position.anchorSide;
|
|
431
400
|
const align = position.anchorAlign;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--button-default-fgColor-rest,var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,.25rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button.Button--iconOnly{color:var(--fgColor-muted,var(--color-fg-muted))}a.Button:hover,summary.Button:hover{-webkit-text-decoration:none;text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium,1.4285);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-leadingVisual svg{fill:currentcolor}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4,.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small,1.6666)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.Button--large{gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.Button--fullWidth{width:100%}.Button--primary{color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text));fill:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow))}.Button--primary:hover:not(:disabled,.Button--inactive){background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));fill:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{color:var(--button-default-fgColor-rest,var(--color-btn-text));fill:var(--fgColor-muted,var(--color-fg-muted));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow))}.Button--secondary:hover:not(:disabled,.Button--inactive){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover,var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active,var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected,var(--color-btn-selected-bg));box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{background-color:var(--button-default-bgColor-disabled,var(--color-btn-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--invisible.Button--iconOnly{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible:hover:not(:disabled,.Button--inactive){background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active,var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{background-color:var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));border-color:var(--button-invisible-borderColor-disabled,var(--color-action-list-item-default-selected-bg));color:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));fill:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest,var(--color-btn-outline-text))}.Button--invisible .Button-visual{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default,var(--color-fg-default))}.Button--link{color:var(--fgColor-link,var(--color-accent-fg));fill:var(--fgColor-link,var(--color-accent-fg));border:none;display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled,.Button--inactive){-webkit-text-decoration:underline;text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--danger{color:var(--button-danger-fgColor-rest,var(--color-btn-danger-text));fill:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest,var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow))}.Button--danger:hover:not(:disabled,.Button--inactive){color:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));fill:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small))}.Button--danger:hover:not(:disabled,.Button--inactive) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));color:var(--buttonCounter-danger-fgColor-hover,var(--color-btn-danger-hover-counter-fg))}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{color:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));fill:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow))}.Button--danger:disabled,.Button--danger[aria-disabled=true]{color:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));fill:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border))}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));color:var(--buttonCounter-danger-fgColor-disabled,var(--color-btn-danger-disabled-counter-fg))}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));color:var(--buttonCounter-danger-fgColor-rest,var(--color-btn-danger-counter-fg))}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.Button--iconOnly.Button--small{width:var(--control-small-size,1.75rem)}.Button--iconOnly.Button--large{width:var(--control-large-size,2.5rem)}.Button--inactive:not([aria-disabled=true],:disabled){background-color:var(--button-inactive-bgColor);border:0;color:var(--button-inactive-fgColor);cursor:default}
|
|
1
|
+
:root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--button-default-fgColor-rest,var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,.25rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button.Button--iconOnly{color:var(--fgColor-muted,var(--color-fg-muted))}a.Button:hover,summary.Button:hover{-webkit-text-decoration:none;text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium,1.4285);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-leadingVisual svg{fill:currentcolor}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4,.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small,1.6666)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.Button--large{gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.Button--fullWidth{width:100%}.Button--primary{color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text));fill:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow))}.Button--primary.Button--iconOnly{color:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon))}.Button--primary:hover:not(:disabled,.Button--inactive){background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));fill:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{color:var(--button-default-fgColor-rest,var(--color-btn-text));fill:var(--fgColor-muted,var(--color-fg-muted));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow))}.Button--secondary:hover:not(:disabled,.Button--inactive){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover,var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active,var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected,var(--color-btn-selected-bg));box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{background-color:var(--button-default-bgColor-disabled,var(--color-btn-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--invisible.Button--iconOnly{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible:hover:not(:disabled,.Button--inactive){background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active,var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{background-color:var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));border-color:var(--button-invisible-borderColor-disabled,var(--color-action-list-item-default-selected-bg));color:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));fill:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest,var(--color-btn-outline-text))}.Button--invisible .Button-visual{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default,var(--color-fg-default))}.Button--link{color:var(--fgColor-link,var(--color-accent-fg));fill:var(--fgColor-link,var(--color-accent-fg));border:none;display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled,.Button--inactive){-webkit-text-decoration:underline;text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--danger{color:var(--button-danger-fgColor-rest,var(--color-btn-danger-text));fill:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest,var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow))}.Button--danger.Button--iconOnly{color:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon))}.Button--danger:hover:not(:disabled,.Button--inactive){color:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));fill:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small))}.Button--danger:hover:not(:disabled,.Button--inactive) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));color:var(--buttonCounter-danger-fgColor-hover,var(--color-btn-danger-hover-counter-fg))}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{color:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));fill:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow))}.Button--danger:disabled,.Button--danger[aria-disabled=true]{color:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));fill:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border))}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));color:var(--buttonCounter-danger-fgColor-disabled,var(--color-btn-danger-disabled-counter-fg))}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));color:var(--buttonCounter-danger-fgColor-rest,var(--color-btn-danger-counter-fg))}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.Button--iconOnly.Button--small{width:var(--control-small-size,1.75rem)}.Button--iconOnly.Button--large{width:var(--control-large-size,2.5rem)}.Button--inactive:not([aria-disabled=true],:disabled){background-color:var(--button-inactive-bgColor);border:0;color:var(--button-inactive-fgColor);cursor:default}
|
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
".Button--large .Button-content>:not(:last-child)",
|
|
30
30
|
".Button--fullWidth",
|
|
31
31
|
".Button--primary",
|
|
32
|
+
".Button--primary.Button--iconOnly",
|
|
32
33
|
".Button--primary:hover:not(:disabled,.Button--inactive)",
|
|
33
34
|
".Button--primary:focus",
|
|
34
35
|
".Button--primary:focus:not(:focus-visible)",
|
|
@@ -61,6 +62,7 @@
|
|
|
61
62
|
".Button--link:disabled",
|
|
62
63
|
".Button--link[aria-disabled=true]",
|
|
63
64
|
".Button--danger",
|
|
65
|
+
".Button--danger.Button--iconOnly",
|
|
64
66
|
".Button--danger:hover:not(:disabled,.Button--inactive)",
|
|
65
67
|
".Button--danger:hover:not(:disabled,.Button--inactive) .Counter",
|
|
66
68
|
".Button--danger:active:not(:disabled)",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.flash:not(.Banner){background-
|
|
1
|
+
.flash:not(.Banner){background-image:linear-gradient(var(--bgColor-accent-muted,var(--color-accent-subtle)),var(--bgColor-accent-muted,var(--color-accent-subtle)));border-color:var(--borderColor-accent-muted,var(--color-accent-muted));border-radius:var(--borderRadius-medium,.375rem);border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem));color:var(--fgColor-default,var(--color-fg-default));padding:var(--base-size-20,1.25rem) var(--control-medium-paddingInline-spacious,1rem);position:relative}.flash:not(.Banner) .octicon{color:var(--fgColor-accent,var(--color-accent-fg));margin-right:var(--base-size-12,.75rem)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--stack-gap-spacious,1.5rem)}.flash-close:not(.Banner-close){-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;float:right;margin-top:calc(var(--base-size-4,.25rem)*-1);text-align:center}.flash-close:not(.Banner-close):hover{opacity:.7}.flash-close:not(.Banner-close):active{opacity:.5}.flash-close:not(.Banner-close) .octicon{margin-right:0}.flash-action:not(.Banner-actions){background-clip:padding-box;float:right;margin-left:var(--stack-gap-spacious,1.5rem);margin-top:-3px}.flash-action.btn:not(.Banner-actions) .octicon{color:var(--fgColor-muted,var(--color-fg-muted));margin-right:var(--control-small-gap,.25rem)}.flash-action.btn-primary:not(.Banner-actions){background-clip:initial}.flash-action.btn-primary:not(.Banner-actions) .octicon{color:inherit}.flash-warn:not(.Banner){background-image:linear-gradient(var(--bgColor-attention-muted,var(--color-attention-subtle)),var(--bgColor-attention-muted,var(--color-attention-subtle)));border-color:var(--borderColor-attention-muted,var(--color-attention-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-warn:not(.Banner) .octicon{color:var(--fgColor-attention,var(--color-attention-fg))}.flash-error:not(.Banner){background-image:linear-gradient(var(--bgColor-danger-muted,var(--color-danger-subtle)),var(--bgColor-danger-muted,var(--color-danger-subtle)));border-color:var(--borderColor-danger-muted,var(--color-danger-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-error:not(.Banner) .octicon{color:var(--fgColor-danger,var(--color-danger-fg))}.flash-success:not(.Banner){background-image:linear-gradient(var(--bgColor-success-muted,var(--color-success-subtle)),var(--bgColor-success-muted,var(--color-success-subtle)));border-color:var(--borderColor-success-muted,var(--color-success-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-success:not(.Banner) .octicon{color:var(--fgColor-success,var(--color-success-fg))}.flash-full:not(.Banner){border-radius:0;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.flash-banner{border-left:0;border-radius:0;border-right:0;border-top:0;position:fixed;top:0;width:100%;z-index:90}.flash-banner,.flash-full{background-color:var(--bgColor-default,var(--color-canvas-default))}.warning{background-color:var(--bgColor-attention-muted,var(--color-attention-subtle));font-weight:var(--base-text-weight-semibold,600);margin-bottom:.8em;padding:.5em}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/view-components",
|
|
3
|
-
"version": "0.21.
|
|
3
|
+
"version": "0.21.1-rc.1c4aed32",
|
|
4
4
|
"description": "ViewComponents for the Primer Design System",
|
|
5
5
|
"main": "app/assets/javascripts/primer_view_components.js",
|
|
6
6
|
"module": "app/components/primer/primer.js",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"@github/markdownlint-github": "^0.6.0",
|
|
63
63
|
"@github/prettier-config": "0.0.6",
|
|
64
64
|
"@playwright/test": "^1.35.1",
|
|
65
|
-
"@primer/css": "21.2.
|
|
65
|
+
"@primer/css": "21.2.2",
|
|
66
66
|
"@primer/primitives": "7.15.12",
|
|
67
67
|
"@primer/stylelint-config": "^12.7.2",
|
|
68
68
|
"@rollup/plugin-node-resolve": "^15.2.3",
|
package/static/arguments.json
CHANGED
|
@@ -3760,7 +3760,7 @@
|
|
|
3760
3760
|
"name": "scheme",
|
|
3761
3761
|
"type": "Symbol",
|
|
3762
3762
|
"default": "`:default`",
|
|
3763
|
-
"description": "One of `:danger`, `:default`, or `:
|
|
3763
|
+
"description": "One of `:danger`, `:default`, `:invisible`, `:primary`, or `:secondary`."
|
|
3764
3764
|
},
|
|
3765
3765
|
{
|
|
3766
3766
|
"name": "size",
|
package/static/constants.json
CHANGED
|
@@ -938,11 +938,15 @@
|
|
|
938
938
|
"DEFAULT_SCHEME": "default",
|
|
939
939
|
"SCHEME_MAPPINGS": {
|
|
940
940
|
"default": "Button--secondary",
|
|
941
|
+
"primary": "Button--primary",
|
|
942
|
+
"secondary": "Button--secondary",
|
|
941
943
|
"danger": "Button--danger",
|
|
942
944
|
"invisible": "Button--invisible"
|
|
943
945
|
},
|
|
944
946
|
"SCHEME_OPTIONS": [
|
|
945
947
|
"default",
|
|
948
|
+
"primary",
|
|
949
|
+
"secondary",
|
|
946
950
|
"danger",
|
|
947
951
|
"invisible"
|
|
948
952
|
]
|
package/static/info_arch.json
CHANGED
|
@@ -8778,6 +8778,110 @@
|
|
|
8778
8778
|
"color-contrast"
|
|
8779
8779
|
]
|
|
8780
8780
|
}
|
|
8781
|
+
},
|
|
8782
|
+
{
|
|
8783
|
+
"preview_path": "primer/alpha/tooltip/tooltip_n",
|
|
8784
|
+
"name": "tooltip_n",
|
|
8785
|
+
"snapshot": "interactive",
|
|
8786
|
+
"skip_rules": {
|
|
8787
|
+
"wont_fix": [
|
|
8788
|
+
"region"
|
|
8789
|
+
],
|
|
8790
|
+
"will_fix": [
|
|
8791
|
+
"color-contrast"
|
|
8792
|
+
]
|
|
8793
|
+
}
|
|
8794
|
+
},
|
|
8795
|
+
{
|
|
8796
|
+
"preview_path": "primer/alpha/tooltip/tooltip_s",
|
|
8797
|
+
"name": "tooltip_s",
|
|
8798
|
+
"snapshot": "interactive",
|
|
8799
|
+
"skip_rules": {
|
|
8800
|
+
"wont_fix": [
|
|
8801
|
+
"region"
|
|
8802
|
+
],
|
|
8803
|
+
"will_fix": [
|
|
8804
|
+
"color-contrast"
|
|
8805
|
+
]
|
|
8806
|
+
}
|
|
8807
|
+
},
|
|
8808
|
+
{
|
|
8809
|
+
"preview_path": "primer/alpha/tooltip/tooltip_e",
|
|
8810
|
+
"name": "tooltip_e",
|
|
8811
|
+
"snapshot": "interactive",
|
|
8812
|
+
"skip_rules": {
|
|
8813
|
+
"wont_fix": [
|
|
8814
|
+
"region"
|
|
8815
|
+
],
|
|
8816
|
+
"will_fix": [
|
|
8817
|
+
"color-contrast"
|
|
8818
|
+
]
|
|
8819
|
+
}
|
|
8820
|
+
},
|
|
8821
|
+
{
|
|
8822
|
+
"preview_path": "primer/alpha/tooltip/tooltip_w",
|
|
8823
|
+
"name": "tooltip_w",
|
|
8824
|
+
"snapshot": "interactive",
|
|
8825
|
+
"skip_rules": {
|
|
8826
|
+
"wont_fix": [
|
|
8827
|
+
"region"
|
|
8828
|
+
],
|
|
8829
|
+
"will_fix": [
|
|
8830
|
+
"color-contrast"
|
|
8831
|
+
]
|
|
8832
|
+
}
|
|
8833
|
+
},
|
|
8834
|
+
{
|
|
8835
|
+
"preview_path": "primer/alpha/tooltip/tooltip_se",
|
|
8836
|
+
"name": "tooltip_se",
|
|
8837
|
+
"snapshot": "interactive",
|
|
8838
|
+
"skip_rules": {
|
|
8839
|
+
"wont_fix": [
|
|
8840
|
+
"region"
|
|
8841
|
+
],
|
|
8842
|
+
"will_fix": [
|
|
8843
|
+
"color-contrast"
|
|
8844
|
+
]
|
|
8845
|
+
}
|
|
8846
|
+
},
|
|
8847
|
+
{
|
|
8848
|
+
"preview_path": "primer/alpha/tooltip/tooltip_sw",
|
|
8849
|
+
"name": "tooltip_sw",
|
|
8850
|
+
"snapshot": "interactive",
|
|
8851
|
+
"skip_rules": {
|
|
8852
|
+
"wont_fix": [
|
|
8853
|
+
"region"
|
|
8854
|
+
],
|
|
8855
|
+
"will_fix": [
|
|
8856
|
+
"color-contrast"
|
|
8857
|
+
]
|
|
8858
|
+
}
|
|
8859
|
+
},
|
|
8860
|
+
{
|
|
8861
|
+
"preview_path": "primer/alpha/tooltip/tooltip_ne",
|
|
8862
|
+
"name": "tooltip_ne",
|
|
8863
|
+
"snapshot": "interactive",
|
|
8864
|
+
"skip_rules": {
|
|
8865
|
+
"wont_fix": [
|
|
8866
|
+
"region"
|
|
8867
|
+
],
|
|
8868
|
+
"will_fix": [
|
|
8869
|
+
"color-contrast"
|
|
8870
|
+
]
|
|
8871
|
+
}
|
|
8872
|
+
},
|
|
8873
|
+
{
|
|
8874
|
+
"preview_path": "primer/alpha/tooltip/tooltip_nw",
|
|
8875
|
+
"name": "tooltip_nw",
|
|
8876
|
+
"snapshot": "interactive",
|
|
8877
|
+
"skip_rules": {
|
|
8878
|
+
"wont_fix": [
|
|
8879
|
+
"region"
|
|
8880
|
+
],
|
|
8881
|
+
"will_fix": [
|
|
8882
|
+
"color-contrast"
|
|
8883
|
+
]
|
|
8884
|
+
}
|
|
8781
8885
|
}
|
|
8782
8886
|
],
|
|
8783
8887
|
"subcomponents": [
|
|
@@ -12329,7 +12433,7 @@
|
|
|
12329
12433
|
"name": "scheme",
|
|
12330
12434
|
"type": "Symbol",
|
|
12331
12435
|
"default": "`:default`",
|
|
12332
|
-
"description": "One of `:danger`, `:default`, or `:
|
|
12436
|
+
"description": "One of `:danger`, `:default`, `:invisible`, `:primary`, or `:secondary`."
|
|
12333
12437
|
},
|
|
12334
12438
|
{
|
|
12335
12439
|
"name": "size",
|
|
@@ -12426,6 +12530,19 @@
|
|
|
12426
12530
|
]
|
|
12427
12531
|
}
|
|
12428
12532
|
},
|
|
12533
|
+
{
|
|
12534
|
+
"preview_path": "primer/beta/icon_button/primary",
|
|
12535
|
+
"name": "primary",
|
|
12536
|
+
"snapshot": "true",
|
|
12537
|
+
"skip_rules": {
|
|
12538
|
+
"wont_fix": [
|
|
12539
|
+
"region"
|
|
12540
|
+
],
|
|
12541
|
+
"will_fix": [
|
|
12542
|
+
"color-contrast"
|
|
12543
|
+
]
|
|
12544
|
+
}
|
|
12545
|
+
},
|
|
12429
12546
|
{
|
|
12430
12547
|
"preview_path": "primer/beta/icon_button/danger",
|
|
12431
12548
|
"name": "danger",
|