@primer/view-components 0.0.114 → 0.0.116

package/app/components/primer/alpha/layout.css

@@ -0,0 +1 @@
+.Layout{--Layout-sidebar-width:220px;--Layout-gutter:16px;display:grid}@media (max-width:calc(544px - 0.02px)){.Layout{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout .Layout-divider,.Layout .Layout-main,.Layout .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--divided{--Layout-gutter:0}.Layout.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--color-canvas-inset);border-color:var(--color-border-default);border-style:solid;border-width:var(--primer-borderWidth-thin,1px) 0;height:8px;margin-right:0}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(768px - 0.02px)){.Layout.Layout--flowRow-until-md{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-md .Layout-divider,.Layout.Layout--flowRow-until-md .Layout-main,.Layout.Layout--flowRow-until-md .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-md.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--color-canvas-inset);border-color:var(--color-border-default);border-style:solid;border-width:var(--primer-borderWidth-thin,1px) 0;height:8px;margin-right:0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(1012px - 0.02px)){.Layout.Layout--flowRow-until-lg{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-lg .Layout-divider,.Layout.Layout--flowRow-until-lg .Layout-main,.Layout.Layout--flowRow-until-lg .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-lg.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--color-canvas-inset);border-color:var(--color-border-default);border-style:solid;border-width:var(--primer-borderWidth-thin,1px) 0;height:8px;margin-right:0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}.Layout{grid-gap:var(--Layout-gutter);grid-auto-flow:column;grid-template-columns:auto 0 minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter)))}.Layout .Layout-sidebar{grid-column:1}.Layout .Layout-divider{display:none}.Layout .Layout-main{grid-column:2/span 2}@media (min-width:1012px){.Layout{--Layout-gutter:24px}}.Layout.Layout--gutter-none{--Layout-gutter:0px}.Layout.Layout--gutter-condensed{--Layout-gutter:16px}@media (min-width:1012px){.Layout.Layout--gutter-spacious{--Layout-gutter:32px}}@media (min-width:1280px){.Layout.Layout--gutter-spacious{--Layout-gutter:40px}}@media (min-width:544px){.Layout{--Layout-sidebar-width:220px}}@media (min-width:768px){.Layout{--Layout-sidebar-width:256px}}@media (min-width:1012px){.Layout{--Layout-sidebar-width:296px}}@media (min-width:768px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:240px}}@media (min-width:1012px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:256px}.Layout.Layout--sidebar-wide{--Layout-sidebar-width:320px}}@media (min-width:1280px){.Layout.Layout--sidebar-wide{--Layout-sidebar-width:336px}}.Layout.Layout--sidebarPosition-start .Layout-sidebar{grid-column:1}.Layout.Layout--sidebarPosition-start .Layout-main{grid-column:2/span 2}.Layout.Layout--sidebarPosition-end{grid-template-columns:minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto}.Layout.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout.Layout--sidebarPosition-end .Layout-sidebar{grid-column:2/span 2}.Layout.Layout--divided .Layout-divider{background:var(--color-border-default);display:block;grid-column:2;margin-right:-1px;width:1px}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar{grid-column:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout-divider{display:none;width:1px}.Layout-sidebar{width:var(--Layout-sidebar-width)}.Layout-main{min-width:0}.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-xl{margin-left:auto;margin-right:auto}.Layout-main .Layout-main-centered-lg>.container-lg,.Layout-main .Layout-main-centered-lg>.container-md,.Layout-main .Layout-main-centered-lg>.container-xl,.Layout-main .Layout-main-centered-md>.container-lg,.Layout-main .Layout-main-centered-md>.container-md,.Layout-main .Layout-main-centered-md>.container-xl,.Layout-main .Layout-main-centered-xl>.container-lg,.Layout-main .Layout-main-centered-xl>.container-md,.Layout-main .Layout-main-centered-xl>.container-xl{margin-left:0}.Layout-main .Layout-main-centered-md{max-width:calc(var(--primer-breakpoint-medium, 768px) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-lg{max-width:calc(var(--primer-breakpoint-large, 1012px) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-xl{max-width:calc(var(--primer-breakpoint-xlarge, 1280px) + var(--Layout-sidebar-width) + var(--Layout-gutter))}

package/app/components/primer/alpha/layout.css.json

@@ -0,0 +1 @@
+{"name":"alpha/layout","selectors":[".Layout",".Layout .Layout-divider",".Layout .Layout-main",".Layout .Layout-sidebar",".Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar",".Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--sidebarPosition-flowRow-start .Layout-main",".Layout.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar",".Layout.Layout--divided",".Layout.Layout--divided .Layout-divider",".Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",".Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",".Layout.Layout--divided .Layout-main",".Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-md",".Layout.Layout--flowRow-until-md .Layout-divider",".Layout.Layout--flowRow-until-md .Layout-main",".Layout.Layout--flowRow-until-md .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--divided",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-main",".Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-lg",".Layout.Layout--flowRow-until-lg .Layout-divider",".Layout.Layout--flowRow-until-lg .Layout-main",".Layout.Layout--flowRow-until-lg .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--divided",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main",".Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--gutter-none",".Layout.Layout--gutter-condensed",".Layout.Layout--gutter-spacious",".Layout.Layout--sidebar-narrow",".Layout.Layout--sidebar-wide",".Layout.Layout--sidebarPosition-start .Layout-sidebar",".Layout.Layout--sidebarPosition-start .Layout-main",".Layout.Layout--sidebarPosition-end",".Layout.Layout--sidebarPosition-end .Layout-main",".Layout.Layout--sidebarPosition-end .Layout-sidebar",".Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar",".Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main",".Layout-divider",".Layout-sidebar",".Layout-main",".Layout-main .Layout-main-centered-lg",".Layout-main .Layout-main-centered-md",".Layout-main .Layout-main-centered-xl",".Layout-main .Layout-main-centered-lg>.container-lg",".Layout-main .Layout-main-centered-lg>.container-md",".Layout-main .Layout-main-centered-lg>.container-xl",".Layout-main .Layout-main-centered-md>.container-lg",".Layout-main .Layout-main-centered-md>.container-md",".Layout-main .Layout-main-centered-md>.container-xl",".Layout-main .Layout-main-centered-xl>.container-lg",".Layout-main .Layout-main-centered-xl>.container-md",".Layout-main .Layout-main-centered-xl>.container-xl"]}

package/app/components/primer/alpha/menu.css.json

@@ -0,0 +1 @@
+{"name":"alpha/menu","selectors":[".menu",".menu-item",".menu-item:first-child",".menu-item:first-child:before",".menu-item:last-child",".menu-item:last-child:before",".menu-item:hover",".menu-item:active",".menu-item.selected",".menu-item[aria-current]:not([aria-current=false])",".menu-item[aria-selected=true]",":is(.menu-item.selected",".menu-item[aria-current]:not([aria-current=false])):before",".menu-item .octicon",".menu-item .Counter",".menu-item .menu-warning",".menu-item .avatar",".menu-item.alert .Counter",".menu-heading",".menu-heading:hover",".menu-heading:first-child",".menu-heading:last-child"]}

package/app/components/primer/alpha/segmented_control.css

@@ -1 +1 @@
-.SegmentedControl{background-color:var(--color-segmented-control-bg);border-radius:var(--primer-borderRadius-medium,6px);box-shadow:var(--primer-borderInset-thin,inset 0 0 0 max(1px,.0625rem)) var(--color-border-default);display:inline-flex;list-style:none}.SegmentedControl-item{border:var(--primer-borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--primer-borderRadius-medium,6px);display:inline-flex;padding:var(--primer-control-xsmall-paddingInline-condensed,4px);position:relative}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--color-btn-bg);border-color: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+.SegmentedControl-item:before,.SegmentedControl-item.SegmentedControl-item--selected: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:before{border-left:var(--primer-borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-default);content:"";inset:0 0 0 -1px;margin-bottom:var(--primer-control-medium-paddingBlock,6px);margin-top:var(--primer-control-medium-paddingBlock,6px);position:absolute}.SegmentedControl-item .Button{border:0;color:var(--color-btn-text);font-weight:var(--base-text-weight-normal,400);transition:none}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--primer-borderRadius-medium, 6px) - 5px);outline-offset:calc(var(--primer-control-xsmall-paddingInline-condensed, 4px) - var(--primer-borderWidth-thin, 1px))}.SegmentedControl-item .Button--small{height:calc(var(--primer-control-small-size, 28px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2);padding:0 calc(var(--primer-control-small-paddingInline-condensed, 8px) - var(--primer-control-xsmall-paddingInline-condensed, 4px))}.SegmentedControl-item .Button--small.Button--iconOnly{width:calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2)}.SegmentedControl-item .Button--medium{height:calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2);padding:0 calc(var(--primer-control-medium-paddingInline-normal, 12px) - var(--primer-control-xsmall-paddingInline-condensed, 4px))}.SegmentedControl-item .Button--medium.Button--iconOnly{width:calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2)}.SegmentedControl-item .Button--large{height:calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2);padding:0 calc(var(--primer-control-large-paddingInline-spacious, 16px) - var(--primer-control-xsmall-paddingInline-condensed, 4px))}.SegmentedControl-item .Button--large.Button--iconOnly{width:calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2)}.SegmentedControl-item .Button--iconOnly{padding:initial}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--color-btn-text)}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}.SegmentedControl--fullWidth .Button--iconOnly,.SegmentedControl--fullWidth .Button-withTooltip{width:100%}
+.SegmentedControl{background-color:var(--color-segmented-control-bg);border-radius:var(--primer-borderRadius-medium,6px);box-shadow:var(--primer-borderInset-thin,inset 0 0 0 max(1px,.0625rem)) var(--color-border-default);display:inline-flex;list-style:none}.SegmentedControl-item{border:var(--primer-borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--primer-borderRadius-medium,6px);display:inline-flex;padding:var(--primer-control-xsmall-paddingInline-condensed,4px);position:relative}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--color-btn-bg);border-color: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+.SegmentedControl-item:before,.SegmentedControl-item.SegmentedControl-item--selected: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:before{border-left:var(--primer-borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-default);content:"";inset:0 0 0 -1px;margin-bottom:var(--primer-control-medium-paddingBlock,6px);margin-top:var(--primer-control-medium-paddingBlock,6px);position:absolute}.SegmentedControl-item .Button{border:0;color:var(--color-btn-text);font-weight:var(--base-text-weight-normal,400);transition:none}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--primer-borderRadius-medium, 6px) - 5px);outline-offset:calc(var(--primer-control-xsmall-paddingInline-condensed, 4px) - var(--primer-borderWidth-thin, 1px))}.SegmentedControl-item .Button--small{height:calc(var(--primer-control-small-size, 28px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2);padding:0 calc(var(--primer-control-small-paddingInline-condensed, 8px) - var(--primer-control-xsmall-paddingInline-condensed, 4px))}.SegmentedControl-item .Button--small.Button--iconOnly{width:calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2)}.SegmentedControl-item .Button--small.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--primer-control-medium-size,32px);min-width:var(--primer-control-medium-size,32px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--medium{height:calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2);padding:0 calc(var(--primer-control-medium-paddingInline-normal, 12px) - var(--primer-control-xsmall-paddingInline-condensed, 4px))}.SegmentedControl-item .Button--medium.Button--iconOnly{width:calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2)}.SegmentedControl-item .Button--medium.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--primer-control-medium-size,32px);min-width:var(--primer-control-medium-size,32px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--large{height:calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2);padding:0 calc(var(--primer-control-large-paddingInline-spacious, 16px) - var(--primer-control-xsmall-paddingInline-condensed, 4px))}.SegmentedControl-item .Button--large.Button--iconOnly{width:calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2)}.SegmentedControl-item .Button--large.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--primer-control-large-size,40px);min-width:var(--primer-control-large-size,40px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--iconOnly{padding:initial}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--color-btn-text)}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}.SegmentedControl--fullWidth .Button--iconOnly,.SegmentedControl--fullWidth .Button-withTooltip{width:100%}

package/app/components/primer/alpha/segmented_control.css.json

@@ -1 +1 @@
-{"name":"alpha/segmented_control","selectors":[".SegmentedControl",".SegmentedControl-item",".SegmentedControl-item.SegmentedControl-item--selected",".SegmentedControl-item.SegmentedControl-item--selected .Button",".SegmentedControl-item.SegmentedControl-item--selected .Button:hover",".SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before",".SegmentedControl-item.SegmentedControl-item--selected:before",".SegmentedControl-item .Button-label[data-content]:before",".SegmentedControl-item:before",".SegmentedControl-item .Button",".SegmentedControl-item .Button:focus-visible",".SegmentedControl-item .Button--small",".SegmentedControl-item .Button--small.Button--iconOnly",".SegmentedControl-item .Button--medium",".SegmentedControl-item .Button--medium.Button--iconOnly",".SegmentedControl-item .Button--large",".SegmentedControl-item .Button--large.Button--iconOnly",".SegmentedControl-item .Button--iconOnly",".SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label",".SegmentedControl--fullWidth",".SegmentedControl--fullWidth .SegmentedControl-item",".SegmentedControl--fullWidth .Button--iconOnly",".SegmentedControl--fullWidth .Button-withTooltip"]}
+{"name":"alpha/segmented_control","selectors":[".SegmentedControl",".SegmentedControl-item",".SegmentedControl-item.SegmentedControl-item--selected",".SegmentedControl-item.SegmentedControl-item--selected .Button",".SegmentedControl-item.SegmentedControl-item--selected .Button:hover",".SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before",".SegmentedControl-item.SegmentedControl-item--selected:before",".SegmentedControl-item .Button-label[data-content]:before",".SegmentedControl-item:before",".SegmentedControl-item .Button",".SegmentedControl-item .Button:focus-visible",".SegmentedControl-item .Button--small",".SegmentedControl-item .Button--small.Button--iconOnly",".SegmentedControl-item .Button--small.Button--iconOnly:before",".SegmentedControl-item .Button--medium",".SegmentedControl-item .Button--medium.Button--iconOnly",".SegmentedControl-item .Button--medium.Button--iconOnly:before",".SegmentedControl-item .Button--large",".SegmentedControl-item .Button--large.Button--iconOnly",".SegmentedControl-item .Button--large.Button--iconOnly:before",".SegmentedControl-item .Button--iconOnly",".SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label",".SegmentedControl--fullWidth",".SegmentedControl--fullWidth .SegmentedControl-item",".SegmentedControl--fullWidth .Button--iconOnly",".SegmentedControl--fullWidth .Button-withTooltip"]}

package/app/components/primer/alpha/tool_tip.js

@@ -9,7 +9,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     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 _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_update, _ToolTipElement_updatePosition;
+var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_update, _ToolTipElement_updateControlReference, _ToolTipElement_updateDirection, _ToolTipElement_updatePosition;
 import { getAnchoredPosition } from '@primer/behaviors';
 const TOOLTIP_OPEN_CLASS = 'tooltip-open';
 const TOOLTIP_ARROW_EDGE_OFFSET = 6;
@@ -187,6 +187,8 @@ class ToolTipElement extends HTMLElement {
     }
     connectedCallback() {
         var _a;
+        __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateControlReference).call(this);
+        __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateDirection).call(this);
         if (!this.shadowRoot) {
             const shadow = this.attachShadow({ mode: 'open' });
             // eslint-disable-next-line github/no-inner-html
@@ -241,77 +243,13 @@ class ToolTipElement extends HTMLElement {
         }
     }
     attributeChangedCallback(name) {
+        if (!this.isConnected)
+            return;
         if (name === 'id' || name === 'data-type') {
-            if (!this.id || !this.control)
-                return;
-            if (this.type === 'label') {
-                let labelledBy = this.control.getAttribute('aria-labelledby');
-                if (labelledBy) {
-                    if (!labelledBy.split(' ').includes(this.id)) {
-                        labelledBy = `${labelledBy} ${this.id}`;
-                    }
-                    else {
-                        labelledBy = `${labelledBy}`;
-                    }
-                }
-                else {
-                    labelledBy = this.id;
-                }
-                this.control.setAttribute('aria-labelledby', labelledBy);
-                // Prevent duplicate accessible name announcements.
-                this.setAttribute('aria-hidden', 'true');
-            }
-            else {
-                let describedBy = this.control.getAttribute('aria-describedby');
-                if (describedBy) {
-                    if (!describedBy.split(' ').includes(this.id)) {
-                        describedBy = `${describedBy} ${this.id}`;
-                    }
-                    else {
-                        describedBy = `${describedBy}`;
-                    }
-                }
-                else {
-                    describedBy = this.id;
-                }
-                this.control.setAttribute('aria-describedby', describedBy);
-            }
+            __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateControlReference).call(this);
         }
         else if (name === 'data-direction') {
-            this.classList.remove(...DIRECTION_CLASSES);
-            const direction = this.direction;
-            if (direction === 'n') {
-                __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
-                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
-            }
-            else if (direction === 'ne') {
-                __classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
-                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
-            }
-            else if (direction === 'e') {
-                __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
-                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-right', "f");
-            }
-            else if (direction === 'se') {
-                __classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
-                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
-            }
-            else if (direction === 's') {
-                __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
-                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
-            }
-            else if (direction === 'sw') {
-                __classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
-                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
-            }
-            else if (direction === 'w') {
-                __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
-                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-left', "f");
-            }
-            else if (direction === 'nw') {
-                __classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
-                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
-            }
+            __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateDirection).call(this);
         }
     }
 }
@@ -327,6 +265,76 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
         }
         __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updatePosition).call(this);
     }
+}, _ToolTipElement_updateControlReference = function _ToolTipElement_updateControlReference() {
+    if (!this.id || !this.control)
+        return;
+    if (this.type === 'label') {
+        let labelledBy = this.control.getAttribute('aria-labelledby');
+        if (labelledBy) {
+            if (!labelledBy.split(' ').includes(this.id)) {
+                labelledBy = `${labelledBy} ${this.id}`;
+            }
+            else {
+                labelledBy = `${labelledBy}`;
+            }
+        }
+        else {
+            labelledBy = this.id;
+        }
+        this.control.setAttribute('aria-labelledby', labelledBy);
+        // Prevent duplicate accessible name announcements.
+        this.setAttribute('aria-hidden', 'true');
+    }
+    else {
+        let describedBy = this.control.getAttribute('aria-describedby');
+        if (describedBy) {
+            if (!describedBy.split(' ').includes(this.id)) {
+                describedBy = `${describedBy} ${this.id}`;
+            }
+            else {
+                describedBy = `${describedBy}`;
+            }
+        }
+        else {
+            describedBy = this.id;
+        }
+        this.control.setAttribute('aria-describedby', describedBy);
+    }
+}, _ToolTipElement_updateDirection = function _ToolTipElement_updateDirection() {
+    this.classList.remove(...DIRECTION_CLASSES);
+    const direction = this.direction;
+    if (direction === 'n') {
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
+    }
+    else if (direction === 'ne') {
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
+    }
+    else if (direction === 'e') {
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-right', "f");
+    }
+    else if (direction === 'se') {
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
+    }
+    else if (direction === 's') {
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
+    }
+    else if (direction === 'sw') {
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
+    }
+    else if (direction === 'w') {
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-left', "f");
+    }
+    else if (direction === 'nw') {
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
+    }
 }, _ToolTipElement_updatePosition = function _ToolTipElement_updatePosition() {
     if (!this.control)
         return;

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

@@ -1 +1 @@
-:root{--primer-duration-fast:80ms;--primer-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid;border-color:#0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:flex;flex-direction:row;font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-medium,500);gap:var(--primer-control-medium-gap,8px);height:var(--primer-control-medium-size,32px);justify-content:space-between;min-width:max-content;padding:0 var(--primer-control-medium-paddingInline-normal,12px);position:relative;text-align:center;transition:var(--primer-duration-fast) var(--primer-easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:course){.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(--primer-duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button,summary.Button{display:inline-flex}a.Button:hover,summary.Button:hover{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(--primer-control-medium-gap,8px)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-label{grid-area:text;line-height:var(--primer-text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4, 4px)*-1)}.Button--small{font-size:var(--primer-text-body-size-small,12px);gap:var(--primer-control-small-gap,4px);height:var(--primer-control-small-size,28px);padding:0 var(--primer-control-small-paddingInline-condensed,8px)}.Button--small .Button-label{line-height:var(--primer-text-body-lineHeight-small,1.66667)}.Button--small .Button-content>:not(:last-child){margin-right:var(--primer-control-small-gap,4px)}.Button--large{gap:var(--primer-control-large-gap,8px);height:var(--primer-control-large-size,40px);padding:0 var(--primer-control-large-paddingInline-spacious,16px)}.Button--large .Button-label{line-height:var(--primer-text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--primer-control-large-gap,8px)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--color-btn-primary-icon);background-color:var(--color-btn-primary-bg);border-color:var(--color-btn-primary-border);box-shadow:var(--color-btn-primary-shadow),var(--color-btn-primary-inset-shadow);color:var(--color-btn-primary-text)}.Button--primary:hover:not(:disabled){background-color:var(--color-btn-primary-hover-bg);border-color:var(--color-btn-primary-hover-border)}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid 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(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--color-btn-primary-selected-bg);box-shadow:var(--color-btn-primary-selected-shadow)}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--color-btn-primary-disabled-text);background-color:var(--color-btn-primary-disabled-bg);border-color:var(--color-btn-primary-disabled-border);color:var(--color-btn-primary-disabled-text)}.Button--secondary{fill:var(--color-fg-muted);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-text)}.Button--secondary:hover:not(:disabled){background-color:var(--color-btn-hover-bg);border-color:var(--color-btn-hover-border)}.Button--secondary:active:not(:disabled){background-color:var(--color-btn-active-bg);border-color:var(--color-btn-active-border)}.Button--secondary[aria-pressed=true]{background-color:var(--color-btn-selected-bg);box-shadow:var(--color-primer-shadow-inset)}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible{color:var(--color-btn-text)}.Button--invisible:hover:not(:disabled){background-color:var(--color-action-list-item-default-hover-bg)}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--color-accent-fg)}.Button--invisible .Button-visual{color:var(--color-fg-muted)}.Button--link{fill:var(--color-accent-fg);border:none;color:var(--color-accent-fg);display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:initial;border-color:#0000;color:var(--color-primer-fg-disabled)}.Button--danger{fill:var(--color-btn-danger-icon);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-danger-text)}.Button--danger:hover:not(:disabled){fill:var(--color-btn-danger-hover-text);background-color:var(--color-btn-danger-hover-bg);border-color:var(--color-btn-danger-hover-border);box-shadow:var(--color-btn-danger-hover-shadow),var(--color-btn-danger-hover-inset-shadow);color:var(--color-btn-danger-hover-text)}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--color-btn-danger-selected-text);background-color:var(--color-btn-danger-selected-bg);border-color:var(--color-btn-danger-selected-border);box-shadow:var(--color-btn-danger-selected-shadow);color:var(--color-btn-danger-selected-text)}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--color-btn-danger-disabled-text);background-color:var(--color-btn-danger-disabled-bg);border-color:var(--color-btn-border);color:var(--color-btn-danger-disabled-text)}.Button--iconOnly{display:grid;padding:unset;place-content:center;width:var(--primer-control-medium-size,32px)}.Button--iconOnly.Button--small{width:var(--primer-control-small-size,28px)}.Button--iconOnly.Button--large{width:var(--primer-control-large-size,40px)}
+:root{--primer-duration-fast:80ms;--primer-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid;border-color:#0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:flex;flex-direction:row;font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-medium,500);gap:var(--primer-control-medium-gap,8px);height:var(--primer-control-medium-size,32px);justify-content:space-between;min-width:max-content;padding:0 var(--primer-control-medium-paddingInline-normal,12px);position:relative;text-align:center;transition:var(--primer-duration-fast) var(--primer-easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:course){.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(--primer-duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button,summary.Button{display:inline-flex}a.Button:hover,summary.Button:hover{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(--primer-control-medium-gap,8px)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--color-btn-counter-bg);color:inherit}.Button-label{grid-area:text;line-height:var(--primer-text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4, 4px)*-1)}.Button--small{font-size:var(--primer-text-body-size-small,12px);gap:var(--primer-control-small-gap,4px);height:var(--primer-control-small-size,28px);padding:0 var(--primer-control-small-paddingInline-condensed,8px)}.Button--small .Button-label{line-height:var(--primer-text-body-lineHeight-small,1.66667)}.Button--small .Button-content>:not(:last-child){margin-right:var(--primer-control-small-gap,4px)}.Button--large{gap:var(--primer-control-large-gap,8px);height:var(--primer-control-large-size,40px);padding:0 var(--primer-control-large-paddingInline-spacious,16px)}.Button--large .Button-label{line-height:var(--primer-text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--primer-control-large-gap,8px)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--color-btn-primary-icon);background-color:var(--color-btn-primary-bg);border-color:var(--color-btn-primary-border);box-shadow:var(--color-btn-primary-shadow),var(--color-btn-primary-inset-shadow);color:var(--color-btn-primary-text)}.Button--primary:hover:not(:disabled){background-color:var(--color-btn-primary-hover-bg);border-color:var(--color-btn-primary-hover-border)}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid 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(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--color-btn-primary-selected-bg);box-shadow:var(--color-btn-primary-selected-shadow)}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--color-btn-primary-disabled-text);background-color:var(--color-btn-primary-disabled-bg);border-color:var(--color-btn-primary-disabled-border);color:var(--color-btn-primary-disabled-text)}.Button--secondary{fill:var(--color-fg-muted);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-text)}.Button--secondary:hover:not(:disabled){background-color:var(--color-btn-hover-bg);border-color:var(--color-btn-hover-border)}.Button--secondary:active:not(:disabled){background-color:var(--color-btn-active-bg);border-color:var(--color-btn-active-border)}.Button--secondary[aria-pressed=true]{background-color:var(--color-btn-selected-bg);box-shadow:var(--color-primer-shadow-inset)}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible{color:var(--color-btn-text)}.Button--invisible:hover:not(:disabled){background-color:var(--color-action-list-item-default-hover-bg)}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--color-accent-fg)}.Button--invisible .Button-visual{color:var(--color-fg-muted)}.Button--link{fill:var(--color-accent-fg);border:none;color:var(--color-accent-fg);display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:initial;border-color:#0000;color:var(--color-primer-fg-disabled)}.Button--danger{fill:var(--color-btn-danger-icon);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-danger-text)}.Button--danger:hover:not(:disabled){fill:var(--color-btn-danger-hover-text);background-color:var(--color-btn-danger-hover-bg);border-color:var(--color-btn-danger-hover-border);box-shadow:var(--color-btn-danger-hover-shadow),var(--color-btn-danger-hover-inset-shadow);color:var(--color-btn-danger-hover-text)}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--color-btn-danger-selected-text);background-color:var(--color-btn-danger-selected-bg);border-color:var(--color-btn-danger-selected-border);box-shadow:var(--color-btn-danger-selected-shadow);color:var(--color-btn-danger-selected-text)}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--color-btn-danger-disabled-text);background-color:var(--color-btn-danger-disabled-bg);border-color:var(--color-btn-border);color:var(--color-btn-danger-disabled-text)}.Button--iconOnly{display:grid;padding:unset;place-content:center;width:var(--primer-control-medium-size,32px)}.Button--iconOnly.Button--small{width:var(--primer-control-small-size,28px)}.Button--iconOnly.Button--large{width:var(--primer-control-large-size,40px)}

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

@@ -1 +1 @@
-{"name":"beta/button","selectors":[":root",".Button",".Button:before",".Button:hover",".Button:active",".Button:disabled",".Button[aria-disabled=true]",".Button-withTooltip","a.Button","summary.Button","a.Button:hover","summary.Button:hover",".Button-content",".Button-content>:not(:last-child)",".Button-content--alignStart",".Button-visual",".Button-label",".Button-leadingVisual",".Button-trailingVisual",".Button-trailingAction",".Button--small",".Button--small .Button-label",".Button--small .Button-content>:not(:last-child)",".Button--large",".Button--large .Button-label",".Button--large .Button-content>:not(:last-child)",".Button--fullWidth",".Button--primary",".Button--primary:hover:not(:disabled)",".Button--primary:focus",".Button--primary:focus:not(:focus-visible)",".Button--primary:focus-visible",".Button--primary:active:not(:disabled)",".Button--primary[aria-pressed=true]",".Button--primary:disabled",".Button--primary[aria-disabled=true]",".Button--secondary",".Button--secondary:hover:not(:disabled)",".Button--secondary:active:not(:disabled)",".Button--secondary[aria-pressed=true]",".Button--secondary:disabled",".Button--secondary[aria-disabled=true]",".Button--invisible",".Button--invisible:hover:not(:disabled)",".Button--invisible:active:not(:disabled)",".Button--invisible[aria-pressed=true]",".Button--invisible:disabled",".Button--invisible[aria-disabled=true]",".Button--invisible.Button--invisible-noVisuals .Button-label",".Button--invisible .Button-visual",".Button--link",".Button--link:hover:not(:disabled)",".Button--link:focus",".Button--link:focus-visible",".Button--link:disabled",".Button--link[aria-disabled=true]",".Button--danger",".Button--danger:hover:not(:disabled)",".Button--danger:active:not(:disabled)",".Button--danger[aria-pressed=true]",".Button--danger:disabled",".Button--danger[aria-disabled=true]",".Button--iconOnly",".Button--iconOnly.Button--small",".Button--iconOnly.Button--large"]}
+{"name":"beta/button","selectors":[":root",".Button",".Button:before",".Button:hover",".Button:active",".Button:disabled",".Button[aria-disabled=true]",".Button-withTooltip","a.Button","summary.Button","a.Button:hover","summary.Button:hover",".Button-content",".Button-content>:not(:last-child)",".Button-content--alignStart",".Button-visual",".Button-visual .Counter",".Button-label",".Button-leadingVisual",".Button-trailingVisual",".Button-trailingAction",".Button--small",".Button--small .Button-label",".Button--small .Button-content>:not(:last-child)",".Button--large",".Button--large .Button-label",".Button--large .Button-content>:not(:last-child)",".Button--fullWidth",".Button--primary",".Button--primary:hover:not(:disabled)",".Button--primary:focus",".Button--primary:focus:not(:focus-visible)",".Button--primary:focus-visible",".Button--primary:active:not(:disabled)",".Button--primary[aria-pressed=true]",".Button--primary:disabled",".Button--primary[aria-disabled=true]",".Button--secondary",".Button--secondary:hover:not(:disabled)",".Button--secondary:active:not(:disabled)",".Button--secondary[aria-pressed=true]",".Button--secondary:disabled",".Button--secondary[aria-disabled=true]",".Button--invisible",".Button--invisible:hover:not(:disabled)",".Button--invisible:active:not(:disabled)",".Button--invisible[aria-pressed=true]",".Button--invisible:disabled",".Button--invisible[aria-disabled=true]",".Button--invisible.Button--invisible-noVisuals .Button-label",".Button--invisible .Button-visual",".Button--link",".Button--link:hover:not(:disabled)",".Button--link:focus",".Button--link:focus-visible",".Button--link:disabled",".Button--link[aria-disabled=true]",".Button--danger",".Button--danger:hover:not(:disabled)",".Button--danger:active:not(:disabled)",".Button--danger[aria-pressed=true]",".Button--danger:disabled",".Button--danger[aria-disabled=true]",".Button--iconOnly",".Button--iconOnly.Button--small",".Button--iconOnly.Button--large"]}

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

@@ -11,3 +11,5 @@ import './beta/clipboard_copy';
 import './local_time';
 import './tab_container_component';
 import './time_ago_component';
+import '../../../lib/primer/forms/primer_multi_input';
+import '../../../lib/primer/forms/primer_text_field';

package/app/components/primer/primer.js

@@ -11,3 +11,5 @@ import './beta/clipboard_copy';
 import './local_time';
 import './tab_container_component';
 import './time_ago_component';
+import '../../../lib/primer/forms/primer_multi_input';
+import '../../../lib/primer/forms/primer_text_field';

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,62 @@
+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';
+let PrimerTextFieldElement = 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', (event) => {
+            event.detail.response.text().then((error_message) => { this.setError(error_message); });
+        }, { signal });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+    }
+    clearError() {
+        this.inputElement.removeAttribute('invalid');
+        this.validationElement.hidden = true;
+        this.validationMessageElement.innerText = '';
+    }
+    setError(message) {
+        this.validationMessageElement.innerText = 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
+], PrimerTextFieldElement);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.0.114",
+  "version": "0.0.116",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -25,7 +25,9 @@
     "app/components/primer/**/*.js",
     "app/components/primer/**/*.css",
     "app/components/primer/**/*.css.json",
-    "app/components/primer/**/*.d.ts"
+    "app/components/primer/**/*.d.ts",
+    "lib/primer/forms/**/*.js",
+    "lib/primer/forms/**/*.d.ts"
   ],
   "scripts": {
     "clean": "git clean -fdX -- app/",
@@ -42,6 +44,7 @@
     "build:css": "script/build-assets css"
   },
   "dependencies": {
+    "@github/auto-check-element": "^5.2.0",
     "@github/auto-complete-element": "^3.3.4",
     "@github/catalyst": "^1.6.0",
     "@github/clipboard-copy-element": "^1.1.2",