openproject-primer_view_components 0.59.2 → 0.61.0

data/app/components/primer/alpha/toggle_switch.css.map

@@ -1 +1 @@
-{"version":3,"sources":["toggle_switch.pcss","<no source>"],"names":[],"mappings":"AAQA,yCAHE,mBAOF,CAJA,cACE,kBAAmB,CAEnB,4CACF,CAGE,8CACE,WAAY,CACZ,kBACF,CAEA,+CACE,QAAS,CACT,iBACF,CAGF,oBAgBE,uBAAgB,CAAhB,eAAgB,CANhB,iDAAkD,CAClD,yEAA0E,CAC1E,wCAAyC,CAJzC,cAAe,CANf,aAAc,CAEd,iCAAkC,CAElC,eAAgB,CADhB,SAAU,CAJV,iBAAkB,CAMlB,4BAAqB,CAArB,oBAAqB,CAOrB,wBAAyB,CACzB,iDAAmD,CAFnD,mDAAyD,CAJzD,wBAAiB,CAAjB,gBAAiB,CANjB,yBAyCF,CA1BE,4DAEE,kBACF,CAEA,0BACE,kDACF,CAEA,2BACE,mDACF,CAEA,wBAEI,gCC3DN,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UD2DgC,CAE9B,CAEA,gCAGE,0CACE,eACF,CACF,CAGF,iDAEE,qDAAsD,CACtD,kBAAyB,CAFzB,6CAGF,CAEA,uCACE,oDAAqD,CACrD,2CAyBF,CAtBI,6DACE,qDACF,CAEA,8DACE,sDACF,CAGF,0DACE,mDAAoD,CACpD,mDAAoD,CACpD,0BACF,CAEA,8DACE,uBACF,CAEA,gEACE,0BACF,CAGF,8BAEE,qDAAsD,CACtD,kBAAyB,CAFzB,kBAAmB,CAGnB,wBAcF,CAZE,iDACE,uCAAwC,CACxC,eACF,CAMA,4GACE,0CACF,CAGF,oBAEE,kBAAmB,CADnB,YAAa,CAGb,WAAY,CACZ,eAAgB,CAFhB,UAGF,CAEA,uBAGE,yCAA0C,CAG1C,2BAEF,CAEA,gDAHE,YAAa,CALb,aAAc,CAEd,wBAAyB,CACzB,6BAaF,CARA,yBAGE,sCAAuC,CAGvC,uBAEF,CAEA,mBAME,gDAAiD,CACjD,wEAAyE,CACzE,wCAAyC,CALzC,QAAS,CAMT,0EAA4E,CAR5E,iBAAkB,CAClB,KAAM,CASN,wBAAyB,CACzB,6BAA8B,CAF9B,mDAAyD,CALzD,SAAU,CADV,SAaF,CAHE,gCAdF,mBAeI,eAEJ,CADE,CAGF,qBAIE,4BAA6B,CAF7B,sCAAuC,CACvC,8CAA+C,CAF/C,iBAAkB,CAIlB,gBACF,CAEA,yBACE,YAAa,CAGb,kBAAoB,CAFpB,yBAGF,CAGE,0CACE,qCACF,CAEA,yCAEE,iCAAkC,CADlC,yBAEF,CAIA,6CACE,0BACF,CAGF,uBACE,QAAS,CACT,iBACF,CAEA,wBACE,WAAY,CACZ,kBACF,CAEA,2BACE,0BAKF,CAHE,gDACE,eACF","file":"toggle_switch.css","sourcesContent":["/* ToggleSwitch */\n\n/* Catalyst in dotcom applies a display: block to all web component elements. This\n** rule overrides it so the status label and toggle switch are laid out correctly. */\n.ToggleSwitch.ToggleSwitch {\n  display: inline-flex;\n}\n\n.ToggleSwitch {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--controlStack-medium-gap-condensed);\n}\n\n.ToggleSwitch--checked {\n  & .ToggleSwitch-statusOn {\n    height: auto;\n    visibility: visible;\n  }\n\n  & .ToggleSwitch-statusOff {\n    height: 0;\n    visibility: hidden;\n  }\n}\n\n.ToggleSwitch-track {\n  position: relative;\n  display: block;\n  width: var(--base-size-64);\n  height: var(--control-medium-size);\n  padding: 0;\n  overflow: hidden;\n  text-decoration: none;\n  cursor: pointer;\n  user-select: none;\n  background-color: var(--controlTrack-bgColor-rest);\n  border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest);\n  border-radius: var(--borderRadius-medium);\n  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);\n  transition-duration: 80ms;\n  transition-property: background-color, border-color;\n  appearance: none;\n\n  &:focus,\n  &:focus-visible {\n    outline-offset: 1px;\n  }\n\n  &:hover {\n    background-color: var(--controlTrack-bgColor-hover);\n  }\n\n  &:active {\n    background-color: var(--controlTrack-bgColor-active);\n  }\n\n  @media (pointer: coarse) {\n    &::before {\n      @mixin minTouchTarget 44px;\n    }\n  }\n\n  @media (prefers-reduced-motion) {\n    transition: none;\n\n    & * {\n      transition: none;\n    }\n  }\n}\n\n.ToggleSwitch-track[aria-pressed='true'][disabled] {\n  color: var(--control-checked-fgColor-disabled);\n  background-color: var(--controlTrack-bgColor-disabled);\n  border-color: transparent;\n}\n\n.ToggleSwitch-track[aria-pressed='true'] {\n  background-color: var(--control-checked-bgColor-rest);\n  border-color: var(--borderColor-transparent);\n\n  &:not([disabled]) {\n    &:hover {\n      background-color: var(--control-checked-bgColor-hover);\n    }\n\n    &:active {\n      background-color: var(--control-checked-bgColor-active);\n    }\n  }\n\n  & .ToggleSwitch-knob {\n    background-color: var(--controlKnob-bgColor-checked);\n    border-color: var(--controlKnob-borderColor-checked);\n    transform: translateX(100%);\n  }\n\n  & .ToggleSwitch-lineIcon {\n    transform: translateX(0%);\n  }\n\n  & .ToggleSwitch-circleIcon {\n    transform: translateX(100%);\n  }\n}\n\n.ToggleSwitch-track[disabled] {\n  cursor: not-allowed;\n  background-color: var(--controlTrack-bgColor-disabled);\n  border-color: transparent;\n  transition-property: none;\n\n  & .ToggleSwitch-knob {\n    border-color: var(--borderColor-default);\n    box-shadow: none;\n  }\n\n  & .ToggleSwitch-lineIcon {\n    color: var(--controlTrack-fgColor-disabled);\n  }\n\n  & .ToggleSwitch-circleIcon {\n    color: var(--controlTrack-fgColor-disabled);\n  }\n}\n\n.ToggleSwitch-icons {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.ToggleSwitch-lineIcon {\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 0;\n  color: var(--control-checked-fgColor-rest);\n  transition-duration: 80ms;\n  transition-property: transform;\n  transform: translateX(-100%);\n  flex: 1 0 50%;\n}\n\n.ToggleSwitch-circleIcon {\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 0;\n  color: var(--controlTrack-fgColor-rest);\n  transition-duration: 80ms;\n  transition-property: transform;\n  transform: translateX(0);\n  flex: 1 0 50%;\n}\n\n.ToggleSwitch-knob {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  z-index: 1;\n  width: 50%;\n  background-color: var(--controlKnob-bgColor-rest);\n  border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);\n  border-radius: var(--borderRadius-medium);\n  box-shadow: var(--shadow-resting-medium), var(--button-default-shadow-inset);\n  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);\n  transition-duration: 80ms;\n  transition-property: transform;\n\n  @media (prefers-reduced-motion) {\n    transition: none;\n  }\n}\n\n.ToggleSwitch-status {\n  position: relative;\n  font-size: var(--text-body-size-medium);\n  line-height: var(--text-title-lineHeight-large);\n  color: var(--fgColor-default);\n  text-align: right;\n}\n\n.ToggleSwitch-statusIcon {\n  display: flex;\n  width: var(--base-size-16);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-top: 0.063rem;\n}\n\n.ToggleSwitch--small {\n  & .ToggleSwitch-status {\n    font-size: var(--text-body-size-small);\n  }\n\n  & .ToggleSwitch-track {\n    width: var(--base-size-48);\n    height: var(--control-xsmall-size);\n  }\n}\n\n.ToggleSwitch--disabled {\n  & .ToggleSwitch-status {\n    color: var(--fgColor-muted);\n  }\n}\n\n.ToggleSwitch-statusOn {\n  height: 0;\n  visibility: hidden;\n}\n\n.ToggleSwitch-statusOff {\n  height: auto;\n  visibility: visible;\n}\n\n.ToggleSwitch--statusAtEnd {\n  flex-direction: row-reverse;\n\n  & .ToggleSwitch-status {\n    text-align: left;\n  }\n}\n",null]}
+{"version":3,"sources":["toggle_switch.pcss","<no source>"],"names":[],"mappings":"AAQA,yCAHE,mBAOF,CAJA,cACE,kBAAmB,CAEnB,4CACF,CAGE,8CACE,WAAY,CACZ,kBACF,CAEA,+CACE,QAAS,CACT,iBACF,CAGF,oBAgBE,eAAgB,CANhB,iDAAkD,CAClD,yEAA0E,CAC1E,wCAAyC,CAJzC,cAAe,CANf,aAAc,CAEd,iCAAkC,CAElC,eAAgB,CADhB,SAAU,CAJV,iBAAkB,CAMlB,4BAAqB,CAArB,oBAAqB,CAOrB,wBAAyB,CACzB,iDAAmD,CAFnD,mDAAyD,CAJzD,wBAAiB,CAAjB,gBAAiB,CANjB,yBAyCF,CA1BE,4DAEE,kBACF,CAEA,0BACE,kDACF,CAEA,2BACE,mDACF,CAEA,wBAEI,gCC3DN,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UD2DgC,CAE9B,CAEA,gCAGE,0CACE,eACF,CACF,CAGF,iDAEE,qDAAsD,CACtD,kBAAyB,CAFzB,6CAGF,CAEA,uCACE,oDAAqD,CACrD,2CAyBF,CAtBI,6DACE,qDACF,CAEA,8DACE,sDACF,CAGF,0DACE,mDAAoD,CACpD,mDAAoD,CACpD,0BACF,CAEA,8DACE,uBACF,CAEA,gEACE,0BACF,CAGF,8BAEE,qDAAsD,CACtD,kBAAyB,CAFzB,kBAAmB,CAGnB,wBAcF,CAZE,iDACE,uCAAwC,CACxC,eACF,CAMA,4GACE,0CACF,CAGF,oBAEE,kBAAmB,CADnB,YAAa,CAGb,WAAY,CACZ,eAAgB,CAFhB,UAGF,CAEA,uBAGE,yCAA0C,CAG1C,2BAEF,CAEA,gDAHE,YAAa,CALb,aAAc,CAEd,wBAAyB,CACzB,6BAaF,CARA,yBAGE,sCAAuC,CAGvC,uBAEF,CAEA,mBAME,gDAAiD,CACjD,wEAAyE,CACzE,wCAAyC,CALzC,QAAS,CAMT,0EAA4E,CAR5E,iBAAkB,CAClB,KAAM,CASN,wBAAyB,CACzB,6BAA8B,CAF9B,mDAAyD,CALzD,SAAU,CADV,SAaF,CAHE,gCAdF,mBAeI,eAEJ,CADE,CAGF,qBAIE,4BAA6B,CAF7B,sCAAuC,CACvC,8CAA+C,CAF/C,iBAAkB,CAIlB,gBACF,CAEA,yBACE,YAAa,CAGb,kBAAoB,CAFpB,yBAGF,CAGE,0CACE,qCACF,CAEA,yCAEE,iCAAkC,CADlC,yBAEF,CAIA,6CACE,0BACF,CAGF,uBACE,QAAS,CACT,iBACF,CAEA,wBACE,WAAY,CACZ,kBACF,CAEA,2BACE,0BAKF,CAHE,gDACE,eACF","file":"toggle_switch.css","sourcesContent":["/* ToggleSwitch */\n\n/* Catalyst in dotcom applies a display: block to all web component elements. This\n** rule overrides it so the status label and toggle switch are laid out correctly. */\n.ToggleSwitch.ToggleSwitch {\n  display: inline-flex;\n}\n\n.ToggleSwitch {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--controlStack-medium-gap-condensed);\n}\n\n.ToggleSwitch--checked {\n  & .ToggleSwitch-statusOn {\n    height: auto;\n    visibility: visible;\n  }\n\n  & .ToggleSwitch-statusOff {\n    height: 0;\n    visibility: hidden;\n  }\n}\n\n.ToggleSwitch-track {\n  position: relative;\n  display: block;\n  width: var(--base-size-64);\n  height: var(--control-medium-size);\n  padding: 0;\n  overflow: hidden;\n  text-decoration: none;\n  cursor: pointer;\n  user-select: none;\n  background-color: var(--controlTrack-bgColor-rest);\n  border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest);\n  border-radius: var(--borderRadius-medium);\n  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);\n  transition-duration: 80ms;\n  transition-property: background-color, border-color;\n  appearance: none;\n\n  &:focus,\n  &:focus-visible {\n    outline-offset: 1px;\n  }\n\n  &:hover {\n    background-color: var(--controlTrack-bgColor-hover);\n  }\n\n  &:active {\n    background-color: var(--controlTrack-bgColor-active);\n  }\n\n  @media (pointer: coarse) {\n    &::before {\n      @mixin minTouchTarget 44px;\n    }\n  }\n\n  @media (prefers-reduced-motion) {\n    transition: none;\n\n    & * {\n      transition: none;\n    }\n  }\n}\n\n.ToggleSwitch-track[aria-pressed='true'][disabled] {\n  color: var(--control-checked-fgColor-disabled);\n  background-color: var(--controlTrack-bgColor-disabled);\n  border-color: transparent;\n}\n\n.ToggleSwitch-track[aria-pressed='true'] {\n  background-color: var(--control-checked-bgColor-rest);\n  border-color: var(--borderColor-transparent);\n\n  &:not([disabled]) {\n    &:hover {\n      background-color: var(--control-checked-bgColor-hover);\n    }\n\n    &:active {\n      background-color: var(--control-checked-bgColor-active);\n    }\n  }\n\n  & .ToggleSwitch-knob {\n    background-color: var(--controlKnob-bgColor-checked);\n    border-color: var(--controlKnob-borderColor-checked);\n    transform: translateX(100%);\n  }\n\n  & .ToggleSwitch-lineIcon {\n    transform: translateX(0%);\n  }\n\n  & .ToggleSwitch-circleIcon {\n    transform: translateX(100%);\n  }\n}\n\n.ToggleSwitch-track[disabled] {\n  cursor: not-allowed;\n  background-color: var(--controlTrack-bgColor-disabled);\n  border-color: transparent;\n  transition-property: none;\n\n  & .ToggleSwitch-knob {\n    border-color: var(--borderColor-default);\n    box-shadow: none;\n  }\n\n  & .ToggleSwitch-lineIcon {\n    color: var(--controlTrack-fgColor-disabled);\n  }\n\n  & .ToggleSwitch-circleIcon {\n    color: var(--controlTrack-fgColor-disabled);\n  }\n}\n\n.ToggleSwitch-icons {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.ToggleSwitch-lineIcon {\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 0;\n  color: var(--control-checked-fgColor-rest);\n  transition-duration: 80ms;\n  transition-property: transform;\n  transform: translateX(-100%);\n  flex: 1 0 50%;\n}\n\n.ToggleSwitch-circleIcon {\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 0;\n  color: var(--controlTrack-fgColor-rest);\n  transition-duration: 80ms;\n  transition-property: transform;\n  transform: translateX(0);\n  flex: 1 0 50%;\n}\n\n.ToggleSwitch-knob {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  z-index: 1;\n  width: 50%;\n  background-color: var(--controlKnob-bgColor-rest);\n  border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);\n  border-radius: var(--borderRadius-medium);\n  box-shadow: var(--shadow-resting-medium), var(--button-default-shadow-inset);\n  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);\n  transition-duration: 80ms;\n  transition-property: transform;\n\n  @media (prefers-reduced-motion) {\n    transition: none;\n  }\n}\n\n.ToggleSwitch-status {\n  position: relative;\n  font-size: var(--text-body-size-medium);\n  line-height: var(--text-title-lineHeight-large);\n  color: var(--fgColor-default);\n  text-align: right;\n}\n\n.ToggleSwitch-statusIcon {\n  display: flex;\n  width: var(--base-size-16);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-top: 0.063rem;\n}\n\n.ToggleSwitch--small {\n  & .ToggleSwitch-status {\n    font-size: var(--text-body-size-small);\n  }\n\n  & .ToggleSwitch-track {\n    width: var(--base-size-48);\n    height: var(--control-xsmall-size);\n  }\n}\n\n.ToggleSwitch--disabled {\n  & .ToggleSwitch-status {\n    color: var(--fgColor-muted);\n  }\n}\n\n.ToggleSwitch-statusOn {\n  height: 0;\n  visibility: hidden;\n}\n\n.ToggleSwitch-statusOff {\n  height: auto;\n  visibility: visible;\n}\n\n.ToggleSwitch--statusAtEnd {\n  flex-direction: row-reverse;\n\n  & .ToggleSwitch-status {\n    text-align: left;\n  }\n}\n",null]}

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

@@ -1 +1 @@
-.flash:not(.Banner){background-image:linear-gradient(var(--bgColor-accent-muted),var(--bgColor-accent-muted));border-color:var(--borderColor-accent-muted);border-radius:var(--borderRadius-medium);border-style:solid;border-width:var(--borderWidth-thin);color:var(--fgColor-default);padding:var(--base-size-20) var(--control-medium-paddingInline-spacious);position:relative}.flash:not(.Banner) .octicon{color:var(--fgColor-accent);margin-right:var(--base-size-12)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--stack-gap-spacious)}.flash-close:not(.Banner-close){-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;float:right;margin-top:calc(var(--base-size-4)*-1);text-align:center}.flash-close:not(.Banner-close):hover{opacity:.7}.flash-close:not(.Banner-close):active{opacity:.5}.flash-close:not(.Banner-close) .octicon{margin-right:0}.flash-action:not(.Banner-actions){background-clip:padding-box;float:right;margin-left:var(--stack-gap-spacious);margin-top:-3px}.flash-action.btn:not(.Banner-actions) .octicon{color:var(--fgColor-muted);margin-right:var(--control-small-gap)}.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(--bgColor-attention-muted));border-color:var(--borderColor-attention-muted);color:var(--fgColor-default)}.flash-warn:not(.Banner) .octicon{color:var(--fgColor-attention)}.flash-error:not(.Banner){background-image:linear-gradient(var(--bgColor-danger-muted),var(--bgColor-danger-muted));border-color:var(--borderColor-danger-muted);color:var(--fgColor-default)}.flash-error:not(.Banner) .octicon{color:var(--fgColor-danger)}.flash-success:not(.Banner){background-image:linear-gradient(var(--bgColor-success-muted),var(--bgColor-success-muted));border-color:var(--borderColor-success-muted);color:var(--fgColor-default)}.flash-success:not(.Banner) .octicon{color:var(--fgColor-success)}.flash-full:not(.Banner){border-radius:0;border-width:var(--borderWidth-thin) 0;margin-top:calc(var(--borderWidth-thin)*-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)}.warning{background-color:var(--bgColor-attention-muted);font-weight:var(--base-text-weight-semibold);margin-bottom:.8em;padding:.5em}
+.flash:not(.Banner){background-image:linear-gradient(var(--bgColor-accent-muted),var(--bgColor-accent-muted));border-color:var(--borderColor-accent-muted);border-radius:var(--borderRadius-medium);border-style:solid;border-width:var(--borderWidth-thin);color:var(--fgColor-default);padding:var(--base-size-20) var(--control-medium-paddingInline-spacious);position:relative}.flash:not(.Banner) .octicon{color:var(--fgColor-accent);margin-right:var(--base-size-12)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--stack-gap-spacious)}.flash-close:not(.Banner-close){appearance:none;background:none;border:0;cursor:pointer;float:right;margin-top:calc(var(--base-size-4)*-1);text-align:center}.flash-close:not(.Banner-close):hover{opacity:.7}.flash-close:not(.Banner-close):active{opacity:.5}.flash-close:not(.Banner-close) .octicon{margin-right:0}.flash-action:not(.Banner-actions){background-clip:padding-box;float:right;margin-left:var(--stack-gap-spacious);margin-top:-3px}.flash-action.btn:not(.Banner-actions) .octicon{color:var(--fgColor-muted);margin-right:var(--control-small-gap)}.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(--bgColor-attention-muted));border-color:var(--borderColor-attention-muted);color:var(--fgColor-default)}.flash-warn:not(.Banner) .octicon{color:var(--fgColor-attention)}.flash-error:not(.Banner){background-image:linear-gradient(var(--bgColor-danger-muted),var(--bgColor-danger-muted));border-color:var(--borderColor-danger-muted);color:var(--fgColor-default)}.flash-error:not(.Banner) .octicon{color:var(--fgColor-danger)}.flash-success:not(.Banner){background-image:linear-gradient(var(--bgColor-success-muted),var(--bgColor-success-muted));border-color:var(--borderColor-success-muted);color:var(--fgColor-default)}.flash-success:not(.Banner) .octicon{color:var(--fgColor-success)}.flash-full:not(.Banner){border-radius:0;border-width:var(--borderWidth-thin) 0;margin-top:calc(var(--borderWidth-thin)*-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)}.warning{background-color:var(--bgColor-attention-muted);font-weight:var(--base-text-weight-semibold);margin-bottom:.8em;padding:.5em}

data/app/components/primer/beta/flash.css.map

@@ -1 +1 @@
-{"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAKA,oBAME,yFAA2F,CAC3F,4CAA6C,CAG7C,wCAAyC,CAFzC,kBAAmB,CACnB,oCAAqC,CAJrC,4BAA6B,CAH7B,wEAAyE,CADzE,iBAoBF,CATE,6BAEE,2BAA4B,CAD5B,gCAEF,CAGA,iCACE,eACF,CAIF,gBACE,uCACF,CAGA,gCASE,uBAAgB,CAAhB,eAAgB,CAFhB,eAAgB,CAChB,QAAS,CAJT,cAAe,CAHf,WAAY,CACZ,sCAAyC,CACzC,iBAmBF,CAXE,sCACE,UACF,CAEA,uCACE,UACF,CAEA,yCACE,cACF,CAIF,mCAIE,2BAA4B,CAH5B,WAAY,CAEZ,qCAAsC,CADtC,eAgBF,CAZE,gDAEE,0BAA2B,CAD3B,qCAEF,CAEA,+CACE,uBAKF,CAHE,wDACE,aACF,CAMJ,yBAEE,+FAAiG,CACjG,+CAAgD,CAFhD,4BAOF,CAHE,kCACE,8BACF,CAGF,0BAEE,yFAA2F,CAC3F,4CAA6C,CAF7C,4BAOF,CAHE,mCACE,2BACF,CAGF,4BAEE,2FAA6F,CAC7F,6CAA8C,CAF9C,4BAOF,CAHE,qCACE,4BACF,CAKF,yBAGE,eAAgB,CADhB,sCAAuC,CADvC,2CAGF,CAGA,cAOE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,YAAa,CAJb,cAAe,CACf,KAAM,CAEN,UAAW,CADX,UAMF,CAGA,0BAEE,uCACF,CAGA,SAIE,+CAAgD,CADhD,4CAA6C,CAD7C,kBAAoB,CADpB,YAIF","file":"flash.css","sourcesContent":["/* stylelint-disable primer/spacing */\n\n/* flash */\n\n/* Default flash */\n.flash:not(.Banner) {\n  position: relative;\n  padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);\n\n  /* Default color */\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));\n  border-color: var(--borderColor-accent-muted);\n  border-style: solid;\n  border-width: var(--borderWidth-thin);\n  border-radius: var(--borderRadius-medium);\n\n  & .octicon {\n    margin-right: var(--base-size-12);\n    color: var(--fgColor-accent);\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & p:last-child {\n    margin-bottom: 0;\n  }\n}\n\n/* Contain the flash messages */\n.flash-messages {\n  margin-bottom: var(--stack-gap-spacious);\n}\n\n/* Close button */\n.flash-close:not(.Banner-close) {\n  float: right;\n  margin-top: calc(var(--base-size-4) * -1);\n  text-align: center;\n  cursor: pointer;\n\n  /* Undo `<button>` styles */\n  background: none;\n  border: 0;\n  appearance: none;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &:active {\n    opacity: 0.5;\n  }\n\n  & .octicon {\n    margin-right: 0;\n  }\n}\n\n/* Action button */\n.flash-action:not(.Banner-actions) {\n  float: right;\n  margin-top: -3px;\n  margin-left: var(--stack-gap-spacious);\n  background-clip: padding-box;\n\n  &.btn .octicon {\n    margin-right: var(--control-small-gap);\n    color: var(--fgColor-muted);\n  }\n\n  &.btn-primary {\n    background-clip: border-box;\n\n    & .octicon {\n      color: inherit;\n    }\n  }\n}\n\n/* Color variations */\n\n.flash-warn:not(.Banner) {\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));\n  border-color: var(--borderColor-attention-muted);\n\n  & .octicon {\n    color: var(--fgColor-attention);\n  }\n}\n\n.flash-error:not(.Banner) {\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));\n  border-color: var(--borderColor-danger-muted);\n\n  & .octicon {\n    color: var(--fgColor-danger);\n  }\n}\n\n.flash-success:not(.Banner) {\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));\n  border-color: var(--borderColor-success-muted);\n\n  & .octicon {\n    color: var(--fgColor-success);\n  }\n}\n\n/* Layout variations */\n\n.flash-full:not(.Banner) {\n  margin-top: calc(var(--borderWidth-thin) * -1);\n  border-width: var(--borderWidth-thin) 0;\n  border-radius: 0;\n}\n\n/* A banner rendered at the top of the page. */\n.flash-banner {\n  position: fixed;\n  top: 0;\n  z-index: 90;\n  width: 100%;\n  border-top: 0;\n  border-right: 0;\n  border-left: 0;\n  border-radius: 0;\n}\n\n/* Makes sure the background is opaque to cover any content underneath */\n.flash-full,\n.flash-banner {\n  background-color: var(--bgColor-default);\n}\n\n/* FIXME deprecate this */\n.warning {\n  padding: 0.5em;\n  margin-bottom: 0.8em;\n  font-weight: var(--base-text-weight-semibold);\n  background-color: var(--bgColor-attention-muted);\n}\n"]}
+{"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAKA,oBAME,yFAA2F,CAC3F,4CAA6C,CAG7C,wCAAyC,CAFzC,kBAAmB,CACnB,oCAAqC,CAJrC,4BAA6B,CAH7B,wEAAyE,CADzE,iBAoBF,CATE,6BAEE,2BAA4B,CAD5B,gCAEF,CAGA,iCACE,eACF,CAIF,gBACE,uCACF,CAGA,gCASE,eAAgB,CAFhB,eAAgB,CAChB,QAAS,CAJT,cAAe,CAHf,WAAY,CACZ,sCAAyC,CACzC,iBAmBF,CAXE,sCACE,UACF,CAEA,uCACE,UACF,CAEA,yCACE,cACF,CAIF,mCAIE,2BAA4B,CAH5B,WAAY,CAEZ,qCAAsC,CADtC,eAgBF,CAZE,gDAEE,0BAA2B,CAD3B,qCAEF,CAEA,+CACE,uBAKF,CAHE,wDACE,aACF,CAMJ,yBAEE,+FAAiG,CACjG,+CAAgD,CAFhD,4BAOF,CAHE,kCACE,8BACF,CAGF,0BAEE,yFAA2F,CAC3F,4CAA6C,CAF7C,4BAOF,CAHE,mCACE,2BACF,CAGF,4BAEE,2FAA6F,CAC7F,6CAA8C,CAF9C,4BAOF,CAHE,qCACE,4BACF,CAKF,yBAGE,eAAgB,CADhB,sCAAuC,CADvC,2CAGF,CAGA,cAOE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,YAAa,CAJb,cAAe,CACf,KAAM,CAEN,UAAW,CADX,UAMF,CAGA,0BAEE,uCACF,CAGA,SAIE,+CAAgD,CADhD,4CAA6C,CAD7C,kBAAoB,CADpB,YAIF","file":"flash.css","sourcesContent":["/* stylelint-disable primer/spacing */\n\n/* flash */\n\n/* Default flash */\n.flash:not(.Banner) {\n  position: relative;\n  padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);\n\n  /* Default color */\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));\n  border-color: var(--borderColor-accent-muted);\n  border-style: solid;\n  border-width: var(--borderWidth-thin);\n  border-radius: var(--borderRadius-medium);\n\n  & .octicon {\n    margin-right: var(--base-size-12);\n    color: var(--fgColor-accent);\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & p:last-child {\n    margin-bottom: 0;\n  }\n}\n\n/* Contain the flash messages */\n.flash-messages {\n  margin-bottom: var(--stack-gap-spacious);\n}\n\n/* Close button */\n.flash-close:not(.Banner-close) {\n  float: right;\n  margin-top: calc(var(--base-size-4) * -1);\n  text-align: center;\n  cursor: pointer;\n\n  /* Undo `<button>` styles */\n  background: none;\n  border: 0;\n  appearance: none;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &:active {\n    opacity: 0.5;\n  }\n\n  & .octicon {\n    margin-right: 0;\n  }\n}\n\n/* Action button */\n.flash-action:not(.Banner-actions) {\n  float: right;\n  margin-top: -3px;\n  margin-left: var(--stack-gap-spacious);\n  background-clip: padding-box;\n\n  &.btn .octicon {\n    margin-right: var(--control-small-gap);\n    color: var(--fgColor-muted);\n  }\n\n  &.btn-primary {\n    background-clip: border-box;\n\n    & .octicon {\n      color: inherit;\n    }\n  }\n}\n\n/* Color variations */\n\n.flash-warn:not(.Banner) {\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));\n  border-color: var(--borderColor-attention-muted);\n\n  & .octicon {\n    color: var(--fgColor-attention);\n  }\n}\n\n.flash-error:not(.Banner) {\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));\n  border-color: var(--borderColor-danger-muted);\n\n  & .octicon {\n    color: var(--fgColor-danger);\n  }\n}\n\n.flash-success:not(.Banner) {\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));\n  border-color: var(--borderColor-success-muted);\n\n  & .octicon {\n    color: var(--fgColor-success);\n  }\n}\n\n/* Layout variations */\n\n.flash-full:not(.Banner) {\n  margin-top: calc(var(--borderWidth-thin) * -1);\n  border-width: var(--borderWidth-thin) 0;\n  border-radius: 0;\n}\n\n/* A banner rendered at the top of the page. */\n.flash-banner {\n  position: fixed;\n  top: 0;\n  z-index: 90;\n  width: 100%;\n  border-top: 0;\n  border-right: 0;\n  border-left: 0;\n  border-radius: 0;\n}\n\n/* Makes sure the background is opaque to cover any content underneath */\n.flash-full,\n.flash-banner {\n  background-color: var(--bgColor-default);\n}\n\n/* FIXME deprecate this */\n.warning {\n  padding: 0.5em;\n  margin-bottom: 0.8em;\n  font-weight: var(--base-text-weight-semibold);\n  background-color: var(--bgColor-attention-muted);\n}\n"]}

data/app/components/primer/open_project/border_box/collapsible_header.d.ts

@@ -1,13 +1,7 @@
-declare class CollapsibleHeaderElement extends HTMLElement {
-    arrowDown: HTMLElement;
-    arrowUp: HTMLElement;
-    description: HTMLElement | undefined;
-    collapsed: string;
-    private _collapsed;
+import { CollapsibleElement } from '../collapsible';
+declare class CollapsibleHeaderElement extends CollapsibleElement {
     connectedCallback(): void;
-    toggle(): void;
-    private hideAll;
-    private expandAll;
+    get baseClass(): string;
 }
 declare global {
     interface Window {

data/app/components/primer/open_project/border_box/collapsible_header.html.erb

@@ -1,16 +1,16 @@
 <%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
   <%= render(Primer::OpenProject::FlexLayout.new) do |flex| %>
     <%= flex.with_row do %>
-      <%= render(Primer::Beta::Text.new(mr: 2) ) { @title } %>
-      <% if @count.present? %>
-        <%= render(Primer::Beta::Counter.new(count: @count, mr: 2, scheme: :primary)) %>
+      <%= title %>
+      <% if count? %>
+        <%= count %>
       <% end %>
       <%= render(Primer::Beta::Octicon.new(icon: "chevron-up", data: { target: "collapsible-header.arrowUp" })) %>
-      <%= render(Primer::Beta::Octicon.new(icon: "chevron-down", display: :none, data: { target: "collapsible-header.arrowDown" })) %>
+      <%= render(Primer::Beta::Octicon.new(icon: "chevron-down", hidden: true, data: { target: "collapsible-header.arrowDown" })) %>
     <% end %>
     <%= flex.with_row do %>
-      <% if @description.present? %>
-        <%= render(Primer::Beta::Text.new(color: :subtle, data: { target: "collapsible-header.description" }) ) { @description } %>
+      <% if description? %>
+        <%= description %>
       <% end %>
     <% end %>
   <% end %>

data/app/components/primer/open_project/border_box/collapsible_header.js

@@ -4,59 +4,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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;
 };
-import { attr, controller, target } from '@github/catalyst';
-let CollapsibleHeaderElement = class CollapsibleHeaderElement extends HTMLElement {
+import { controller } from '@github/catalyst';
+import { CollapsibleElement } from '../collapsible';
+let CollapsibleHeaderElement = class CollapsibleHeaderElement extends CollapsibleElement {
     connectedCallback() {
         if (!this.closest('.Box')) {
             throw new Error('No surrounding BorderBox found');
         }
-        if (this.collapsed === 'true') {
-            this._collapsed = true;
-            this.hideAll();
-        }
-        else {
-            this._collapsed = false;
-        }
-    }
-    toggle() {
-        if (this._collapsed) {
-            this._collapsed = false;
-            this.expandAll();
-        }
-        else {
-            this._collapsed = true;
-            this.hideAll();
-        }
-    }
-    hideAll() {
-        this.arrowDown?.classList.remove('d-none');
-        this.arrowUp?.classList.add('d-none');
-        this.description?.classList.add('d-none');
-        this.classList.add('CollapsibleHeader--collapsed');
     }
-    expandAll() {
-        this.arrowDown?.classList.add('d-none');
-        this.arrowUp?.classList.remove('d-none');
-        this.description?.classList.remove('d-none');
-        this.classList.remove('CollapsibleHeader--collapsed');
+    get baseClass() {
+        return 'CollapsibleHeader';
     }
 };
-__decorate([
-    target
-], CollapsibleHeaderElement.prototype, "arrowDown", void 0);
-__decorate([
-    target
-], CollapsibleHeaderElement.prototype, "arrowUp", void 0);
-__decorate([
-    target
-], CollapsibleHeaderElement.prototype, "description", void 0);
-__decorate([
-    attr
-], CollapsibleHeaderElement.prototype, "collapsed", void 0);
 CollapsibleHeaderElement = __decorate([
     controller
 ], CollapsibleHeaderElement);
-if (!window.customElements.get('collapsible-header')) {
-    window.CollapsibleHeaderElement = CollapsibleHeaderElement;
-    window.customElements.define('collapsible-header', CollapsibleHeaderElement);
-}

data/app/components/primer/open_project/border_box/collapsible_header.rb

@@ -8,11 +8,45 @@ module Primer
       class CollapsibleHeader < Primer::Component
         status :open_project
 
+        # Required title
+        #
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-        def initialize(title:, count: nil, description: nil, collapsed: false, box:, **system_arguments)
-          @title = title
-          @count = count
-          @description = description
+        renders_one :title, lambda { |**system_arguments, &block|
+          system_arguments[:mr] ||= 2
+
+          Primer::Beta::Text.new(**system_arguments, &block)
+        }
+
+        # Optional count
+        #
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        renders_one :count, lambda { |**system_arguments|
+          system_arguments[:mr] ||= 2
+          system_arguments[:scheme] ||= :primary
+
+          Primer::Beta::Counter.new(**system_arguments)
+        }
+
+        # Optional description
+        #
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        renders_one :description, lambda { |**system_arguments, &block|
+          system_arguments[:color] ||= :subtle
+          system_arguments[:data] = merge_data(
+            system_arguments, {
+            data: {
+                targets: "collapsible-header.collapsibleElements"
+              }
+            }
+          )
+
+          Primer::Beta::Text.new(**system_arguments, &block)
+        }
+
+
+        # @param collapsed [Boolean] Whether the header is collapsed on initial render.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(collapsed: false, box:, **system_arguments)
           @collapsed = collapsed
           @box = box
           @system_arguments = system_arguments
@@ -26,10 +60,10 @@ module Primer
           @system_arguments[:data] = merge_data(
             @system_arguments, {
             data: {
-              action: "click:collapsible-header#toggle",
-              collapsed: @collapsed
+              action: "click:collapsible-header#toggle"
             } }
           )
+          @system_arguments[:data][:collapsed] = true if @collapsed
         end
 
         private
@@ -39,9 +73,7 @@ module Primer
         end
 
         def render?
-          raise ArgumentError, "Title must be present" unless @title.present?
-          raise ArgumentError, "Description cannot be a blank string" unless @description.present? || @description.nil?
-          raise ArgumentError, "Count cannot be a blank string" unless @count.present? || @count.nil?
+          raise ArgumentError, "Title must be present" unless title?
           raise ArgumentError, "This component must be called inside the header of a `Primer::Beta::BorderBox`" unless @box.present? && @box.is_a?(Primer::Beta::BorderBox)
 
           true

data/app/components/primer/open_project/border_box/collapsible_header.ts

@@ -1,53 +1,16 @@
-import {attr, controller, target} from '@github/catalyst'
+import {controller} from '@github/catalyst'
+import {CollapsibleElement} from '../collapsible'
 
 @controller
-class CollapsibleHeaderElement extends HTMLElement {
-  @target arrowDown: HTMLElement
-  @target arrowUp: HTMLElement
-  @target description: HTMLElement | undefined
-
-  @attr collapsed: string
-  private _collapsed: boolean
-
+class CollapsibleHeaderElement extends CollapsibleElement {
   connectedCallback() {
     if (!this.closest('.Box')) {
       throw new Error('No surrounding BorderBox found')
     }
-
-    if (this.collapsed === 'true') {
-      this._collapsed = true
-      this.hideAll()
-    } else {
-      this._collapsed = false
-    }
   }
 
-  public toggle() {
-    if (this._collapsed) {
-      this._collapsed = false
-      this.expandAll()
-    } else {
-      this._collapsed = true
-      this.hideAll()
-    }
-  }
-
-  private hideAll() {
-    this.arrowDown?.classList.remove('d-none')
-    this.arrowUp?.classList.add('d-none')
-
-    this.description?.classList.add('d-none')
-
-    this.classList.add('CollapsibleHeader--collapsed')
-  }
-
-  private expandAll() {
-    this.arrowDown?.classList.add('d-none')
-    this.arrowUp?.classList.remove('d-none')
-
-    this.description?.classList.remove('d-none')
-
-    this.classList.remove('CollapsibleHeader--collapsed')
+  get baseClass(): string {
+    return 'CollapsibleHeader'
   }
 }
 
@@ -56,8 +19,3 @@ declare global {
     CollapsibleHeaderElement: typeof CollapsibleHeaderElement
   }
 }
-
-if (!window.customElements.get('collapsible-header')) {
-  window.CollapsibleHeaderElement = CollapsibleHeaderElement
-  window.customElements.define('collapsible-header', CollapsibleHeaderElement)
-}

data/app/components/primer/open_project/collapsible.d.ts

@@ -0,0 +1,11 @@
+export declare abstract class CollapsibleElement extends HTMLElement {
+    arrowDown: Element;
+    arrowUp: Element;
+    collapsibleElements: HTMLElement[];
+    collapsed: boolean;
+    toggle(): void;
+    attributeChangedCallback(name: string): void;
+    hideAll(): void;
+    expandAll(): void;
+    abstract get baseClass(): string;
+}

data/app/components/primer/open_project/collapsible.js

@@ -0,0 +1,56 @@
+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;
+};
+import { attr, target, targets } from '@github/catalyst';
+// eslint-disable-next-line custom-elements/expose-class-on-global
+export class CollapsibleElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.collapsed = false;
+    }
+    toggle() {
+        this.collapsed = !this.collapsed;
+    }
+    attributeChangedCallback(name) {
+        if (name === 'data-collapsed') {
+            if (this.collapsed) {
+                this.hideAll();
+            }
+            else {
+                this.expandAll();
+            }
+        }
+    }
+    hideAll() {
+        // For whatever reason, setting `hidden` directly does not work on the SVGs
+        this.arrowDown.removeAttribute('hidden');
+        this.arrowUp.setAttribute('hidden', '');
+        for (const el of this.collapsibleElements) {
+            el.hidden = true;
+        }
+        this.classList.add(`${this.baseClass}--collapsed`);
+    }
+    expandAll() {
+        this.arrowUp.removeAttribute('hidden');
+        this.arrowDown.setAttribute('hidden', '');
+        for (const el of this.collapsibleElements) {
+            el.hidden = false;
+        }
+        this.classList.remove(`${this.baseClass}--collapsed`);
+    }
+}
+__decorate([
+    target
+], CollapsibleElement.prototype, "arrowDown", void 0);
+__decorate([
+    target
+], CollapsibleElement.prototype, "arrowUp", void 0);
+__decorate([
+    targets
+], CollapsibleElement.prototype, "collapsibleElements", void 0);
+__decorate([
+    attr
+], CollapsibleElement.prototype, "collapsed", void 0);

data/app/components/primer/open_project/collapsible.ts

@@ -0,0 +1,49 @@
+import {attr, target, targets} from '@github/catalyst'
+
+// eslint-disable-next-line custom-elements/expose-class-on-global
+export abstract class CollapsibleElement extends HTMLElement {
+  @target arrowDown: Element
+  @target arrowUp: Element
+  @targets collapsibleElements: HTMLElement[]
+
+  @attr collapsed = false
+
+  toggle() {
+    this.collapsed = !this.collapsed
+  }
+
+  attributeChangedCallback(name: string) {
+    if (name === 'data-collapsed') {
+      if (this.collapsed) {
+        this.hideAll()
+      } else {
+        this.expandAll()
+      }
+    }
+  }
+
+  hideAll() {
+    // For whatever reason, setting `hidden` directly does not work on the SVGs
+    this.arrowDown.removeAttribute('hidden')
+    this.arrowUp.setAttribute('hidden', '')
+
+    for (const el of this.collapsibleElements) {
+      el.hidden = true
+    }
+
+    this.classList.add(`${this.baseClass}--collapsed`)
+  }
+
+  expandAll() {
+    this.arrowUp.removeAttribute('hidden')
+    this.arrowDown.setAttribute('hidden', '')
+
+    for (const el of this.collapsibleElements) {
+      el.hidden = false
+    }
+
+    this.classList.remove(`${this.baseClass}--collapsed`)
+  }
+
+  abstract get baseClass(): string
+}

data/app/components/primer/open_project/collapsible_section.css

@@ -0,0 +1 @@
+.CollapsibleSection--triggerArea{cursor:pointer}

data/app/components/primer/open_project/collapsible_section.css.json

@@ -0,0 +1,6 @@
+{
+  "name": "open_project/collapsible_section",
+  "selectors": [
+    ".CollapsibleSection--triggerArea"
+  ]
+}

data/app/components/primer/open_project/collapsible_section.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["collapsible_section.pcss"],"names":[],"mappings":"AAEA,iCACI,cACJ","file":"collapsible_section.css","sourcesContent":["/* CSS for CollapsibleSection  */\n\n.CollapsibleSection--triggerArea {\n    cursor: pointer;\n}\n"]}

data/app/components/primer/open_project/collapsible_section.d.ts

@@ -0,0 +1,10 @@
+import { CollapsibleElement } from './collapsible';
+declare class CollapsibleSectionElement extends CollapsibleElement {
+    get baseClass(): string;
+}
+declare global {
+    interface Window {
+        CollapsibleSectionElement: typeof CollapsibleSectionElement;
+    }
+}
+export {};

data/app/components/primer/open_project/collapsible_section.html.erb

@@ -0,0 +1,26 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <%= render(Primer::OpenProject::FlexLayout.new) do |flex| %>
+    <%= flex.with_row(mb: 3,
+                      classes: "CollapsibleSection--triggerArea",
+                      data: { action: "click:collapsible-section#toggle" }) do %>
+      <%= render(Primer::OpenProject::FlexLayout.new(display: :flex, align_items: :center)) do |header| %>
+        <%= header.with_column do %>
+          <%= title %>
+        <% end %>
+        <%= header.with_column do %>
+          <%= caption %>
+        <% end %>
+        <%= header.with_column do %>
+          <%= render(Primer::Beta::Octicon.new(icon: "chevron-up", data: { target: "collapsible-section.arrowUp" })) %>
+          <%= render(Primer::Beta::Octicon.new(icon: "chevron-down", hidden: true, data: { target: "collapsible-section.arrowDown" })) %>
+        <% end %>
+        <%= header.with_column(flex: 1, text_align: :right) do %>
+          <%= additional_information %>
+        <% end %>
+      <% end %>
+    <% end %>
+    <%= flex.with_row(data: { targets: "collapsible-section.collapsibleElements" }) do %>
+      <%= collapsible_content %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/primer/open_project/collapsible_section.js

@@ -0,0 +1,16 @@
+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;
+};
+import { controller } from '@github/catalyst';
+import { CollapsibleElement } from './collapsible';
+let CollapsibleSectionElement = class CollapsibleSectionElement extends CollapsibleElement {
+    get baseClass() {
+        return 'CollapsibleSection';
+    }
+};
+CollapsibleSectionElement = __decorate([
+    controller
+], CollapsibleSectionElement);

data/app/components/primer/open_project/collapsible_section.pcss

@@ -0,0 +1,5 @@
+/* CSS for CollapsibleSection  */
+
+.CollapsibleSection--triggerArea {
+    cursor: pointer;
+}

data/app/components/primer/open_project/collapsible_section.rb

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # A component consisting of a title and collapsible content.
+    # Clicking the title will hide the collapsible content
+    class CollapsibleSection < Primer::Component
+      status :open_project
+
+      TITLE_TAG_FALLBACK = :h2
+      TITLE_TAG_OPTIONS = [:h1, TITLE_TAG_FALLBACK, :h3, :h4, :h5, :h6, :span].freeze
+
+      # Required Title
+      #
+      # @param tag [Symbol] Customize the element type of the rendered title container.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :title, lambda { |tag: TITLE_TAG_FALLBACK, **system_arguments, &block|
+        system_arguments[:tag] = fetch_or_fallback(TITLE_TAG_OPTIONS, tag, TITLE_TAG_FALLBACK)
+        system_arguments[:font_size] ||= 3
+        system_arguments[:mr] ||= 2
+
+        Primer::OpenProject::Heading.new(**system_arguments, &block)
+      }
+
+      # Optional caption
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :caption, lambda { |**system_arguments, &block|
+        system_arguments[:color] ||= :subtle
+        system_arguments[:mr] ||= 2
+        system_arguments[:display] ||= [:none, :block]
+
+        Primer::Beta::Text.new(**system_arguments, &block)
+      }
+
+      # Optional right-side content
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :additional_information, lambda { |**system_arguments|
+        Primer::BaseComponent.new(tag: :div, **system_arguments)
+      }
+
+      # Required collapsible content
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :collapsible_content, lambda { |**system_arguments|
+        Primer::BaseComponent.new(tag: :div, **system_arguments)
+      }
+
+      # @param collapsed [Boolean] Whether the section is collapsed on initial render.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(collapsed: false, **system_arguments)
+        @collapsed = collapsed
+
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = "collapsible-section"
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "CollapsibleSection",
+          "CollapsibleSection--collapsed" => @collapsed
+        )
+
+        @system_arguments[:data] ||= {}
+        @system_arguments[:data][:collapsed] = true if @collapsed
+      end
+
+      private
+
+      def render?
+        raise ArgumentError, "Title must be present" unless title.present?
+        raise ArgumentError, "Collapsible content must be present" unless collapsible_content.present?
+
+        true
+      end
+    end
+  end
+end

data/app/components/primer/open_project/collapsible_section.ts

@@ -0,0 +1,15 @@
+import {controller} from '@github/catalyst'
+import {CollapsibleElement} from './collapsible'
+
+@controller
+class CollapsibleSectionElement extends CollapsibleElement {
+  get baseClass(): string {
+    return 'CollapsibleSection'
+  }
+}
+
+declare global {
+  interface Window {
+    CollapsibleSectionElement: typeof CollapsibleSectionElement
+  }
+}

data/app/components/primer/open_project/input_group.css

@@ -1 +1 @@
-.InputGroup.InputGroup-input-width--auto{width:auto}.InputGroup.InputGroup-input-width--small{max-width:min(256px,100vw - 2rem)}.InputGroup.InputGroup-input-width--medium{max-width:min(320px,100vw - 2rem)}.InputGroup.InputGroup-input-width--large{max-width:min(480px,100vw - 2rem)}.InputGroup.InputGroup-input-width--xlarge{max-width:min(640px,100vw - 2rem)}.InputGroup.InputGroup-input-width--xxlarge{max-width:min(960px,100vw - 2rem)}
+.InputGroup.InputGroup-input-width--auto{width:auto}.InputGroup.InputGroup-input-width--xsmall{max-width:min(144px,100vw - 2rem)}.InputGroup.InputGroup-input-width--small{max-width:min(256px,100vw - 2rem)}.InputGroup.InputGroup-input-width--medium{max-width:min(320px,100vw - 2rem)}.InputGroup.InputGroup-input-width--large{max-width:min(480px,100vw - 2rem)}.InputGroup.InputGroup-input-width--xlarge{max-width:min(680px,100vw - 2rem)}.InputGroup.InputGroup-input-width--xxlarge{max-width:min(960px,100vw - 2rem)}

data/app/components/primer/open_project/input_group.css.json

@@ -2,6 +2,7 @@
   "name": "open_project/input_group",
   "selectors": [
     ".InputGroup.InputGroup-input-width--auto",
+    ".InputGroup.InputGroup-input-width--xsmall",
     ".InputGroup.InputGroup-input-width--small",
     ".InputGroup.InputGroup-input-width--medium",
     ".InputGroup.InputGroup-input-width--large",

data/app/components/primer/open_project/input_group.css.map

@@ -1 +1 @@
-{"version":3,"sources":["input_group.pcss"],"names":[],"mappings":"AACI,yCACI,UACJ,CAEA,0CACI,iCACJ,CAEA,2CACI,iCACJ,CAEA,0CACI,iCACJ,CAEA,2CACI,iCACJ,CAEA,4CACI,iCACJ","file":"input_group.css","sourcesContent":[".InputGroup {\n    &.InputGroup-input-width--auto {\n        width: auto;\n    }\n\n    &.InputGroup-input-width--small {\n        max-width: min(256px, 100vw - 2rem);\n    }\n\n    &.InputGroup-input-width--medium {\n        max-width: min(320px, 100vw - 2rem);\n    }\n\n    &.InputGroup-input-width--large {\n        max-width: min(480px, 100vw - 2rem);\n    }\n\n    &.InputGroup-input-width--xlarge {\n        max-width: min(640px, 100vw - 2rem);\n    }\n\n    &.InputGroup-input-width--xxlarge {\n        max-width: min(960px, 100vw - 2rem);\n    }\n}\n"]}
+{"version":3,"sources":["input_group.pcss"],"names":[],"mappings":"AACI,yCACI,UACJ,CAEA,2CACI,iCACJ,CAEA,0CACI,iCACJ,CAEA,2CACI,iCACJ,CAEA,0CACI,iCACJ,CAEA,2CACI,iCACJ,CAEA,4CACI,iCACJ","file":"input_group.css","sourcesContent":[".InputGroup {\n    &.InputGroup-input-width--auto {\n        width: auto;\n    }\n\n    &.InputGroup-input-width--xsmall {\n        max-width: min(144px, 100vw - 2rem);\n    }\n\n    &.InputGroup-input-width--small {\n        max-width: min(256px, 100vw - 2rem);\n    }\n\n    &.InputGroup-input-width--medium {\n        max-width: min(320px, 100vw - 2rem);\n    }\n\n    &.InputGroup-input-width--large {\n        max-width: min(480px, 100vw - 2rem);\n    }\n\n    &.InputGroup-input-width--xlarge {\n        max-width: min(680px, 100vw - 2rem);\n    }\n\n    &.InputGroup-input-width--xxlarge {\n        max-width: min(960px, 100vw - 2rem);\n    }\n}\n"]}

data/app/components/primer/open_project/input_group.pcss

@@ -3,6 +3,10 @@
         width: auto;
     }
 
+    &.InputGroup-input-width--xsmall {
+        max-width: min(144px, 100vw - 2rem);
+    }
+
     &.InputGroup-input-width--small {
         max-width: min(256px, 100vw - 2rem);
     }
@@ -16,7 +20,7 @@
     }
 
     &.InputGroup-input-width--xlarge {
-        max-width: min(640px, 100vw - 2rem);
+        max-width: min(680px, 100vw - 2rem);
     }
 
     &.InputGroup-input-width--xxlarge {