@openproject/primer-view-components 0.0.0-20230808124600

package/app/components/primer/beta/flash.css

@@ -0,0 +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,6px);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:calc(var(--control-medium-paddingInline-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-spacious,1rem);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/app/components/primer/beta/flash.css.json

@@ -0,0 +1,27 @@
+{
+  "name": "beta/flash",
+  "selectors": [
+    ".flash:not(.Banner)",
+    ".flash:not(.Banner) .octicon",
+    ".flash:not(.Banner) p:last-child",
+    ".flash-messages",
+    ".flash-close:not(.Banner-close)",
+    ".flash-close:not(.Banner-close):hover",
+    ".flash-close:not(.Banner-close):active",
+    ".flash-close:not(.Banner-close) .octicon",
+    ".flash-action:not(.Banner-actions)",
+    ".flash-action.btn:not(.Banner-actions) .octicon",
+    ".flash-action.btn-primary:not(.Banner-actions)",
+    ".flash-action.btn-primary:not(.Banner-actions) .octicon",
+    ".flash-warn:not(.Banner)",
+    ".flash-warn:not(.Banner) .octicon",
+    ".flash-error:not(.Banner)",
+    ".flash-error:not(.Banner) .octicon",
+    ".flash-success:not(.Banner)",
+    ".flash-success:not(.Banner) .octicon",
+    ".flash-full:not(.Banner)",
+    ".flash-banner",
+    ".flash-full",
+    ".warning"
+  ]
+}

package/app/components/primer/beta/label.css

@@ -0,0 +1 @@
+.labels{position:relative}.Label,.label{border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:2em;display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:18px;padding:0 7px;white-space:nowrap}.Label:hover,.label:hover{text-decoration:none}.Label--large{line-height:22px;padding-left:10px;padding-right:10px}.Label--inline{display:inline;font-size:85%;padding:.12em .5em}.Label--primary{border-color:var(--borderColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-default,var(--color-fg-default))}.Label--secondary{border-color:var(--borderColor-default,var(--color-border-default));color:var(--fgColor-muted,var(--color-fg-muted))}.Label--accent,.Label--info{border-color:var(--borderColor-accent-emphasis,var(--color-accent-fg));color:var(--fgColor-accent,var(--color-accent-fg))}.Label--success{border-color:var(--borderColor-success-emphasis,var(--color-success-emphasis));color:var(--fgColor-success,var(--color-success-fg))}.Label--attention,.Label--warning{border-color:var(--borderColor-attention-emphasis,var(--color-attention-emphasis));color:var(--fgColor-attention,var(--color-attention-fg))}.Label--severe{border-color:var(--borderColor-severe-emphasis,var(--color-severe-emphasis));color:var(--fgColor-severe,var(--color-severe-fg))}.Label--danger{border-color:var(--borderColor-danger-emphasis,var(--color-danger-emphasis));color:var(--fgColor-danger,var(--color-danger-fg))}.Label--open{border-color:var(--borderColor-open-emphasis,var(--color-open-emphasis));color:var(--fgColor-open,var(--color-open-fg))}.Label--closed{border-color:var(--borderColor-closed-emphasis,var(--color-closed-emphasis));color:var(--fgColor-closed,var(--color-closed-fg))}.Label--done{border-color:var(--borderColor-done-emphasis,var(--color-done-emphasis));color:var(--fgColor-done,var(--color-done-fg))}.Label--sponsors{border-color:var(--borderColor-sponsors-emphasis,var(--color-sponsors-emphasis));color:var(--fgColor-sponsors,var(--color-sponsors-fg))}

package/app/components/primer/beta/label.css.json

@@ -0,0 +1,25 @@
+{
+  "name": "beta/label",
+  "selectors": [
+    ".labels",
+    ".Label",
+    ".label",
+    ".Label:hover",
+    ".label:hover",
+    ".Label--large",
+    ".Label--inline",
+    ".Label--primary",
+    ".Label--secondary",
+    ".Label--accent",
+    ".Label--info",
+    ".Label--success",
+    ".Label--attention",
+    ".Label--warning",
+    ".Label--severe",
+    ".Label--danger",
+    ".Label--open",
+    ".Label--closed",
+    ".Label--done",
+    ".Label--sponsors"
+  ]
+}

package/app/components/primer/beta/link.css

@@ -0,0 +1 @@
+.Link{color:var(--fgColor-accent,var(--color-accent-fg))}.Link:hover{cursor:pointer}.Link:focus,.Link:hover{text-decoration:underline}.Link:focus,.Link:focus-visible{outline-offset:0}.Link--primary{color:var(--fgColor-default,var(--color-fg-default))!important}.Link--primary:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--secondary{color:var(--fgColor-muted,var(--color-fg-muted))!important}.Link--secondary:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--muted{color:var(--fgColor-muted,var(--color-fg-muted))!important}.Link--muted:hover{text-decoration:none}.Link--muted:hover,.Link--onHover:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--onHover:hover{cursor:pointer;text-decoration:underline}.Link--muted:hover [class*=color-fg],.Link--primary:hover [class*=color-fg],.Link--secondary:hover [class*=color-fg]{color:inherit!important}

package/app/components/primer/beta/link.css.json

@@ -0,0 +1,19 @@
+{
+  "name": "beta/link",
+  "selectors": [
+    ".Link",
+    ".Link:hover",
+    ".Link:focus",
+    ".Link:focus-visible",
+    ".Link--primary",
+    ".Link--primary:hover",
+    ".Link--secondary",
+    ".Link--secondary:hover",
+    ".Link--muted",
+    ".Link--muted:hover",
+    ".Link--onHover:hover",
+    ".Link--muted:hover [class*=color-fg]",
+    ".Link--primary:hover [class*=color-fg]",
+    ".Link--secondary:hover [class*=color-fg]"
+  ]
+}

package/app/components/primer/beta/popover.css

@@ -0,0 +1 @@
+.Popover{position:absolute;z-index:100}.Popover-message{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,6px);margin-left:auto;margin-right:auto;position:relative;width:232px}.Popover-message:after,.Popover-message:before{content:"";display:inline-block;left:50%;position:absolute}.Popover-message:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default,var(--color-border-default));margin-left:-9px;top:-16px}.Popover-message:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor,var(--color-canvas-overlay));margin-left:-8px;top:-14px}.Popover-message--no-caret:after,.Popover-message--no-caret:before{display:none}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--bottom:after,.Popover-message--bottom:before{border-bottom-color:#0000;top:auto}.Popover-message--bottom-left:before,.Popover-message--bottom-right:before,.Popover-message--bottom:before{border-top-color:var(--borderColor-default,var(--color-border-default));bottom:-16px}.Popover-message--bottom-left:after,.Popover-message--bottom-right:after,.Popover-message--bottom:after{border-top-color:var(--overlay-bgColor,var(--color-canvas-overlay));bottom:-14px}.Popover-message--bottom-right,.Popover-message--top-right{margin-right:0;right:-9px}.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--top-right:after,.Popover-message--top-right:before{left:auto;margin-left:0}.Popover-message--bottom-right:before,.Popover-message--top-right:before{right:20px}.Popover-message--bottom-right:after,.Popover-message--top-right:after{right:21px}.Popover-message--bottom-left,.Popover-message--top-left{left:-9px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--top-left:after,.Popover-message--top-left:before{left:24px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--top-left:after{left:25px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--left:after,.Popover-message--left:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before,.Popover-message--right-top:after,.Popover-message--right-top:before,.Popover-message--right:after,.Popover-message--right:before{border-bottom-color:#0000;left:auto;margin-left:0;top:50%}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before,.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{margin-top:-9px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after,.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{margin-top:-8px}.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{border-left-color:var(--borderColor-default,var(--color-border-default));right:-16px}.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{border-left-color:var(--overlay-bgColor,var(--color-canvas-overlay));right:-14px}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before{border-right-color:var(--borderColor-default,var(--color-border-default));left:-16px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after{border-right-color:var(--overlay-bgColor,var(--color-canvas-overlay));left:-14px}.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--right-top:after,.Popover-message--right-top:before{top:24px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before{top:auto}.Popover-message--left-bottom:before,.Popover-message--right-bottom:before{bottom:16px}.Popover-message--left-bottom:after,.Popover-message--right-bottom:after{bottom:17px}@media (min-width:544px){.Popover-message--large{min-width:320px}}@media (max-width:767.98px){.Popover{bottom:0!important;left:0!important;position:fixed;right:0!important;top:auto!important}.Popover-message{bottom:auto;left:auto;margin:var(--stack-gap-condensed,.5rem);right:auto;top:auto;width:auto!important}.Popover-message>.btn-octicon{padding:var(--control-medium-paddingInline-normal,.75rem)!important}.Popover-message:after,.Popover-message:before{display:none}}

package/app/components/primer/beta/popover.css.json

@@ -0,0 +1,39 @@
+{
+  "name": "beta/popover",
+  "selectors": [
+    ".Popover",
+    ".Popover-message",
+    ".Popover-message:after",
+    ".Popover-message:before",
+    ".Popover-message--no-caret:after",
+    ".Popover-message--no-caret:before",
+    ".Popover-message--bottom-left:after",
+    ".Popover-message--bottom-left:before",
+    ".Popover-message--bottom-right:after",
+    ".Popover-message--bottom-right:before",
+    ".Popover-message--bottom:after",
+    ".Popover-message--bottom:before",
+    ".Popover-message--bottom-right",
+    ".Popover-message--top-right",
+    ".Popover-message--top-right:after",
+    ".Popover-message--top-right:before",
+    ".Popover-message--bottom-left",
+    ".Popover-message--top-left",
+    ".Popover-message--top-left:after",
+    ".Popover-message--top-left:before",
+    ".Popover-message--left-bottom:after",
+    ".Popover-message--left-bottom:before",
+    ".Popover-message--left-top:after",
+    ".Popover-message--left-top:before",
+    ".Popover-message--left:after",
+    ".Popover-message--left:before",
+    ".Popover-message--right-bottom:after",
+    ".Popover-message--right-bottom:before",
+    ".Popover-message--right-top:after",
+    ".Popover-message--right-top:before",
+    ".Popover-message--right:after",
+    ".Popover-message--right:before",
+    ".Popover-message--large",
+    ".Popover-message>.btn-octicon"
+  ]
+}

package/app/components/primer/beta/progress_bar.css

@@ -0,0 +1 @@
+.Progress{background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle));border-radius:6px;display:flex;height:8px;outline:1px solid #0000;overflow:hidden}.Progress--large{height:10px}.Progress--small{height:5px}.Progress-item{outline:2px solid #0000}.Progress-item+.Progress-item{margin-left:2px}

package/app/components/primer/beta/progress_bar.css.json

@@ -0,0 +1,10 @@
+{
+  "name": "beta/progress_bar",
+  "selectors": [
+    ".Progress",
+    ".Progress--large",
+    ".Progress--small",
+    ".Progress-item",
+    ".Progress-item+.Progress-item"
+  ]
+}

package/app/components/primer/beta/relative_time.d.ts

@@ -0,0 +1 @@
+import '@github/relative-time-element';

package/app/components/primer/beta/relative_time.js

@@ -0,0 +1 @@
+import '@github/relative-time-element';

package/app/components/primer/beta/state.css

@@ -0,0 +1 @@
+.State,.state{border-radius:2em;display:inline-block;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);line-height:var(--control-medium-lineBoxHeight,1.25rem);padding:5px var(--control-medium-paddingInline-normal,.75rem);text-align:center;white-space:nowrap}.State,.State--draft,.state{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000}.State,.State--draft,.State--open,.state{color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.State--open{background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis))}.State--merged{background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis))}.State--closed,.State--merged{color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.State--closed{background-color:var(--bgColor-closed-emphasis,var(--color-closed-emphasis))}.State--small{font-size:var(--text-body-size-small,.75rem);line-height:var(--base-size-24,1.5rem);padding:0 10px}.State--small .octicon{width:1em}

package/app/components/primer/beta/state.css.json

@@ -0,0 +1,13 @@
+{
+  "name": "beta/state",
+  "selectors": [
+    ".State",
+    ".state",
+    ".State--draft",
+    ".State--open",
+    ".State--merged",
+    ".State--closed",
+    ".State--small",
+    ".State--small .octicon"
+  ]
+}

package/app/components/primer/beta/subhead.css

@@ -0,0 +1 @@
+.Subhead{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:row wrap;justify-content:flex-end;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}.Subhead--spacious{margin-top:var(--base-size-40,2.5rem)}.Subhead-heading{flex:1 1 auto;font-size:24px;font-weight:var(--base-text-weight-normal,400);order:0}.Subhead-heading--danger{color:var(--fgColor-danger,var(--color-danger-fg));font-weight:var(--base-text-weight-semibold,600)}.Subhead-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem);order:2}.Subhead-actions{align-self:center;justify-content:flex-end;margin:var(--base-size-4,.25rem) 0 var(--base-size-4,.25rem) var(--base-size-4,.25rem);order:1}.Subhead-actions+.Subhead-description{margin-top:var(--base-size-4,.25rem)}

package/app/components/primer/beta/subhead.css.json

@@ -0,0 +1,12 @@
+{
+  "name": "beta/subhead",
+  "selectors": [
+    ".Subhead",
+    ".Subhead--spacious",
+    ".Subhead-heading",
+    ".Subhead-heading--danger",
+    ".Subhead-description",
+    ".Subhead-actions",
+    ".Subhead-actions+.Subhead-description"
+  ]
+}

package/app/components/primer/beta/timeline_item.css

@@ -0,0 +1 @@
+.TimelineItem{display:flex;margin-left:var(--stack-gap-normal,1rem);padding:var(--stack-padding-normal,1rem) 0;position:relative}.TimelineItem:before{background-color:var(--borderColor-muted,var(--color-border-muted));bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:var(--borderWidth-thick,max(2px,.125rem))}.TimelineItem:target .TimelineItem-badge{border-color:var(--borderColor-accent-emphasis,var(--color-accent-fg));box-shadow:0 0 .2em var(--borderColor-accent-muted,var(--color-accent-muted))}.TimelineItem-badge{align-items:center;background-color:var(--timelineBadge-bgColor,var(--color-timeline-badge-bg));border:var(--borderWidth-thick,max(2px,.125rem)) solid var(--bgColor-default,var(--color-canvas-default));border-radius:50%;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;flex-shrink:0;height:var(--control-medium-size,2rem);justify-content:center;margin-left:calc(var(--control-medium-size,2rem)/-2 + 1px);margin-right:var(--controlStack-medium-gap-condensed,.5rem);position:relative;width:var(--control-medium-size,2rem);z-index:1}.TimelineItem-badge--success{background-color:var(--bgColor-success-emphasis,var(--color-success-fg));border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.TimelineItem-body{color:var(--fgColor-muted,var(--color-fg-muted));flex:auto;margin-top:var(--base-size-4,.25rem);max-width:100%;min-width:0}.TimelineItem-avatar{left:-72px;position:absolute;z-index:1}.TimelineItem-break{background-color:var(--bgColor-default,var(--color-canvas-default));border:0;border-top:var(--borderWidth-thicker,max(4px,.25rem)) solid var(--borderColor-default,var(--color-border-default));height:var(--stack-gap-spacious,1.5rem);margin:0;margin-bottom:calc(var(--stack-gap-normal,1rem)*-1);margin-left:-56px;position:relative;z-index:1}.TimelineItem--condensed{padding-bottom:0;padding-top:var(--base-size-4,.25rem)}.TimelineItem--condensed:last-child{padding-bottom:var(--stack-gap-normal,1rem)}.TimelineItem--condensed .TimelineItem-badge{background-color:var(--bgColor-default,var(--color-canvas-default));border:0;color:var(--fgColor-muted,var(--color-fg-muted));height:var(--base-size-16,1rem);margin-bottom:var(--base-size-8,.5rem);margin-top:var(--base-size-8,.5rem)}

package/app/components/primer/beta/timeline_item.css.json

@@ -0,0 +1,16 @@
+{
+  "name": "beta/timeline_item",
+  "selectors": [
+    ".TimelineItem",
+    ".TimelineItem:before",
+    ".TimelineItem:target .TimelineItem-badge",
+    ".TimelineItem-badge",
+    ".TimelineItem-badge--success",
+    ".TimelineItem-body",
+    ".TimelineItem-avatar",
+    ".TimelineItem-break",
+    ".TimelineItem--condensed",
+    ".TimelineItem--condensed:last-child",
+    ".TimelineItem--condensed .TimelineItem-badge"
+  ]
+}

package/app/components/primer/beta/truncate.css

@@ -0,0 +1 @@
+.Truncate{display:inline-flex;max-width:100%;min-width:0}.Truncate>.Truncate-text{max-width:-moz-fit-content;max-width:fit-content;min-width:1ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Truncate>.Truncate-text+.Truncate-text{margin-left:var(--control-small-gap,.25rem)}.Truncate>.Truncate-text.Truncate-text--primary{flex-basis:200%}.Truncate>.Truncate-text.Truncate-text--expandable:active,.Truncate>.Truncate-text.Truncate-text--expandable:focus,.Truncate>.Truncate-text.Truncate-text--expandable:hover{cursor:pointer;flex-shrink:0;max-width:100%!important}

package/app/components/primer/beta/truncate.css.json

@@ -0,0 +1,12 @@
+{
+  "name": "beta/truncate",
+  "selectors": [
+    ".Truncate",
+    ".Truncate>.Truncate-text",
+    ".Truncate>.Truncate-text+.Truncate-text",
+    ".Truncate>.Truncate-text.Truncate-text--primary",
+    ".Truncate>.Truncate-text.Truncate-text--expandable:active",
+    ".Truncate>.Truncate-text.Truncate-text--expandable:focus",
+    ".Truncate>.Truncate-text.Truncate-text--expandable:hover"
+  ]
+}

package/app/components/primer/focus_group.d.ts

@@ -0,0 +1,19 @@
+import '@oddbird/popover-polyfill';
+export default class FocusGroupElement extends HTMLElement {
+    #private;
+    get nowrap(): boolean;
+    set nowrap(value: boolean);
+    get direction(): 'horizontal' | 'vertical' | 'both';
+    set direction(value: 'horizontal' | 'vertical' | 'both');
+    get retain(): boolean;
+    set retain(value: boolean);
+    get mnemonics(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): void;
+}
+declare global {
+    interface Window {
+        FocusGroupElement: typeof FocusGroupElement;
+    }
+}

package/app/components/primer/focus_group.js

@@ -0,0 +1,139 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    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");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    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");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _FocusGroupElement_instances, _FocusGroupElement_abortController, _FocusGroupElement_items_get;
+import '@oddbird/popover-polyfill';
+const menuItemSelector = '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]';
+const getMnemonicFor = (item) => { var _a; return (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()[0].toLowerCase(); };
+const printable = /^\S$/;
+export default class FocusGroupElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _FocusGroupElement_instances.add(this);
+        _FocusGroupElement_abortController.set(this, null);
+    }
+    get nowrap() {
+        return this.hasAttribute('nowrap');
+    }
+    set nowrap(value) {
+        this.toggleAttribute('nowrap', value);
+    }
+    get direction() {
+        if (this.getAttribute('direction') === 'horizontal')
+            return 'horizontal';
+        return 'vertical';
+    }
+    set direction(value) {
+        this.setAttribute('direction', `${value}`);
+    }
+    get retain() {
+        return this.hasAttribute('retain');
+    }
+    set retain(value) {
+        this.toggleAttribute('retain', value);
+    }
+    get mnemonics() {
+        return this.hasAttribute('mnemonics');
+    }
+    connectedCallback() {
+        __classPrivateFieldSet(this, _FocusGroupElement_abortController, new AbortController(), "f");
+        const { signal } = __classPrivateFieldGet(this, _FocusGroupElement_abortController, "f");
+        this.addEventListener('keydown', this, { signal });
+        this.addEventListener('click', this, { signal });
+        this.addEventListener('mouseover', this, { signal });
+        this.addEventListener('focusin', this, { signal });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = __classPrivateFieldGet(this, _FocusGroupElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+    }
+    handleEvent(event) {
+        const { direction, nowrap } = this;
+        if (event.type === 'focusin') {
+            if (this.retain && event.target instanceof Element && event.target.matches(menuItemSelector)) {
+                for (const item of __classPrivateFieldGet(this, _FocusGroupElement_instances, "a", _FocusGroupElement_items_get)) {
+                    item.setAttribute('tabindex', item === event.target ? '0' : '-1');
+                }
+            }
+        }
+        else if (event instanceof KeyboardEvent) {
+            const items = Array.from(__classPrivateFieldGet(this, _FocusGroupElement_instances, "a", _FocusGroupElement_items_get));
+            let index = items.indexOf(event.target);
+            const key = event.key;
+            if (key === 'Up' || key === 'ArrowUp') {
+                if (direction === 'vertical' || direction === 'both') {
+                    index -= index < 0 ? 0 : 1;
+                    event.preventDefault();
+                }
+            }
+            else if (key === 'Down' || key === 'ArrowDown') {
+                if (direction === 'vertical' || direction === 'both') {
+                    index += 1;
+                    event.preventDefault();
+                }
+            }
+            else if (event.key === 'Left' || event.key === 'ArrowLeft') {
+                if (direction === 'horizontal' || direction === 'both') {
+                    index -= 1;
+                    event.preventDefault();
+                }
+            }
+            else if (event.key === 'Right' || event.key === 'ArrowRight') {
+                if (direction === 'horizontal' || direction === 'both') {
+                    index += 1;
+                    event.preventDefault();
+                }
+            }
+            else if (event.key === 'Home' || event.key === 'PageUp') {
+                index = 0;
+                event.preventDefault();
+            }
+            else if (event.key === 'End' || event.key === 'PageDown') {
+                index = items.length - 1;
+                event.preventDefault();
+            }
+            else if (this.mnemonics && printable.test(key)) {
+                const mnemonic = key.toLowerCase();
+                const offset = index > 0 && getMnemonicFor(event.target) === mnemonic ? index : 0;
+                index = items.findIndex((item, i) => i > offset && getMnemonicFor(item) === mnemonic);
+                if (index < 0 && !nowrap) {
+                    index = items.findIndex(item => getMnemonicFor(item) === mnemonic);
+                }
+            }
+            else {
+                return;
+            }
+            if (nowrap && index < 0)
+                index = 0;
+            if (!nowrap && index >= items.length)
+                index = 0;
+            const focusEl = items.at(Math.min(index, items.length - 1));
+            {
+                let el = focusEl;
+                do {
+                    el = el.closest(`[popover]:not(:popover-open)`);
+                    if ((el === null || el === void 0 ? void 0 : el.popover) === 'auto') {
+                        el.showPopover();
+                    }
+                    el = (el === null || el === void 0 ? void 0 : el.parentElement) || null;
+                } while (el);
+            }
+            focusEl === null || focusEl === void 0 ? void 0 : focusEl.focus();
+        }
+    }
+}
+_FocusGroupElement_abortController = new WeakMap(), _FocusGroupElement_instances = new WeakSet(), _FocusGroupElement_items_get = function _FocusGroupElement_items_get() {
+    return this.querySelectorAll(menuItemSelector);
+};
+if (!customElements.get('focus-group')) {
+    window.FocusGroupElement = FocusGroupElement;
+    customElements.define('focus-group', FocusGroupElement);
+}

package/app/components/primer/primer.d.ts

@@ -0,0 +1,21 @@
+import '@github/include-fragment-element';
+import '@oddbird/popover-polyfill';
+import './alpha/action_bar_element';
+import './alpha/dropdown';
+import './anchored_position';
+import './focus_group';
+import './alpha/image_crop';
+import './alpha/modal_dialog';
+import './alpha/nav_list';
+import './alpha/segmented_control';
+import './alpha/toggle_switch';
+import './alpha/tool_tip';
+import './alpha/x_banner';
+import './beta/auto_complete/auto_complete';
+import './beta/clipboard_copy';
+import './beta/relative_time';
+import './alpha/tab_container';
+import '../../../lib/primer/forms/primer_multi_input';
+import '../../../lib/primer/forms/primer_text_field';
+import '../../../lib/primer/forms/toggle_switch_input';
+import './alpha/action_menu/action_menu_element';

package/app/components/primer/primer.js

@@ -0,0 +1,21 @@
+import '@github/include-fragment-element';
+import '@oddbird/popover-polyfill';
+import './alpha/action_bar_element';
+import './alpha/dropdown';
+import './anchored_position';
+import './focus_group';
+import './alpha/image_crop';
+import './alpha/modal_dialog';
+import './alpha/nav_list';
+import './alpha/segmented_control';
+import './alpha/toggle_switch';
+import './alpha/tool_tip';
+import './alpha/x_banner';
+import './beta/auto_complete/auto_complete';
+import './beta/clipboard_copy';
+import './beta/relative_time';
+import './alpha/tab_container';
+import '../../../lib/primer/forms/primer_multi_input';
+import '../../../lib/primer/forms/primer_text_field';
+import '../../../lib/primer/forms/toggle_switch_input';
+import './alpha/action_menu/action_menu_element';

package/app/components/primer/truncate.css

@@ -0,0 +1 @@
+.css-truncate .css-truncate-overflow,.css-truncate .css-truncate-target,.css-truncate.css-truncate-overflow,.css-truncate.css-truncate-target{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.css-truncate .css-truncate-target,.css-truncate.css-truncate-target{display:inline-block;max-width:125px;vertical-align:top}.css-truncate.expandable.css-truncate-target:hover,.css-truncate.expandable.zeroclipboard-is-hover .css-truncate-target,.css-truncate.expandable.zeroclipboard-is-hover.css-truncate-target,.css-truncate.expandable:hover .css-truncate-target{max-width:10000px!important}

package/app/components/primer/truncate.css.json

@@ -0,0 +1,13 @@
+{
+  "name": "truncate",
+  "selectors": [
+    ".css-truncate .css-truncate-overflow",
+    ".css-truncate .css-truncate-target",
+    ".css-truncate.css-truncate-overflow",
+    ".css-truncate.css-truncate-target",
+    ".css-truncate.expandable.css-truncate-target:hover",
+    ".css-truncate.expandable.zeroclipboard-is-hover .css-truncate-target",
+    ".css-truncate.expandable.zeroclipboard-is-hover.css-truncate-target",
+    ".css-truncate.expandable:hover .css-truncate-target"
+  ]
+}

package/lib/primer/forms/primer_multi_input.d.ts

@@ -0,0 +1,10 @@
+export declare class PrimerMultiInputElement extends HTMLElement {
+    fields: HTMLInputElement[];
+    activateField(name: string): void;
+    private findField;
+}
+declare global {
+    interface Window {
+        PrimerMultiInputElement: typeof PrimerMultiInputElement;
+    }
+}

package/lib/primer/forms/primer_multi_input.js

@@ -0,0 +1,45 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/* eslint-disable custom-elements/expose-class-on-global */
+import { controller, targets } from '@github/catalyst';
+let PrimerMultiInputElement = class PrimerMultiInputElement extends HTMLElement {
+    activateField(name) {
+        var _a, _b;
+        const fieldWithName = this.findField(name);
+        if (!fieldWithName)
+            return;
+        for (const field of this.fields) {
+            if (field === fieldWithName)
+                continue;
+            field.setAttribute('disabled', 'disabled');
+            field.setAttribute('hidden', 'hidden');
+            (_a = field.parentElement) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', 'hidden');
+        }
+        fieldWithName.removeAttribute('disabled');
+        fieldWithName.removeAttribute('hidden');
+        (_b = fieldWithName.parentElement) === null || _b === void 0 ? void 0 : _b.removeAttribute('hidden');
+    }
+    findField(name) {
+        for (const field of this.fields) {
+            if (field.getAttribute('data-name') === name) {
+                return field;
+            }
+        }
+        return null;
+    }
+};
+__decorate([
+    targets
+], PrimerMultiInputElement.prototype, "fields", void 0);
+PrimerMultiInputElement = __decorate([
+    controller
+], PrimerMultiInputElement);
+export { PrimerMultiInputElement };
+if (!window.customElements.get('primer-multi-input')) {
+    Object.assign(window, { PrimerMultiInputElement });
+    window.customElements.define('primer-multi-input', PrimerMultiInputElement);
+}

package/lib/primer/forms/primer_text_field.d.ts

@@ -0,0 +1 @@
+import '@github/auto-check-element';

package/lib/primer/forms/primer_text_field.js

@@ -0,0 +1,73 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    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");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    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");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _PrimerTextFieldElement_abortController;
+import '@github/auto-check-element';
+import { controller, target } from '@github/catalyst';
+// eslint-disable-next-line custom-elements/expose-class-on-global
+let PrimerTextFieldElement = 
+// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+class PrimerTextFieldElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _PrimerTextFieldElement_abortController.set(this, void 0);
+    }
+    connectedCallback() {
+        var _a;
+        (_a = __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        const { signal } = (__classPrivateFieldSet(this, _PrimerTextFieldElement_abortController, new AbortController(), "f"));
+        this.inputElement.addEventListener('auto-check-success', () => {
+            this.clearError();
+        }, { signal });
+        this.inputElement.addEventListener('auto-check-error', async (event) => {
+            const errorMessage = await event.detail.response.text();
+            this.setError(errorMessage);
+        }, { signal });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+    }
+    clearContents() {
+        this.inputElement.value = '';
+        this.inputElement.focus();
+    }
+    clearError() {
+        this.inputElement.removeAttribute('invalid');
+        this.validationElement.hidden = true;
+        this.validationMessageElement.textContent = '';
+    }
+    setError(message) {
+        this.validationMessageElement.textContent = message;
+        this.validationElement.hidden = false;
+        this.inputElement.setAttribute('invalid', 'true');
+    }
+};
+_PrimerTextFieldElement_abortController = new WeakMap();
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "inputElement", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "validationElement", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "validationMessageElement", void 0);
+PrimerTextFieldElement = __decorate([
+    controller
+    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+], PrimerTextFieldElement);

package/lib/primer/forms/toggle_switch_input.d.ts

@@ -0,0 +1,5 @@
+export declare class ToggleSwitchInputElement extends HTMLElement {
+    validationElement: HTMLElement;
+    validationMessageElement: HTMLElement;
+    connectedCallback(): void;
+}