@primer/view-components 0.35.0-rc.190fca91 → 0.35.0-rc.2fec3c39

Sign up to get free protection for your applications and to get access to all the features.
@@ -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}@supports not selector(:popover-open){[popover]:not(.\:popover-open){display:none}}.Overlay{background-color:var(--overlay-bgColor);border:0;border-radius:var(--borderRadius-large);box-shadow:var(--shadow-floating-small);color:var(--fgColor-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);z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--borderWidth-thin)*-1) var(--borderColor-default);padding-bottom:var(--stack-padding-condensed)}.Overlay-header.Overlay-header--divided+.Overlay-body{padding-top:var(--stack-padding-normal)}:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap{gap:var(--stack-gap-condensed)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-title-size-medium)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{font-size:var(--text-body-size-medium)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--stack-gap-condensed);padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--control-small-gap);padding:calc(var(--stack-gap-condensed)*.75) 0 calc(var(--stack-gap-condensed)*.75) var(--stack-gap-condensed)}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold);margin:0}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{color:var(--fgColor-muted);font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-normal);margin:0}.Overlay-headerFilter{padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}.Overlay-body{flex-grow:1;font-size:var(--text-body-size-medium);overflow-y:auto;padding:var(--stack-padding-normal);padding-top:0;scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--stack-padding-condensed);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) var(--stack-padding-normal) var(--stack-padding-normal);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--borderWidth-thin) var(--borderColor-default);padding-top:var(--stack-padding-normal)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--stack-gap-condensed);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--stack-gap-condensed);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--stack-gap-condensed);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);color:var(--fgColor-muted);cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32);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)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--button-default-bgColor-hover);border:var(--borderWidth-thin) solid var(--control-bgColor-hover)}.Overlay-closeButton.close-button{border:var(--borderWidth-thin) 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%)}}
1
+ @property --dialog-scrollgutter{initial-value:0;inherits:false;syntax:"<length>"}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);border:0;border-radius:var(--borderRadius-large);box-shadow:var(--shadow-floating-small);color:var(--fgColor-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);z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--borderWidth-thin)*-1) var(--borderColor-default);padding-bottom:var(--stack-padding-condensed)}.Overlay-header.Overlay-header--divided+.Overlay-body{padding-top:var(--stack-padding-normal)}:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap{gap:var(--stack-gap-condensed)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-title-size-medium)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{font-size:var(--text-body-size-medium)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--stack-gap-condensed);padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--control-small-gap);padding:calc(var(--stack-gap-condensed)*.75) 0 calc(var(--stack-gap-condensed)*.75) var(--stack-gap-condensed)}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold);margin:0}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{color:var(--fgColor-muted);font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-normal);margin:0}.Overlay-headerFilter{padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}.Overlay-body{flex-grow:1;font-size:var(--text-body-size-medium);overflow-y:auto;padding:var(--stack-padding-normal);padding-top:0;scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--stack-padding-condensed);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) var(--stack-padding-normal) var(--stack-padding-normal);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--borderWidth-thin) var(--borderColor-default);padding-top:var(--stack-padding-normal)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--stack-gap-condensed);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--stack-gap-condensed);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--stack-gap-condensed);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);color:var(--fgColor-muted);cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32);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)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--button-default-bgColor-hover);border:var(--borderWidth-thin) solid var(--control-bgColor-hover)}.Overlay-closeButton.close-button{border:var(--borderWidth-thin) 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%)}}
@@ -0,0 +1 @@
1
+ .Stack{align-content:flex-start;align-items:stretch;display:flex;flex-flow:column;gap:var(--stack-gap,var(--stack-gap-normal,1rem))}.Stack[data-padding-narrow=none],.Stack[data-padding=none]{padding:0}.Stack[data-padding-narrow=condensed],.Stack[data-padding=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-narrow=normal],.Stack[data-padding=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-narrow=spacious],.Stack[data-padding=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-narrow=horizontal],.Stack[data-direction=horizontal]{flex-flow:row}.Stack[data-direction-narrow=vertical],.Stack[data-direction=vertical]{flex-flow:column}.Stack[data-gap-narrow=none],.Stack[data-gap=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-narrow=condensed],.Stack[data-gap=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-narrow=normal],.Stack[data-gap=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-narrow=spacious],.Stack[data-gap=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-narrow=start],.Stack[data-align=start]{align-items:flex-start}.Stack[data-align-narrow=center],.Stack[data-align=center]{align-items:center}.Stack[data-align-narrow=end],.Stack[data-align=end]{align-items:flex-end}.Stack[data-align-narrow=baseline],.Stack[data-align=baseline]{align-items:baseline}.Stack[data-justify-narrow=start],.Stack[data-justify=start]{justify-content:flex-start}.Stack[data-justify-narrow=center],.Stack[data-justify=center]{justify-content:center}.Stack[data-justify-narrow=end],.Stack[data-justify=end]{justify-content:flex-end}.Stack[data-justify-narrow=space-between],.Stack[data-justify=space-between]{justify-content:space-between}.Stack[data-justify-narrow=space-evenly],.Stack[data-justify=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-narrow=wrap],.Stack[data-wrap=wrap]{flex-wrap:wrap}.Stack[data-wrap-narrow=nowrap],.Stack[data-wrap=nowrap]{flex-wrap:nowrap}@media (min-width:48rem){.Stack[data-padding-regular=none]{padding:0}.Stack[data-padding-regular=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-regular=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-regular=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-regular=horizontal]{flex-flow:row}.Stack[data-direction-regular=vertical]{flex-flow:column}.Stack[data-gap-regular=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-regular=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-regular=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-regular=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-regular=start]{align-items:flex-start}.Stack[data-align-regular=center]{align-items:center}.Stack[data-align-regular=end]{align-items:flex-end}.Stack[data-align-regular=baseline]{align-items:baseline}.Stack[data-justify-regular=start]{justify-content:flex-start}.Stack[data-justify-regular=center]{justify-content:center}.Stack[data-justify-regular=end]{justify-content:flex-end}.Stack[data-justify-regular=space-between]{justify-content:space-between}.Stack[data-justify-regular=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-regular=wrap]{flex-wrap:wrap}.Stack[data-wrap-regular=nowrap]{flex-wrap:nowrap}}@media (min-width:87.5rem){.Stack[data-padding-wide=none]{padding:0}.Stack[data-padding-wide=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-wide=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-wide=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-wide=horizontal]{flex-flow:row}.Stack[data-direction-wide=vertical]{flex-flow:column}.Stack[data-gap-wide=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-wide=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-wide=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-wide=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-wide=start]{align-items:flex-start}.Stack[data-align-wide=center]{align-items:center}.Stack[data-align-wide=end]{align-items:flex-end}.Stack[data-align-wide=baseline]{align-items:baseline}.Stack[data-justify-wide=start]{justify-content:flex-start}.Stack[data-justify-wide=center]{justify-content:center}.Stack[data-justify-wide=end]{justify-content:flex-end}.Stack[data-justify-wide=space-between]{justify-content:space-between}.Stack[data-justify-wide=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-wide=wrap]{flex-wrap:wrap}.Stack[data-wrap-wide=nowrap]{flex-wrap:nowrap}}
@@ -0,0 +1,90 @@
1
+ {
2
+ "name": "alpha/stack",
3
+ "selectors": [
4
+ ".Stack",
5
+ ".Stack[data-padding-narrow=none]",
6
+ ".Stack[data-padding=none]",
7
+ ".Stack[data-padding-narrow=condensed]",
8
+ ".Stack[data-padding=condensed]",
9
+ ".Stack[data-padding-narrow=normal]",
10
+ ".Stack[data-padding=normal]",
11
+ ".Stack[data-padding-narrow=spacious]",
12
+ ".Stack[data-padding=spacious]",
13
+ ".Stack[data-direction-narrow=horizontal]",
14
+ ".Stack[data-direction=horizontal]",
15
+ ".Stack[data-direction-narrow=vertical]",
16
+ ".Stack[data-direction=vertical]",
17
+ ".Stack[data-gap-narrow=none]",
18
+ ".Stack[data-gap=none]",
19
+ ".Stack[data-gap-narrow=condensed]",
20
+ ".Stack[data-gap=condensed]",
21
+ ".Stack[data-gap-narrow=normal]",
22
+ ".Stack[data-gap=normal]",
23
+ ".Stack[data-gap-narrow=spacious]",
24
+ ".Stack[data-gap=spacious]",
25
+ ".Stack[data-align-narrow=start]",
26
+ ".Stack[data-align=start]",
27
+ ".Stack[data-align-narrow=center]",
28
+ ".Stack[data-align=center]",
29
+ ".Stack[data-align-narrow=end]",
30
+ ".Stack[data-align=end]",
31
+ ".Stack[data-align-narrow=baseline]",
32
+ ".Stack[data-align=baseline]",
33
+ ".Stack[data-justify-narrow=start]",
34
+ ".Stack[data-justify=start]",
35
+ ".Stack[data-justify-narrow=center]",
36
+ ".Stack[data-justify=center]",
37
+ ".Stack[data-justify-narrow=end]",
38
+ ".Stack[data-justify=end]",
39
+ ".Stack[data-justify-narrow=space-between]",
40
+ ".Stack[data-justify=space-between]",
41
+ ".Stack[data-justify-narrow=space-evenly]",
42
+ ".Stack[data-justify=space-evenly]",
43
+ ".Stack[data-wrap-narrow=wrap]",
44
+ ".Stack[data-wrap=wrap]",
45
+ ".Stack[data-wrap-narrow=nowrap]",
46
+ ".Stack[data-wrap=nowrap]",
47
+ ".Stack[data-padding-regular=none]",
48
+ ".Stack[data-padding-regular=condensed]",
49
+ ".Stack[data-padding-regular=normal]",
50
+ ".Stack[data-padding-regular=spacious]",
51
+ ".Stack[data-direction-regular=horizontal]",
52
+ ".Stack[data-direction-regular=vertical]",
53
+ ".Stack[data-gap-regular=none]",
54
+ ".Stack[data-gap-regular=condensed]",
55
+ ".Stack[data-gap-regular=normal]",
56
+ ".Stack[data-gap-regular=spacious]",
57
+ ".Stack[data-align-regular=start]",
58
+ ".Stack[data-align-regular=center]",
59
+ ".Stack[data-align-regular=end]",
60
+ ".Stack[data-align-regular=baseline]",
61
+ ".Stack[data-justify-regular=start]",
62
+ ".Stack[data-justify-regular=center]",
63
+ ".Stack[data-justify-regular=end]",
64
+ ".Stack[data-justify-regular=space-between]",
65
+ ".Stack[data-justify-regular=space-evenly]",
66
+ ".Stack[data-wrap-regular=wrap]",
67
+ ".Stack[data-wrap-regular=nowrap]",
68
+ ".Stack[data-padding-wide=none]",
69
+ ".Stack[data-padding-wide=condensed]",
70
+ ".Stack[data-padding-wide=normal]",
71
+ ".Stack[data-padding-wide=spacious]",
72
+ ".Stack[data-direction-wide=horizontal]",
73
+ ".Stack[data-direction-wide=vertical]",
74
+ ".Stack[data-gap-wide=none]",
75
+ ".Stack[data-gap-wide=condensed]",
76
+ ".Stack[data-gap-wide=normal]",
77
+ ".Stack[data-gap-wide=spacious]",
78
+ ".Stack[data-align-wide=start]",
79
+ ".Stack[data-align-wide=center]",
80
+ ".Stack[data-align-wide=end]",
81
+ ".Stack[data-align-wide=baseline]",
82
+ ".Stack[data-justify-wide=start]",
83
+ ".Stack[data-justify-wide=center]",
84
+ ".Stack[data-justify-wide=end]",
85
+ ".Stack[data-justify-wide=space-between]",
86
+ ".Stack[data-justify-wide=space-evenly]",
87
+ ".Stack[data-wrap-wide=wrap]",
88
+ ".Stack[data-wrap-wide=nowrap]"
89
+ ]
90
+ }
@@ -0,0 +1 @@
1
+ .StackItem{flex:0 1 auto;min-inline-size:0}.StackItem[data-grow-narrow=true],.StackItem[data-grow=true]{flex-grow:1}@media (min-width:48rem){.StackItem[data-grow-regular=true]{flex-grow:1}.StackItem[data-grow-regular=false]{flex-grow:0}}@media (min-width:87.5rem){.StackItem[data-grow-wide=true]{flex-grow:1}.StackItem[data-grow-wide=false]{flex-grow:0}}
@@ -0,0 +1,12 @@
1
+ {
2
+ "name": "alpha/stack_item",
3
+ "selectors": [
4
+ ".StackItem",
5
+ ".StackItem[data-grow-narrow=true]",
6
+ ".StackItem[data-grow=true]",
7
+ ".StackItem[data-grow-regular=true]",
8
+ ".StackItem[data-grow-regular=false]",
9
+ ".StackItem[data-grow-wide=true]",
10
+ ".StackItem[data-grow-wide=false]"
11
+ ]
12
+ }
@@ -0,0 +1,44 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ /* eslint-disable custom-elements/expose-class-on-global */
8
+ import { controller, targets } from '@github/catalyst';
9
+ let PrimerMultiInputElement = class PrimerMultiInputElement extends HTMLElement {
10
+ activateField(name) {
11
+ const fieldWithName = this.findField(name);
12
+ if (!fieldWithName)
13
+ return;
14
+ for (const field of this.fields) {
15
+ if (field === fieldWithName)
16
+ continue;
17
+ field.setAttribute('disabled', 'disabled');
18
+ field.setAttribute('hidden', 'hidden');
19
+ field.parentElement?.setAttribute('hidden', 'hidden');
20
+ }
21
+ fieldWithName.removeAttribute('disabled');
22
+ fieldWithName.removeAttribute('hidden');
23
+ fieldWithName.parentElement?.removeAttribute('hidden');
24
+ }
25
+ findField(name) {
26
+ for (const field of this.fields) {
27
+ if (field.getAttribute('data-name') === name) {
28
+ return field;
29
+ }
30
+ }
31
+ return null;
32
+ }
33
+ };
34
+ __decorate([
35
+ targets
36
+ ], PrimerMultiInputElement.prototype, "fields", void 0);
37
+ PrimerMultiInputElement = __decorate([
38
+ controller
39
+ ], PrimerMultiInputElement);
40
+ export { PrimerMultiInputElement };
41
+ if (!window.customElements.get('primer-multi-input')) {
42
+ Object.assign(window, { PrimerMultiInputElement });
43
+ window.customElements.define('primer-multi-input', PrimerMultiInputElement);
44
+ }
@@ -0,0 +1,119 @@
1
+ /* eslint-disable custom-elements/expose-class-on-global */
2
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
3
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
4
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
5
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
6
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
7
+ };
8
+ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
9
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
10
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
11
+ return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
12
+ };
13
+ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
14
+ if (kind === "m") throw new TypeError("Private method is not writable");
15
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
16
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
17
+ return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
18
+ };
19
+ var _PrimerTextFieldElement_abortController;
20
+ import '@github/auto-check-element';
21
+ import { controller, target } from '@github/catalyst';
22
+ let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
23
+ constructor() {
24
+ super(...arguments);
25
+ _PrimerTextFieldElement_abortController.set(this, void 0);
26
+ }
27
+ connectedCallback() {
28
+ __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")?.abort();
29
+ const { signal } = (__classPrivateFieldSet(this, _PrimerTextFieldElement_abortController, new AbortController(), "f"));
30
+ this.addEventListener('auto-check-success', async (event) => {
31
+ const message = await event.detail.response.text();
32
+ if (message && message.length > 0) {
33
+ this.setSuccess(message);
34
+ }
35
+ else {
36
+ this.clearError();
37
+ }
38
+ }, { signal });
39
+ this.addEventListener('auto-check-error', async (event) => {
40
+ const errorMessage = await event.detail.response.text();
41
+ this.setError(errorMessage);
42
+ }, { signal });
43
+ }
44
+ disconnectedCallback() {
45
+ __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")?.abort();
46
+ }
47
+ clearContents() {
48
+ this.inputElement.value = '';
49
+ this.inputElement.focus();
50
+ this.inputElement.dispatchEvent(new Event('input', { bubbles: true, cancelable: false }));
51
+ }
52
+ clearError() {
53
+ this.inputElement.removeAttribute('invalid');
54
+ this.validationElement.hidden = true;
55
+ this.validationMessageElement.replaceChildren();
56
+ }
57
+ setValidationMessage(message) {
58
+ const template = document.createElement('template');
59
+ // eslint-disable-next-line github/no-inner-html
60
+ template.innerHTML = message;
61
+ const fragment = document.importNode(template.content, true);
62
+ this.validationMessageElement.replaceChildren(fragment);
63
+ }
64
+ toggleValidationStyling(isError) {
65
+ if (isError) {
66
+ this.validationElement.classList.remove('FormControl-inlineValidation--success');
67
+ }
68
+ else {
69
+ this.validationElement.classList.add('FormControl-inlineValidation--success');
70
+ }
71
+ this.validationSuccessIcon.hidden = isError;
72
+ this.validationErrorIcon.hidden = !isError;
73
+ this.inputElement.setAttribute('invalid', isError ? 'true' : 'false');
74
+ }
75
+ setSuccess(message) {
76
+ this.toggleValidationStyling(false);
77
+ this.setValidationMessage(message);
78
+ this.validationElement.hidden = false;
79
+ }
80
+ setError(message) {
81
+ this.toggleValidationStyling(true);
82
+ this.setValidationMessage(message);
83
+ this.validationElement.hidden = false;
84
+ }
85
+ showLeadingSpinner() {
86
+ this.leadingSpinner?.removeAttribute('hidden');
87
+ this.leadingVisual?.setAttribute('hidden', '');
88
+ }
89
+ hideLeadingSpinner() {
90
+ this.leadingSpinner?.setAttribute('hidden', '');
91
+ this.leadingVisual?.removeAttribute('hidden');
92
+ }
93
+ };
94
+ _PrimerTextFieldElement_abortController = new WeakMap();
95
+ __decorate([
96
+ target
97
+ ], PrimerTextFieldElement.prototype, "inputElement", void 0);
98
+ __decorate([
99
+ target
100
+ ], PrimerTextFieldElement.prototype, "validationElement", void 0);
101
+ __decorate([
102
+ target
103
+ ], PrimerTextFieldElement.prototype, "validationMessageElement", void 0);
104
+ __decorate([
105
+ target
106
+ ], PrimerTextFieldElement.prototype, "validationSuccessIcon", void 0);
107
+ __decorate([
108
+ target
109
+ ], PrimerTextFieldElement.prototype, "validationErrorIcon", void 0);
110
+ __decorate([
111
+ target
112
+ ], PrimerTextFieldElement.prototype, "leadingVisual", void 0);
113
+ __decorate([
114
+ target
115
+ ], PrimerTextFieldElement.prototype, "leadingSpinner", void 0);
116
+ PrimerTextFieldElement = __decorate([
117
+ controller
118
+ ], PrimerTextFieldElement);
119
+ export { PrimerTextFieldElement };
@@ -0,0 +1,34 @@
1
+ /* eslint-disable custom-elements/expose-class-on-global */
2
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
3
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
4
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
5
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
6
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
7
+ };
8
+ import { controller, target } from '@github/catalyst';
9
+ let ToggleSwitchInputElement = class ToggleSwitchInputElement extends HTMLElement {
10
+ connectedCallback() {
11
+ this.addEventListener('toggleSwitchError', (event) => {
12
+ this.validationMessageElement.textContent = event.detail;
13
+ this.validationElement.removeAttribute('hidden');
14
+ });
15
+ this.addEventListener('toggleSwitchSuccess', () => {
16
+ this.validationMessageElement.textContent = '';
17
+ this.validationElement.setAttribute('hidden', 'hidden');
18
+ });
19
+ this.addEventListener('toggleSwitchLoading', () => {
20
+ this.validationMessageElement.textContent = '';
21
+ this.validationElement.setAttribute('hidden', 'hidden');
22
+ });
23
+ }
24
+ };
25
+ __decorate([
26
+ target
27
+ ], ToggleSwitchInputElement.prototype, "validationElement", void 0);
28
+ __decorate([
29
+ target
30
+ ], ToggleSwitchInputElement.prototype, "validationMessageElement", void 0);
31
+ ToggleSwitchInputElement = __decorate([
32
+ controller
33
+ ], ToggleSwitchInputElement);
34
+ export { ToggleSwitchInputElement };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/view-components",
3
- "version": "0.35.0-rc.190fca91",
3
+ "version": "0.35.0-rc.2fec3c39",
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",
@@ -26,8 +26,8 @@
26
26
  "app/components/primer/**/*.css",
27
27
  "app/components/primer/**/*.css.json",
28
28
  "app/components/primer/**/*.d.ts",
29
- "lib/primer/forms/**/*.js",
30
- "lib/primer/forms/**/*.d.ts"
29
+ "app/lib/primer/forms/**/*.js",
30
+ "app/lib/primer/forms/**/*.d.ts"
31
31
  ],
32
32
  "scripts": {
33
33
  "clean": "git clean -fdX -- app/",
@@ -2510,6 +2510,92 @@
2510
2510
  }
2511
2511
  ]
2512
2512
  },
2513
+ {
2514
+ "component": "Stack",
2515
+ "status": "alpha",
2516
+ "a11y_reviewed": false,
2517
+ "short_name": "Stack",
2518
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/stack.rb",
2519
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/stack/default/",
2520
+ "parameters": [
2521
+ {
2522
+ "name": "tag",
2523
+ "type": "Symbol",
2524
+ "default": "`:div`",
2525
+ "description": "Customize the element type of the rendered container."
2526
+ },
2527
+ {
2528
+ "name": "gap",
2529
+ "type": "Symbol",
2530
+ "default": "`GapArg::DEFAULT`",
2531
+ "description": "Specify the gap between children elements in the stack. One of `nil`, `:condensed`, `:normal`, or `:spacious`."
2532
+ },
2533
+ {
2534
+ "name": "direction",
2535
+ "type": "Symbol",
2536
+ "default": "`:vertical`",
2537
+ "description": "Specify the direction for the stack container. One of `nil`, `:horizontal`, or `:vertical`."
2538
+ },
2539
+ {
2540
+ "name": "align",
2541
+ "type": "Symbol",
2542
+ "default": "`:stretch`",
2543
+ "description": "Specify the alignment between items in the cross-axis of the direction. One of `nil`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`."
2544
+ },
2545
+ {
2546
+ "name": "wrap",
2547
+ "type": "Symbol",
2548
+ "default": "`:nowrap`",
2549
+ "description": "Specify whether items are forced onto one line or can wrap onto multiple lines. One of `nil`, `:nowrap`, or `:wrap`."
2550
+ },
2551
+ {
2552
+ "name": "justify",
2553
+ "type": "Symbol",
2554
+ "default": "`:start`",
2555
+ "description": "Specify how items will be distributed in the stacking direction. One of `nil`, `:center`, `:end`, `:space_between`, `:space_evenly`, or `:start`."
2556
+ },
2557
+ {
2558
+ "name": "padding",
2559
+ "type": "Symbol",
2560
+ "default": "`:none`",
2561
+ "description": "Specify the padding of the stack container. One of `nil`, `:condensed`, `:none`, `:normal`, or `:spacious`."
2562
+ },
2563
+ {
2564
+ "name": "system_arguments",
2565
+ "type": "Hash",
2566
+ "default": "N/A",
2567
+ "description": "[System arguments](/system-arguments)"
2568
+ }
2569
+ ]
2570
+ },
2571
+ {
2572
+ "component": "StackItem",
2573
+ "status": "alpha",
2574
+ "a11y_reviewed": false,
2575
+ "short_name": "StackItem",
2576
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/stack_item.rb",
2577
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/stack_item/default/",
2578
+ "parameters": [
2579
+ {
2580
+ "name": "tag",
2581
+ "type": "Symbol",
2582
+ "default": "`:div`",
2583
+ "description": "Customize the element type of the rendered container."
2584
+ },
2585
+ {
2586
+ "name": "grow",
2587
+ "type": "Boolean",
2588
+ "default": "`false`",
2589
+ "description": "Allow item to keep size or expand to fill the available space."
2590
+ },
2591
+ {
2592
+ "name": "system_arguments",
2593
+ "type": "Hash",
2594
+ "default": "N/A",
2595
+ "description": "[System arguments](/system-arguments)"
2596
+ }
2597
+ ]
2598
+ },
2513
2599
  {
2514
2600
  "component": "SubmitButton",
2515
2601
  "status": "alpha",
@@ -54,6 +54,8 @@
54
54
  "Primer::Alpha::Select": "",
55
55
  "Primer::Alpha::SelectPanel": "",
56
56
  "Primer::Alpha::SelectPanel::ItemList": "2023-07-10",
57
+ "Primer::Alpha::Stack": "",
58
+ "Primer::Alpha::StackItem": "",
57
59
  "Primer::Alpha::SubmitButton": "",
58
60
  "Primer::Alpha::TabContainer": "",
59
61
  "Primer::Alpha::TabNav": "",
@@ -501,6 +501,12 @@
501
501
  "SelectPanel-loadingPanel": [
502
502
  "Primer::Alpha::SelectPanel"
503
503
  ],
504
+ "Stack": [
505
+ "Primer::Alpha::Stack"
506
+ ],
507
+ "StackItem": [
508
+ "Primer::Alpha::StackItem"
509
+ ],
504
510
  "State": [
505
511
  "Primer::Beta::State"
506
512
  ],
@@ -621,6 +621,30 @@
621
621
  },
622
622
  "Primer::Alpha::SelectPanel::ItemList": {
623
623
  },
624
+ "Primer::Alpha::Stack": {
625
+ "ARG_CLASSES": [
626
+ "Primer::Alpha::Stack::JustifyArg",
627
+ "Primer::Alpha::Stack::DirectionArg",
628
+ "Primer::Alpha::Stack::AlignArg",
629
+ "Primer::Alpha::Stack::WrapArg",
630
+ "Primer::Alpha::Stack::PaddingArg",
631
+ "Primer::Alpha::Stack::GapArg"
632
+ ],
633
+ "AlignArg": "Primer::Alpha::Stack::AlignArg",
634
+ "DEFAULT_TAG": "div",
635
+ "DirectionArg": "Primer::Alpha::Stack::DirectionArg",
636
+ "GapArg": "Primer::Alpha::Stack::GapArg",
637
+ "JustifyArg": "Primer::Alpha::Stack::JustifyArg",
638
+ "PaddingArg": "Primer::Alpha::Stack::PaddingArg",
639
+ "WrapArg": "Primer::Alpha::Stack::WrapArg"
640
+ },
641
+ "Primer::Alpha::StackItem": {
642
+ "ARG_CLASSES": [
643
+ "Primer::Alpha::StackItem::GrowArg"
644
+ ],
645
+ "DEFAULT_TAG": "div",
646
+ "GrowArg": "Primer::Alpha::StackItem::GrowArg"
647
+ },
624
648
  "Primer::Alpha::SubmitButton": {
625
649
  },
626
650
  "Primer::Alpha::TabContainer": {