primer_view_components 0.0.112 → 0.0.113

Sign up to get free protection for your applications and to get access to all the features.
Files changed (113) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +38 -0
  3. data/app/assets/javascripts/primer_view_components.js +1 -1
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  5. data/app/assets/styles/primer_view_components.css +3 -1
  6. data/app/assets/styles/primer_view_components.css.map +1 -1
  7. data/app/components/primer/alpha/action_list.css +1 -1
  8. data/app/components/primer/alpha/action_list.css.json +1 -1
  9. data/app/components/primer/alpha/action_list.css.map +1 -1
  10. data/app/components/primer/alpha/action_list.pcss +0 -15
  11. data/app/components/primer/alpha/auto_complete.css +1 -1
  12. data/app/components/primer/alpha/auto_complete.css.map +1 -1
  13. data/app/components/primer/alpha/auto_complete.pcss +1 -1
  14. data/app/components/primer/alpha/banner.css +1 -1
  15. data/app/components/primer/alpha/banner.css.map +1 -1
  16. data/app/components/primer/alpha/banner.pcss +2 -2
  17. data/app/components/primer/alpha/dialog/body.rb +3 -0
  18. data/app/components/primer/alpha/dialog/footer.rb +3 -0
  19. data/app/components/primer/alpha/dialog/header.rb +3 -0
  20. data/app/components/primer/alpha/dialog.css +1 -0
  21. data/app/components/primer/alpha/dialog.css.json +1 -0
  22. data/app/components/primer/alpha/dialog.css.map +1 -0
  23. data/app/components/primer/alpha/dialog.pcss +484 -0
  24. data/app/components/primer/alpha/dialog.rb +3 -0
  25. data/app/components/primer/alpha/segmented_control.css +1 -1
  26. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  27. data/app/components/primer/alpha/text_field.css +3 -0
  28. data/app/components/primer/alpha/text_field.css.json +1 -0
  29. data/app/components/primer/alpha/text_field.css.map +1 -0
  30. data/app/components/primer/alpha/text_field.pcss +683 -0
  31. data/app/components/primer/alpha/toggle_switch.d.ts +1 -1
  32. data/app/components/primer/alpha/toggle_switch.js +7 -4
  33. data/app/components/primer/alpha/toggle_switch.ts +7 -3
  34. data/app/components/primer/beta/button_group.css +1 -0
  35. data/app/components/primer/beta/button_group.css.json +1 -0
  36. data/app/components/primer/beta/button_group.css.map +1 -0
  37. data/app/components/primer/beta/button_group.pcss +92 -0
  38. data/app/components/primer/{clipboard_copy.d.ts → beta/clipboard_copy.d.ts} +0 -0
  39. data/app/components/primer/{clipboard_copy.html.erb → beta/clipboard_copy.html.erb} +0 -0
  40. data/app/components/primer/{clipboard_copy.js → beta/clipboard_copy.js} +0 -0
  41. data/app/components/primer/beta/clipboard_copy.rb +50 -0
  42. data/app/components/primer/{clipboard_copy.ts → beta/clipboard_copy.ts} +0 -0
  43. data/app/components/primer/beta/popover.css.map +1 -1
  44. data/app/components/primer/beta/popover.pcss +5 -5
  45. data/app/components/primer/beta/relative_time.rb +160 -0
  46. data/app/components/primer/button_component.css +1 -0
  47. data/app/components/primer/button_component.css.json +1 -0
  48. data/app/components/primer/button_component.css.map +1 -0
  49. data/app/components/primer/button_component.pcss +557 -0
  50. data/app/components/primer/button_component.rb +1 -1
  51. data/app/components/primer/clipboard_copy.rb +2 -43
  52. data/app/components/primer/component.rb +4 -0
  53. data/app/components/primer/local_time.d.ts +1 -1
  54. data/app/components/primer/local_time.js +1 -1
  55. data/app/components/primer/local_time.rb +3 -1
  56. data/app/components/primer/local_time.ts +1 -1
  57. data/app/components/primer/primer.d.ts +1 -1
  58. data/app/components/primer/primer.js +1 -1
  59. data/app/components/primer/primer.pcss +10 -0
  60. data/app/components/primer/primer.ts +1 -1
  61. data/app/components/primer/time_ago_component.d.ts +1 -1
  62. data/app/components/primer/time_ago_component.js +1 -1
  63. data/app/components/primer/time_ago_component.rb +2 -1
  64. data/app/components/primer/time_ago_component.ts +1 -1
  65. data/app/forms/submit_button_form.rb +8 -2
  66. data/app/helpers/primer/form_helper.rb +12 -0
  67. data/lib/postcss_mixins/clearfix.pcss +12 -0
  68. data/lib/primer/deprecations.rb +96 -26
  69. data/lib/primer/deprecations.yml +68 -0
  70. data/lib/primer/forms/base.rb +7 -20
  71. data/lib/primer/forms/base_component.rb +15 -1
  72. data/lib/primer/forms/button.html.erb +4 -0
  73. data/lib/primer/forms/button.rb +68 -0
  74. data/lib/primer/forms/check_box.html.erb +2 -2
  75. data/lib/primer/forms/check_box.rb +1 -1
  76. data/lib/primer/forms/check_box_group.html.erb +2 -2
  77. data/lib/primer/forms/dsl/button_input.rb +29 -0
  78. data/lib/primer/forms/dsl/input_methods.rb +7 -2
  79. data/lib/primer/forms/dsl/submit_button_input.rb +1 -0
  80. data/lib/primer/forms/dsl/text_field_input.rb +0 -7
  81. data/lib/primer/forms/radio_button.html.erb +2 -2
  82. data/lib/primer/forms/radio_button.rb +1 -1
  83. data/lib/primer/forms/radio_button_group.html.erb +2 -2
  84. data/lib/primer/forms/select_list.html.erb +1 -1
  85. data/lib/primer/forms/select_list.rb +4 -1
  86. data/lib/primer/forms/submit_button.html.erb +1 -4
  87. data/lib/primer/forms/submit_button.rb +1 -37
  88. data/lib/primer/forms/text_area.html.erb +1 -1
  89. data/lib/primer/forms/text_area.rb +5 -1
  90. data/lib/primer/forms/text_field.html.erb +1 -1
  91. data/lib/primer/forms/text_field.rb +11 -0
  92. data/lib/primer/forms/utils.rb +28 -0
  93. data/lib/primer/view_components/audited.rb +14 -0
  94. data/lib/primer/view_components/engine.rb +1 -0
  95. data/lib/primer/view_components/linters/clipboard_copy_component_migration_counter.rb +2 -2
  96. data/lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb +3 -18
  97. data/lib/primer/view_components/version.rb +1 -1
  98. data/lib/rubocop/cop/primer/component_name_migration.rb +2 -2
  99. data/lib/tasks/docs.rake +3 -2
  100. data/previews/primer/alpha/auto_complete_preview.rb +12 -0
  101. data/previews/primer/alpha/segmented_control_preview.rb +9 -6
  102. data/previews/primer/alpha/text_field_preview.rb +77 -52
  103. data/previews/primer/beta/clipboard_copy_preview/element.html.erb +2 -0
  104. data/previews/primer/beta/clipboard_copy_preview.rb +39 -0
  105. data/previews/primer/beta/relative_time_preview.rb +271 -0
  106. data/previews/primer/forms/forms_preview.rb +1 -0
  107. data/static/arguments.json +143 -33
  108. data/static/audited_at.json +6 -4
  109. data/static/constants.json +124 -0
  110. data/static/statuses.json +4 -2
  111. metadata +34 -8
  112. data/previews/primer/clipboard_copy_preview/element.html.erb +0 -2
  113. data/previews/primer/clipboard_copy_preview.rb +0 -37
data/app/components/primer/alpha/action_list.css CHANGED
@@ -1 +1 @@
1
- :root{--primer-actionListContent-paddingBlock:var(--primer-control-medium-paddingBlock,6px)}.ActionListWrap{list-style:none}.ActionListWrap--inset{padding:var(--base-size-8,8px)}.ActionListWrap--divided .ActionListItem-label:before{height:1px}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before,.ActionListWrap--divided .ActionListItem-label:before{background:var(--color-action-list-item-inline-divider);content:"";display:block;position:absolute;top:calc(var(--primer-actionListContent-paddingBlock)*-1);width:100%}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before{height:var(--primer-borderWidth-thin,1px)}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before{content:unset}.ActionList-sectionDivider+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionList-sectionDivider+.ActionListItem .ActionListItem-label:before,.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline:before,.ActionListItem:first-of-type .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive .ActionListItem-label:before,:is(.ActionListWrap--divided .ActionListItem--navActive)+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem{background-color:initial;border-radius:var(--primer-borderRadius-medium,6px);list-style:none;position:relative}.ActionListItem:active,.ActionListItem:hover{cursor:pointer}@media (hover:hover){.ActionListItem:hover .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover .ActionListItem-label:before,.ActionListItem:hover+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover+.ActionListItem .ActionListItem-label:before{visibility:hidden}}.ActionListItem[hidden]+.ActionList-sectionDivider{display:none}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent{z-index:1}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active{background-color:var(--color-action-list-item-default-active-bg)}@media (hover:hover){:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover{background-color:var(--color-action-list-item-default-hover-bg);cursor:pointer}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover:not(.ActionListItem--navActive,:focus-visible){box-shadow:var(--primer-borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:solid var(--primer-borderWidth-thin,1px) #0000;outline-offset:calc(var(--primer-borderWidth-thin, 1px)*-1)}}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active{background:var(--color-action-list-item-default-active-bg)}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active:not(.ActionListItem--navActive){box-shadow:var(--primer-borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:solid var(--primer-borderWidth-thin,1px) #0000;outline-offset:calc(var(--primer-borderWidth-thin, 1px)*-1)}@media screen and (prefers-reduced-motion:no-preference){:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active{animation:ActionListItem-active-bg 4s cubic-bezier(.33,1,.68,1) forwards}}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active{@keyframes ActionListItem-active-bg{50%{box-shadow:inset 0 2px 12px 6px rgba(var(--color-canvas-default),.4);transform:scale(1)}to{transform:scale(.97)}}}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active .ActionListItem-label:before,:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem[aria-checked=true] .ActionListItem-multiSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-multiSelectCheckmark{opacity:1;transition:visibility 0 linear 0,opacity 50ms;visibility:visible}.ActionListItem[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion:no-preference){.ActionListItem[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-singleSelectCheckmark{animation:checkmarkIn .2s cubic-bezier(.11,0,.5,0) forwards}}.ActionListItem[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListItem[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--color-accent-fg);stroke:var(--color-accent-fg);stroke-width:var(--primer-borderWidth-thin,1px)}.ActionListItem[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark{fill:var(--color-fg-on-emphasis)}.ActionListItem[aria-checked=false] .ActionListItem-multiSelectCheckmark,.ActionListItem[aria-selected=false] .ActionListItem-multiSelectCheckmark{opacity:0;transition:visibility 0 linear 50ms,opacity 50ms;visibility:hidden}.ActionListItem[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListItem[aria-selected=false] .ActionListItem-singleSelectCheckmark{clip-path:inset(16px 0 0 0);transition:visibility 0s linear .2s;visibility:hidden}@media screen and (prefers-reduced-motion:no-preference){.ActionListItem[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListItem[aria-selected=false] .ActionListItem-singleSelectCheckmark{animation:checkmarkOut .2s cubic-bezier(.11,0,.5,0) forwards}}.ActionListItem[aria-checked=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListItem[aria-selected=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--color-canvas-default);stroke:var(--color-border-default);stroke-width:var(--primer-borderWidth-thin,1px)}.ActionListItem[aria-checked=false] .ActionListItem-multiSelectIconRect,.ActionListItem[aria-selected=false] .ActionListItem-multiSelectIconRect{fill:var(--color-canvas-default);border:var(--primer-borderWidth-thin,1px) solid var(--color-border-default)}.ActionListItem{@keyframes checkmarkIn{0%{clip-path:inset(16px 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(16px 0 0 0)}}}.ActionListItem[aria-selected=true]{background:var(--color-action-list-item-default-selected-bg);font-weight:var(--base-text-weight-normal,400)}@media (hover:hover){.ActionListItem[aria-selected=true]:hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionListItem[aria-selected=true]+.ActionListItem:before,.ActionListItem[aria-selected=true]:before{visibility:hidden}.ActionListItem[aria-selected=true]:after{background:var(--color-accent-fg);border-radius:var(--primer-borderRadius-medium,6px);content:"";height:var(--base-size-24,24px);left:calc(var(--base-size-4, 4px)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,4px)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--color-action-list-item-default-selected-bg)}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before,.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before{visibility:hidden}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after{background:var(--color-accent-fg);border-radius:var(--primer-borderRadius-medium,6px);content:"";height:var(--base-size-24,24px);left:calc(var(--base-size-8, 8px)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,4px)}.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label{color:var(--color-primer-fg-disabled)}.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill:var(--color-primer-fg-disabled)}@media (hover:hover){.ActionListItem[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}.ActionListItem.ActionListItem--danger .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListItem-visual{color:var(--color-danger-fg)}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--color-action-list-item-danger-hover-bg)}.ActionListItem.ActionListItem--danger:hover .ActionListItem-label{color:var(--color-action-list-item-danger-hover-text)}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--color-action-list-item-danger-active-bg)}.ActionListContent{-webkit-tap-highlight-color:transparent;align-items:start;background-color:initial;border:none;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-default);display:grid;grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:min-content min-content minmax(0,auto) min-content min-content;grid-template-rows:min-content;padding:var(--primer-actionListContent-paddingBlock) var(--primer-control-medium-paddingInline-condensed,8px);position:relative;text-align:left;touch-action:manipulation;transition:background 33.333ms linear;-webkit-user-select:none;user-select:none;width:100%}.ActionListContent>:not(:last-child){margin-right:var(--primer-control-medium-gap,8px)}.ActionListContent:hover{text-decoration:none}.ActionListContent[aria-disabled=true] .ActionListItem-description,.ActionListContent[aria-disabled=true] .ActionListItem-label{color:var(--color-primer-fg-disabled)}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill:var(--color-primer-fg-disabled)}@media (hover:hover){.ActionListContent[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-expanded]+.ActionList--subGroup{transition:opacity .16s cubic-bezier(.25,1,.5,1),transform .16s cubic-bezier(.25,1,.5,1)}}.ActionListContent[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-24,24px)}.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-32,32px)}.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-36,36px)}.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-40,40px)}.ActionListContent[aria-expanded=true] .ActionListItem-collapseIcon{transform:scaleY(-1);transition:transform .12s linear}.ActionListContent[aria-expanded=true]+.ActionList--subGroup{height:auto;opacity:1;overflow:visible;transform:translateY(0);visibility:visible}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=true]>.ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent[aria-expanded=false] .ActionListItem-collapseIcon{transform:scaleY(1);transition:transform .12s linear}.ActionListContent[aria-expanded=false]+.ActionList--subGroup{height:0;opacity:0;overflow:hidden;transform:translateY(calc(var(--base-size-16, 16px)*-1));visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background:var(--color-action-list-item-default-selected-bg)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]+.ActionListItem:before,.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:before{visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after{background:var(--color-accent-fg);border-radius:var(--primer-borderRadius-medium,6px);content:"";height:var(--base-size-24,24px);left:calc(var(--base-size-8, 8px)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,4px)}.ActionListContent.ActionListContent--sizeLarge{--primer-actionListContent-paddingBlock:var(--primer-control-large-paddingBlock,0.625rem)}.ActionListContent.ActionListContent--sizeXLarge{--primer-actionListContent-paddingBlock:var(--primer-control-xlarge-paddingBlock,0.875rem)}@media (pointer:coarse){.ActionListContent{--primer-actionListContent-paddingBlock:var(--primer-control-large-paddingBlock,0.625rem)}}.ActionListContent.ActionListContent--blockDescription .ActionListItem-visual{place-self:start}.ActionListItem-action--leading{grid-area:leadingAction}.ActionListItem-visual--leading{grid-area:leadingVisual}.ActionListItem-visual--trailing{grid-area:trailingVisual}.ActionListItem-action--trailing{grid-area:trailingAction}.ActionListItem-descriptionWrap{display:flex;flex-direction:column;gap:var(--base-size-4,4px);grid-area:label}.ActionListItem-descriptionWrap .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem-descriptionWrap--inline{align-items:baseline;flex-direction:row;gap:var(--base-size-8,8px);position:relative}.ActionListItem-description{color:var(--color-fg-muted);font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-normal,400);line-height:var(--primer-text-body-lineHeight-small,1.66667)}.ActionListItem-action,.ActionListItem-visual{fill:var(--color-fg-muted);align-items:center;color:var(--color-fg-muted);display:flex;min-height:var(--primer-control-medium-lineBoxHeight,20px);pointer-events:none}.ActionListItem-label{color:var(--color-fg-default);font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-normal,400);grid-area:label;line-height:var(--primer-text-body-lineHeight-medium,1.42857);position:relative}.ActionListItem-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionListItem--subItem>.ActionListContent>.ActionListItem-label{font-size:var(--primer-text-body-size-small,12px);line-height:var(--primer-text-body-lineHeight-small,1.66667)}.ActionListItem--withActions{align-items:center;display:flex;flex-wrap:nowrap}.ActionListItem-trailingAction{border-bottom-left-radius:0;border-top-left-radius:0}.ActionListItem--trailingActionHover .ActionListItem-trailingAction{visibility:hidden}.ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction,.ActionListItem--trailingActionHover:hover .ActionListItem-trailingAction{visibility:visible}.ActionList-sectionDivider:not(:empty){color:var(--color-fg-muted);display:flex;flex-direction:column;font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-semibold,600);line-height:var(--primer-text-body-lineHeight-small,1.66667);padding:var(--base-size-8,8px) var(--primer-actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{background:var(--color-action-list-item-inline-divider);border:0;display:block;height:var(--primer-borderWidth-thin,1px);list-style:none;margin:calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px)) calc(var(--base-size-8, 8px)*-1) var(--base-size-8,8px);padding:0}.ActionList-sectionDivider .ActionList-sectionDivider-title{color:var(--color-fg-muted);font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-semibold,600)}.ActionList-sectionDivider--filled{background:var(--color-canvas-subtle);border-bottom:solid var(--primer-borderWidth-thin,1px) var(--color-action-list-item-inline-divider);border-top:solid var(--primer-borderWidth-thin,1px) var(--color-action-list-item-inline-divider);margin:calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px)) calc(var(--base-size-8, 8px)*-1) var(--base-size-8,8px)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:var(--base-size-8,8px)}.ActionList-sectionDivider--filled:first-child{margin-top:0}
1
+ :root{--primer-actionListContent-paddingBlock:var(--primer-control-medium-paddingBlock,6px)}.ActionListWrap{list-style:none}.ActionListWrap--inset{padding:var(--base-size-8,8px)}.ActionListWrap--divided .ActionListItem-label:before{height:1px}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before,.ActionListWrap--divided .ActionListItem-label:before{background:var(--color-action-list-item-inline-divider);content:"";display:block;position:absolute;top:calc(var(--primer-actionListContent-paddingBlock)*-1);width:100%}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before{height:var(--primer-borderWidth-thin,1px)}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before{content:unset}.ActionList-sectionDivider+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionList-sectionDivider+.ActionListItem .ActionListItem-label:before,.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline:before,.ActionListItem:first-of-type .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive .ActionListItem-label:before,:is(.ActionListWrap--divided .ActionListItem--navActive)+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem{background-color:initial;border-radius:var(--primer-borderRadius-medium,6px);list-style:none;position:relative}.ActionListItem:active,.ActionListItem:hover{cursor:pointer}@media (hover:hover){.ActionListItem:hover .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover .ActionListItem-label:before,.ActionListItem:hover+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover+.ActionListItem .ActionListItem-label:before{visibility:hidden}}.ActionListItem[hidden]+.ActionList-sectionDivider{display:none}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent{z-index:1}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active{background-color:var(--color-action-list-item-default-active-bg)}@media (hover:hover){:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover{background-color:var(--color-action-list-item-default-hover-bg);cursor:pointer}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover:not(.ActionListItem--navActive,:focus-visible){box-shadow:var(--primer-borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:solid var(--primer-borderWidth-thin,1px) #0000;outline-offset:calc(var(--primer-borderWidth-thin, 1px)*-1)}}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active{background:var(--color-action-list-item-default-active-bg)}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active:not(.ActionListItem--navActive){box-shadow:var(--primer-borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:solid var(--primer-borderWidth-thin,1px) #0000;outline-offset:calc(var(--primer-borderWidth-thin, 1px)*-1)}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active .ActionListItem-label:before,:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem[aria-checked=true] .ActionListItem-multiSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-multiSelectCheckmark{opacity:1;transition:visibility 0 linear 0,opacity 50ms;visibility:visible}.ActionListItem[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion:no-preference){.ActionListItem[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-singleSelectCheckmark{animation:checkmarkIn .2s cubic-bezier(.11,0,.5,0) forwards}}.ActionListItem[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListItem[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--color-accent-fg);stroke:var(--color-accent-fg);stroke-width:var(--primer-borderWidth-thin,1px)}.ActionListItem[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark{fill:var(--color-fg-on-emphasis)}.ActionListItem[aria-checked=false] .ActionListItem-multiSelectCheckmark,.ActionListItem[aria-selected=false] .ActionListItem-multiSelectCheckmark{opacity:0;transition:visibility 0 linear 50ms,opacity 50ms;visibility:hidden}.ActionListItem[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListItem[aria-selected=false] .ActionListItem-singleSelectCheckmark{clip-path:inset(16px 0 0 0);transition:visibility 0s linear .2s;visibility:hidden}@media screen and (prefers-reduced-motion:no-preference){.ActionListItem[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListItem[aria-selected=false] .ActionListItem-singleSelectCheckmark{animation:checkmarkOut .2s cubic-bezier(.11,0,.5,0) forwards}}.ActionListItem[aria-checked=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListItem[aria-selected=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--color-canvas-default);stroke:var(--color-border-default);stroke-width:var(--primer-borderWidth-thin,1px)}.ActionListItem[aria-checked=false] .ActionListItem-multiSelectIconRect,.ActionListItem[aria-selected=false] .ActionListItem-multiSelectIconRect{fill:var(--color-canvas-default);border:var(--primer-borderWidth-thin,1px) solid var(--color-border-default)}.ActionListItem{@keyframes checkmarkIn{0%{clip-path:inset(16px 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(16px 0 0 0)}}}.ActionListItem[aria-selected=true]{background:var(--color-action-list-item-default-selected-bg);font-weight:var(--base-text-weight-normal,400)}@media (hover:hover){.ActionListItem[aria-selected=true]:hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionListItem[aria-selected=true]+.ActionListItem:before,.ActionListItem[aria-selected=true]:before{visibility:hidden}.ActionListItem[aria-selected=true]:after{background:var(--color-accent-fg);border-radius:var(--primer-borderRadius-medium,6px);content:"";height:var(--base-size-24,24px);left:calc(var(--base-size-4, 4px)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,4px)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--color-action-list-item-default-selected-bg)}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before,.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before{visibility:hidden}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after{background:var(--color-accent-fg);border-radius:var(--primer-borderRadius-medium,6px);content:"";height:var(--base-size-24,24px);left:calc(var(--base-size-8, 8px)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,4px)}.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label{color:var(--color-primer-fg-disabled)}.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill:var(--color-primer-fg-disabled)}@media (hover:hover){.ActionListItem[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}.ActionListItem.ActionListItem--danger .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListItem-visual{color:var(--color-danger-fg)}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--color-action-list-item-danger-hover-bg)}.ActionListItem.ActionListItem--danger:hover .ActionListItem-label{color:var(--color-action-list-item-danger-hover-text)}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--color-action-list-item-danger-active-bg)}.ActionListContent{-webkit-tap-highlight-color:transparent;align-items:start;background-color:initial;border:none;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-default);display:grid;grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:min-content min-content minmax(0,auto) min-content min-content;grid-template-rows:min-content;padding-block:var(--primer-actionListContent-paddingBlock);padding-inline:var(--primer-control-medium-paddingInline-condensed,8px);position:relative;text-align:left;touch-action:manipulation;transition:background 33.333ms linear;-webkit-user-select:none;user-select:none;width:100%}.ActionListContent>:not(:last-child){margin-right:var(--primer-control-medium-gap,8px)}.ActionListContent:hover{text-decoration:none}.ActionListContent[aria-disabled=true] .ActionListItem-description,.ActionListContent[aria-disabled=true] .ActionListItem-label{color:var(--color-primer-fg-disabled)}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill:var(--color-primer-fg-disabled)}@media (hover:hover){.ActionListContent[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-expanded]+.ActionList--subGroup{transition:opacity .16s cubic-bezier(.25,1,.5,1),transform .16s cubic-bezier(.25,1,.5,1)}}.ActionListContent[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-24,24px)}.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-32,32px)}.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-36,36px)}.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-40,40px)}.ActionListContent[aria-expanded=true] .ActionListItem-collapseIcon{transform:scaleY(-1);transition:transform .12s linear}.ActionListContent[aria-expanded=true]+.ActionList--subGroup{height:auto;opacity:1;overflow:visible;transform:translateY(0);visibility:visible}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=true]>.ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent[aria-expanded=false] .ActionListItem-collapseIcon{transform:scaleY(1);transition:transform .12s linear}.ActionListContent[aria-expanded=false]+.ActionList--subGroup{height:0;opacity:0;overflow:hidden;transform:translateY(calc(var(--base-size-16, 16px)*-1));visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background:var(--color-action-list-item-default-selected-bg)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]+.ActionListItem:before,.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:before{visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after{background:var(--color-accent-fg);border-radius:var(--primer-borderRadius-medium,6px);content:"";height:var(--base-size-24,24px);left:calc(var(--base-size-8, 8px)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,4px)}.ActionListContent.ActionListContent--sizeLarge{--primer-actionListContent-paddingBlock:var(--primer-control-large-paddingBlock,0.625rem)}.ActionListContent.ActionListContent--sizeXLarge{--primer-actionListContent-paddingBlock:var(--primer-control-xlarge-paddingBlock,0.875rem)}@media (pointer:coarse){.ActionListContent{--primer-actionListContent-paddingBlock:var(--primer-control-large-paddingBlock,0.625rem)}}.ActionListContent.ActionListContent--blockDescription .ActionListItem-visual{place-self:start}.ActionListItem-action--leading{grid-area:leadingAction}.ActionListItem-visual--leading{grid-area:leadingVisual}.ActionListItem-visual--trailing{grid-area:trailingVisual}.ActionListItem-action--trailing{grid-area:trailingAction}.ActionListItem-descriptionWrap{display:flex;flex-direction:column;gap:var(--base-size-4,4px);grid-area:label}.ActionListItem-descriptionWrap .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem-descriptionWrap--inline{align-items:baseline;flex-direction:row;gap:var(--base-size-8,8px);position:relative}.ActionListItem-description{color:var(--color-fg-muted);font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-normal,400);line-height:var(--primer-text-body-lineHeight-small,1.66667)}.ActionListItem-action,.ActionListItem-visual{fill:var(--color-fg-muted);align-items:center;color:var(--color-fg-muted);display:flex;min-height:var(--primer-control-medium-lineBoxHeight,20px);pointer-events:none}.ActionListItem-label{color:var(--color-fg-default);font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-normal,400);grid-area:label;line-height:var(--primer-text-body-lineHeight-medium,1.42857);position:relative}.ActionListItem-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionListItem--subItem>.ActionListContent>.ActionListItem-label{font-size:var(--primer-text-body-size-small,12px);line-height:var(--primer-text-body-lineHeight-small,1.66667)}.ActionListItem--withActions{align-items:center;display:flex;flex-wrap:nowrap}.ActionListItem-trailingAction{border-bottom-left-radius:0;border-top-left-radius:0}.ActionListItem--trailingActionHover .ActionListItem-trailingAction{visibility:hidden}.ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction,.ActionListItem--trailingActionHover:hover .ActionListItem-trailingAction{visibility:visible}.ActionList-sectionDivider:not(:empty){color:var(--color-fg-muted);display:flex;flex-direction:column;font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-semibold,600);line-height:var(--primer-text-body-lineHeight-small,1.66667);padding-block:var(--base-size-8,8px);padding-inline:var(--primer-actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{background:var(--color-action-list-item-inline-divider);border:0;display:block;height:var(--primer-borderWidth-thin,1px);list-style:none;margin-block-end:var(--base-size-8,8px);margin-block-start:calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));margin-inline:calc(var(--base-size-8, 8px)*-1);padding:0}.ActionList-sectionDivider .ActionList-sectionDivider-title{color:var(--color-fg-muted);font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-semibold,600)}.ActionList-sectionDivider--filled{background:var(--color-canvas-subtle);border-bottom:solid var(--primer-borderWidth-thin,1px) var(--color-action-list-item-inline-divider);border-top:solid var(--primer-borderWidth-thin,1px) var(--color-action-list-item-inline-divider);margin-block-end:var(--base-size-8,8px);margin-block-start:calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));margin-inline:calc(var(--base-size-8, 8px)*-1)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:var(--base-size-8,8px)}.ActionList-sectionDivider--filled:first-child{margin-block-start:0}
data/app/components/primer/alpha/action_list.css.json CHANGED
@@ -1 +1 @@
1
- {"name":"alpha/action_list","selectors":[":root",".ActionListWrap",".ActionListWrap--inset",".ActionListWrap--divided .ActionListItem-label:before",".ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before",".ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before",".ActionList-sectionDivider+.ActionListItem .ActionListItem-descriptionWrap--inline:before",".ActionList-sectionDivider+.ActionListItem .ActionListItem-label:before",".ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline:before",".ActionListItem:first-of-type .ActionListItem-label:before",".ActionListWrap--divided .ActionListItem--navActive .ActionListItem-label:before",":is(.ActionListWrap--divided .ActionListItem--navActive)+.ActionListItem .ActionListItem-label:before",".ActionListItem",".ActionListItem:active",".ActionListItem:hover",".ActionListItem:hover .ActionListItem-descriptionWrap--inline:before",".ActionListItem:hover .ActionListItem-label:before",".ActionListItem:hover+.ActionListItem .ActionListItem-descriptionWrap--inline:before",".ActionListItem:hover+.ActionListItem .ActionListItem-label:before",".ActionListItem[hidden]+.ActionList-sectionDivider",".ActionListItem.ActionListItem--hasSubItem>.ActionListContent",".ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover",".ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active",":is(.ActionListItem:not(.ActionListItem--hasSubItem)",".ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover",".ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover:not(.ActionListItem--navActive",":focus-visible)",".ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active",".ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active:not(.ActionListItem--navActive)","50%","to",".ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active .ActionListItem-label:before",".ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active+.ActionListItem .ActionListItem-label:before",".ActionListItem[aria-checked=true] .ActionListItem-multiSelectCheckmark",".ActionListItem[aria-selected=true] .ActionListItem-multiSelectCheckmark",".ActionListItem[aria-checked=true] .ActionListItem-singleSelectCheckmark",".ActionListItem[aria-selected=true] .ActionListItem-singleSelectCheckmark",".ActionListItem[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect",".ActionListItem[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect",".ActionListItem[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark",".ActionListItem[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark",".ActionListItem[aria-checked=false] .ActionListItem-multiSelectCheckmark",".ActionListItem[aria-selected=false] .ActionListItem-multiSelectCheckmark",".ActionListItem[aria-checked=false] .ActionListItem-singleSelectCheckmark",".ActionListItem[aria-selected=false] .ActionListItem-singleSelectCheckmark",".ActionListItem[aria-checked=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect",".ActionListItem[aria-selected=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect",".ActionListItem[aria-checked=false] .ActionListItem-multiSelectIconRect",".ActionListItem[aria-selected=false] .ActionListItem-multiSelectIconRect","0%",".ActionListItem[aria-selected=true]",".ActionListItem[aria-selected=true]:hover",".ActionListItem[aria-selected=true]+.ActionListItem:before",".ActionListItem[aria-selected=true]:before",".ActionListItem[aria-selected=true]:after",".ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label",".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)",".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover",".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before",".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before",".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after",".ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description",".ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label",".ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual",".ActionListItem[aria-disabled=true]:hover",".ActionListItem.ActionListItem--danger .ActionListItem-label",".ActionListItem.ActionListItem--danger .ActionListItem-visual",".ActionListItem.ActionListItem--danger:hover",".ActionListItem.ActionListItem--danger:hover .ActionListItem-label",".ActionListItem.ActionListItem--danger .ActionListContent:active",".ActionListContent",".ActionListContent>:not(:last-child)",".ActionListContent:hover",".ActionListContent[aria-disabled=true] .ActionListItem-description",".ActionListContent[aria-disabled=true] .ActionListItem-label",".ActionListContent[aria-disabled=true] .ActionListItem-visual",".ActionListContent[aria-disabled=true]:hover",".ActionListContent[aria-expanded]+.ActionList--subGroup",".ActionListContent[aria-expanded]+.ActionList--subGroup .ActionListContent",".ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent",".ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent",".ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent",".ActionListContent[aria-expanded=true] .ActionListItem-collapseIcon",".ActionListContent[aria-expanded=true]+.ActionList--subGroup",".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=true]>.ActionListItem-label",".ActionListContent[aria-expanded=false] .ActionListItem-collapseIcon",".ActionListContent[aria-expanded=false]+.ActionList--subGroup",".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]",".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label",".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]+.ActionListItem:before",".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:before",".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after",".ActionListContent.ActionListContent--sizeLarge",".ActionListContent.ActionListContent--sizeXLarge",".ActionListContent.ActionListContent--blockDescription .ActionListItem-visual",".ActionListItem-action--leading",".ActionListItem-visual--leading",".ActionListItem-visual--trailing",".ActionListItem-action--trailing",".ActionListItem-descriptionWrap",".ActionListItem-descriptionWrap .ActionListItem-label",".ActionListItem-descriptionWrap--inline",".ActionListItem-description",".ActionListItem-action",".ActionListItem-visual",".ActionListItem-label",".ActionListItem-label--truncate",".ActionListItem--subItem>.ActionListContent>.ActionListItem-label",".ActionListItem--withActions",".ActionListItem-trailingAction",".ActionListItem--trailingActionHover .ActionListItem-trailingAction",".ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction",".ActionListItem--trailingActionHover:hover .ActionListItem-trailingAction",".ActionList-sectionDivider:not(:empty)",".ActionList-sectionDivider:empty",".ActionList-sectionDivider .ActionList-sectionDivider-title",".ActionList-sectionDivider--filled",".ActionList-sectionDivider--filled:empty",".ActionList-sectionDivider--filled:first-child"]}
1
+ {"name":"alpha/action_list","selectors":[":root",".ActionListWrap",".ActionListWrap--inset",".ActionListWrap--divided .ActionListItem-label:before",".ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before",".ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before",".ActionList-sectionDivider+.ActionListItem .ActionListItem-descriptionWrap--inline:before",".ActionList-sectionDivider+.ActionListItem .ActionListItem-label:before",".ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline:before",".ActionListItem:first-of-type .ActionListItem-label:before",".ActionListWrap--divided .ActionListItem--navActive .ActionListItem-label:before",":is(.ActionListWrap--divided .ActionListItem--navActive)+.ActionListItem .ActionListItem-label:before",".ActionListItem",".ActionListItem:active",".ActionListItem:hover",".ActionListItem:hover .ActionListItem-descriptionWrap--inline:before",".ActionListItem:hover .ActionListItem-label:before",".ActionListItem:hover+.ActionListItem .ActionListItem-descriptionWrap--inline:before",".ActionListItem:hover+.ActionListItem .ActionListItem-label:before",".ActionListItem[hidden]+.ActionList-sectionDivider",".ActionListItem.ActionListItem--hasSubItem>.ActionListContent",".ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover",".ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active",":is(.ActionListItem:not(.ActionListItem--hasSubItem)",".ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover",".ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover:not(.ActionListItem--navActive",":focus-visible)",".ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active",".ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active:not(.ActionListItem--navActive)",".ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active .ActionListItem-label:before",".ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active+.ActionListItem .ActionListItem-label:before",".ActionListItem[aria-checked=true] .ActionListItem-multiSelectCheckmark",".ActionListItem[aria-selected=true] .ActionListItem-multiSelectCheckmark",".ActionListItem[aria-checked=true] .ActionListItem-singleSelectCheckmark",".ActionListItem[aria-selected=true] .ActionListItem-singleSelectCheckmark",".ActionListItem[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect",".ActionListItem[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect",".ActionListItem[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark",".ActionListItem[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark",".ActionListItem[aria-checked=false] .ActionListItem-multiSelectCheckmark",".ActionListItem[aria-selected=false] .ActionListItem-multiSelectCheckmark",".ActionListItem[aria-checked=false] .ActionListItem-singleSelectCheckmark",".ActionListItem[aria-selected=false] .ActionListItem-singleSelectCheckmark",".ActionListItem[aria-checked=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect",".ActionListItem[aria-selected=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect",".ActionListItem[aria-checked=false] .ActionListItem-multiSelectIconRect",".ActionListItem[aria-selected=false] .ActionListItem-multiSelectIconRect","0%","to",".ActionListItem[aria-selected=true]",".ActionListItem[aria-selected=true]:hover",".ActionListItem[aria-selected=true]+.ActionListItem:before",".ActionListItem[aria-selected=true]:before",".ActionListItem[aria-selected=true]:after",".ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label",".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)",".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover",".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before",".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before",".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after",".ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description",".ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label",".ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual",".ActionListItem[aria-disabled=true]:hover",".ActionListItem.ActionListItem--danger .ActionListItem-label",".ActionListItem.ActionListItem--danger .ActionListItem-visual",".ActionListItem.ActionListItem--danger:hover",".ActionListItem.ActionListItem--danger:hover .ActionListItem-label",".ActionListItem.ActionListItem--danger .ActionListContent:active",".ActionListContent",".ActionListContent>:not(:last-child)",".ActionListContent:hover",".ActionListContent[aria-disabled=true] .ActionListItem-description",".ActionListContent[aria-disabled=true] .ActionListItem-label",".ActionListContent[aria-disabled=true] .ActionListItem-visual",".ActionListContent[aria-disabled=true]:hover",".ActionListContent[aria-expanded]+.ActionList--subGroup",".ActionListContent[aria-expanded]+.ActionList--subGroup .ActionListContent",".ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent",".ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent",".ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent",".ActionListContent[aria-expanded=true] .ActionListItem-collapseIcon",".ActionListContent[aria-expanded=true]+.ActionList--subGroup",".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=true]>.ActionListItem-label",".ActionListContent[aria-expanded=false] .ActionListItem-collapseIcon",".ActionListContent[aria-expanded=false]+.ActionList--subGroup",".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]",".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label",".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]+.ActionListItem:before",".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:before",".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after",".ActionListContent.ActionListContent--sizeLarge",".ActionListContent.ActionListContent--sizeXLarge",".ActionListContent.ActionListContent--blockDescription .ActionListItem-visual",".ActionListItem-action--leading",".ActionListItem-visual--leading",".ActionListItem-visual--trailing",".ActionListItem-action--trailing",".ActionListItem-descriptionWrap",".ActionListItem-descriptionWrap .ActionListItem-label",".ActionListItem-descriptionWrap--inline",".ActionListItem-description",".ActionListItem-action",".ActionListItem-visual",".ActionListItem-label",".ActionListItem-label--truncate",".ActionListItem--subItem>.ActionListContent>.ActionListItem-label",".ActionListItem--withActions",".ActionListItem-trailingAction",".ActionListItem--trailingActionHover .ActionListItem-trailingAction",".ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction",".ActionListItem--trailingActionHover:hover .ActionListItem-trailingAction",".ActionList-sectionDivider:not(:empty)",".ActionList-sectionDivider:empty",".ActionList-sectionDivider .ActionList-sectionDivider-title",".ActionList-sectionDivider--filled",".ActionList-sectionDivider--filled:empty",".ActionList-sectionDivider--filled:first-child"]}
data/app/components/primer/alpha/action_list.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["action_list.pcss","../../../../lib/postcss_mixins/activeIndicatorLine.pcss"],"names":[],"mappings":"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","file":"action_list.css","sourcesContent":[":root {\n --primer-actionListContent-paddingBlock: var(--primer-control-medium-paddingBlock, 6px);\n}\n\n/* ActionList */\n\n/* <ul> */\n.ActionListWrap {\n list-style: none;\n}\n\n.ActionListWrap--inset {\n padding: var(--base-size-8, 8px);\n}\n\n/* list dividers */\n\n.ActionListWrap--divided {\n & .ActionListItem-label::before {\n position: absolute;\n top: calc(-1 * var(--primer-actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: 1px;\n content: '';\n background: var(--color-action-list-item-inline-divider);\n }\n\n /* if descriptionWrap--inline exists, move pseudo divider to wrapper */\n & .ActionListItem-descriptionWrap--inline {\n &::before {\n position: absolute;\n top: calc(-1 * var(--primer-actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: var(--primer-borderWidth-thin, 1px);\n content: '';\n background: var(--color-action-list-item-inline-divider);\n }\n\n /* unset the default label pseudo */\n & .ActionListItem-label::before {\n content: unset;\n }\n }\n\n /* hide divider if item is active */\n & .ActionListItem--navActive {\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n }\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-label::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n visibility: hidden;\n}\n\n/* ActionList::Item */\n\n.ActionListItem {\n position: relative;\n list-style: none;\n background-color: transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n\n /* state */\n\n &:hover,\n &:active {\n cursor: pointer;\n }\n\n /* hide dividers */\n @media (hover: hover) {\n &:hover {\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n\n & .ActionListItem-descriptionWrap--inline::before,\n & + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n visibility: hidden;\n }\n }\n }\n\n /* Make sure that the first visible item isn't a divider */\n &[hidden] + .ActionList-sectionDivider {\n display: none;\n }\n\n /* collapse styles here */\n &.ActionListItem--hasSubItem {\n /* first child */\n & > .ActionListContent {\n z-index: 1;\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n }\n\n &:active {\n background-color: var(--color-action-list-item-default-active-bg);\n }\n }\n }\n\n /* only hover li without list as children */\n &:not(.ActionListItem--hasSubItem),\n /* target contents of first child li if sub-item (li wraps item label + nested ul) */\n &.ActionListItem--hasSubItem > .ActionListContent {\n @media (hover: hover) {\n &:hover {\n cursor: pointer;\n background-color: var(--color-action-list-item-default-hover-bg);\n\n &:not(.ActionListItem--navActive, :focus-visible) {\n /* Support for \"Windows high contrast mode\" */\n outline: solid var(--primer-borderWidth-thin, 1px) transparent;\n outline-offset: calc(-1 * var(--primer-borderWidth-thin, 1px));\n box-shadow: var(--primer-borderInset-thin, 1px) var(--color-action-list-item-default-active-border);\n }\n }\n }\n\n &:active {\n background: var(--color-action-list-item-default-active-bg);\n\n &:not(.ActionListItem--navActive) {\n /* Support for \"Windows high contrast mode\" https:sarahmhigley.com/writing/whcm-quick-tips/ */\n outline: solid var(--primer-borderWidth-thin, 1px) transparent;\n outline-offset: calc(-1 * var(--primer-borderWidth-thin, 1px));\n box-shadow: var(--primer-borderInset-thin, 1px) var(--color-action-list-item-default-active-border);\n }\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: ActionListItem-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1);\n }\n\n @keyframes ActionListItem-active-bg {\n 50% {\n box-shadow: inset 0 2px 12px 6px rgba(var(--color-canvas-default), 0.4);\n transform: scale(1);\n }\n\n 100% {\n transform: scale(0.97);\n }\n }\n\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n }\n }\n\n /*\n * checkbox item [aria-checked]\n * listbox [aria-selected]\n */\n &[aria-checked='true'],\n &[aria-selected='true'] {\n /* multiselect checkmark */\n & .ActionListItem-multiSelectCheckmark {\n visibility: visible;\n opacity: 1;\n transition: visibility 0 linear 0, opacity 50ms;\n }\n\n /* singleselect checkmark */\n & .ActionListItem-singleSelectCheckmark {\n visibility: visible;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;\n }\n }\n\n /* checkbox */\n & .ActionListItem-multiSelectIcon {\n & .ActionListItem-multiSelectIconRect {\n fill: var(--color-accent-fg);\n stroke: var(--color-accent-fg);\n stroke-width: var(--primer-borderWidth-thin, 1px);\n }\n\n & .ActionListItem-multiSelectCheckmark {\n fill: var(--color-fg-on-emphasis);\n }\n }\n }\n\n &[aria-checked='false'],\n &[aria-selected='false'] {\n /* multiselect checkmark */\n & .ActionListItem-multiSelectCheckmark {\n visibility: hidden;\n opacity: 0;\n transition: visibility 0 linear 50ms, opacity 50ms;\n }\n\n /* singleselect checkmark */\n & .ActionListItem-singleSelectCheckmark {\n visibility: hidden;\n transition: visibility 0s linear 200ms;\n clip-path: inset(16px 0 0 0);\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;\n }\n }\n\n /* checkbox */\n & .ActionListItem-multiSelectIcon {\n & .ActionListItem-multiSelectIconRect {\n fill: var(--color-canvas-default);\n stroke: var(--color-border-default);\n stroke-width: var(--primer-borderWidth-thin, 1px);\n }\n }\n\n & .ActionListItem-multiSelectIconRect {\n fill: var(--color-canvas-default);\n border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n }\n }\n\n @keyframes checkmarkIn {\n from {\n clip-path: inset(16px 0 0 0);\n }\n\n to {\n clip-path: inset(0 0 0 0);\n }\n }\n\n @keyframes checkmarkOut {\n from {\n clip-path: inset(0 0 0 0);\n }\n\n to {\n clip-path: inset(16px 0 0 0);\n }\n }\n\n /* Autocomplete [aria-selected] items */\n\n &[aria-selected='true'] {\n font-weight: var(--base-text-weight-normal, 400);\n background: var(--color-action-list-item-default-selected-bg);\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n\n &::after {\n @mixin activeIndicatorLine calc(-1 * var(--base-size-4, 4px));\n }\n }\n\n /* active state [aria-current] */\n\n &.ActionListItem--navActive {\n &:not(.ActionListItem--subItem) {\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold, 600);\n }\n }\n\n &:not(.ActionListItem--danger) {\n background: var(--color-action-list-item-default-selected-bg);\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n &::after {\n @mixin activeIndicatorLine;\n }\n }\n }\n\n /* disabled */\n\n &[aria-disabled='true'] {\n & .ActionListContent {\n & .ActionListItem-label,\n & .ActionListItem-description {\n color: var(--color-primer-fg-disabled);\n }\n\n & .ActionListItem-visual {\n fill: var(--color-primer-fg-disabled);\n }\n }\n\n @media (hover: hover) {\n &:hover {\n cursor: not-allowed;\n background-color: transparent;\n }\n }\n }\n\n /* variants */\n\n /* danger */\n &.ActionListItem--danger {\n & .ActionListItem-label {\n color: var(--color-danger-fg);\n }\n\n & .ActionListItem-visual {\n color: var(--color-danger-fg);\n }\n\n @media (hover: hover) {\n &:hover {\n background: var(--color-action-list-item-danger-hover-bg);\n\n & .ActionListItem-label {\n color: var(--color-action-list-item-danger-hover-text);\n }\n }\n }\n\n & .ActionListContent {\n &:active {\n background: var(--color-action-list-item-danger-active-bg);\n }\n }\n }\n}\n\n/* button or a href */\n.ActionListContent {\n position: relative;\n display: grid;\n width: 100%;\n padding-block: var(--primer-actionListContent-paddingBlock);\n padding-inline: var(--primer-control-medium-paddingInline-condensed, 8px);\n color: var(--color-fg-default);\n text-align: left;\n user-select: none;\n background-color: transparent;\n border: none;\n border-radius: var(--primer-borderRadius-medium, 6px);\n transition: background 33.333ms linear;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n grid-template-rows: min-content;\n grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';\n grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;\n align-items: start;\n\n /* column-gap persists with empty grid-areas, margin applies only when children exist */\n & > :not(:last-child) {\n margin-right: var(--primer-control-medium-gap, 8px);\n }\n\n /* state */\n\n &:hover {\n text-decoration: none;\n }\n\n /* disabled */\n &[aria-disabled='true'] {\n & .ActionListItem-label,\n & .ActionListItem-description {\n color: var(--color-primer-fg-disabled);\n }\n\n & .ActionListItem-visual {\n fill: var(--color-primer-fg-disabled);\n }\n\n @media (hover: hover) {\n &:hover {\n cursor: not-allowed;\n background-color: transparent;\n }\n }\n }\n\n /* collapsible item [aria-expanded] */\n\n /* nesting (single level)\n target items inside expanded subgroups */\n &[aria-expanded] {\n & + .ActionList--subGroup {\n @media screen and (prefers-reduced-motion: no-preference) {\n transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);\n }\n\n & .ActionListContent {\n padding-left: var(--base-size-24, 24px);\n }\n }\n\n /* has 16px leading visual */\n &.ActionListContent--visual16 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-32, 32px);\n }\n }\n\n /* has 20px leading visual */\n &.ActionListContent--visual20 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-36, 36px);\n }\n }\n\n /* has 24px leading visual */\n &.ActionListContent--visual24 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-40, 40px);\n }\n }\n }\n\n &[aria-expanded='true'] {\n & .ActionListItem-collapseIcon {\n transition: transform 120ms linear;\n transform: scaleY(-1);\n }\n\n & + .ActionList--subGroup {\n height: auto;\n overflow: visible;\n visibility: visible;\n opacity: 1;\n transform: translateY(0);\n }\n\n &.ActionListContent--hasActiveSubItem {\n & > .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold, 600);\n }\n }\n }\n\n &[aria-expanded='false'] {\n & .ActionListItem-collapseIcon {\n transition: transform 120ms linear;\n transform: scaleY(1);\n }\n\n & + .ActionList--subGroup {\n height: 0;\n overflow: hidden;\n visibility: hidden;\n opacity: 0;\n transform: translateY(calc(-1 * var(--base-size-16, 16px)));\n }\n\n /* show active indicator on parent collapse if child is active */\n &.ActionListContent--hasActiveSubItem {\n background: var(--color-action-list-item-default-selected-bg);\n\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold, 600);\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n &::after {\n @mixin activeIndicatorLine;\n }\n }\n }\n\n /* sizes */\n\n &.ActionListContent--sizeLarge {\n --primer-actionListContent-paddingBlock: var(--primer-control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));\n }\n\n &.ActionListContent--sizeXLarge {\n --primer-actionListContent-paddingBlock: var(--primer-control-xlarge-paddingBlock, calc((3rem - 1.25rem) / 2));\n }\n\n /* On pointer:coarse (mobile), all list items are large */\n @media (pointer: coarse) {\n --primer-actionListContent-paddingBlock: var(--primer-control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));\n }\n\n &.ActionListContent--blockDescription {\n /* if leading/trailing visual, align with first line of content */\n & .ActionListItem-visual {\n place-self: start;\n }\n }\n}\n\n/* place children on grid */\n\n.ActionListItem-action--leading {\n grid-area: leadingAction;\n}\n\n.ActionListItem-visual--leading {\n grid-area: leadingVisual;\n}\n\n.ActionListItem-visual--trailing {\n grid-area: trailingVisual;\n}\n\n.ActionListItem-action--trailing {\n grid-area: trailingAction;\n}\n\n/* wrapper span\n default block */\n.ActionListItem-descriptionWrap {\n grid-area: label;\n display: flex;\n flex-direction: column;\n gap: var(--base-size-4, 4px);\n\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold, 600);\n }\n}\n\n/* inline */\n.ActionListItem-descriptionWrap--inline {\n position: relative;\n flex-direction: row;\n align-items: baseline;\n gap: var(--base-size-8, 8px);\n}\n\n/* description */\n.ActionListItem-description {\n font-size: var(--primer-text-body-size-small, 12px);\n font-weight: var(--base-text-weight-normal, 400);\n line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n color: var(--color-fg-muted);\n}\n\n/* helper for grid alignment with multi-line content\n span wrapping svg or text */\n.ActionListItem-visual,\n.ActionListItem-action {\n display: flex;\n min-height: var(--primer-control-medium-lineBoxHeight, 20px);\n color: var(--color-fg-muted);\n pointer-events: none;\n fill: var(--color-fg-muted);\n align-items: center;\n}\n\n/* text */\n.ActionListItem-label {\n position: relative;\n font-size: var(--primer-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-normal, 400);\n line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));\n color: var(--color-fg-default);\n grid-area: label;\n}\n\n.ActionListItem-label--truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* nested lists (only supports 1 level currently)\n target ActionListItem--subItem for padding-left to maintain :active :after state */\n\n.ActionListItem--subItem > .ActionListContent > .ActionListItem-label {\n font-size: var(--primer-text-body-size-small, 12px);\n line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n}\n\n/* trailing action icon button */\n\n.ActionListItem--withActions {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n}\n\n.ActionListItem-trailingAction {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n/* show trailing action button on hover */\n\n.ActionListItem--trailingActionHover {\n & .ActionListItem-trailingAction {\n visibility: hidden;\n }\n\n &:hover,\n &:focus-within {\n & .ActionListItem-trailingAction {\n visibility: visible;\n }\n }\n}\n\n/* ActionList::Divider */\n\n.ActionList-sectionDivider {\n /* with children */\n &:not(:empty) {\n display: flex;\n padding-inline: var(--primer-actionListContent-paddingBlock);\n padding-block: var(--base-size-8, 8px);\n font-size: var(--primer-text-body-size-small, 12px);\n line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n font-weight: var(--base-text-weight-semibold, 600);\n color: var(--color-fg-muted);\n flex-direction: column;\n }\n\n /* no children */\n &:empty {\n display: block;\n height: var(--primer-borderWidth-thin, 1px);\n padding: 0;\n margin-block-start: calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));\n margin-block-end: var(--base-size-8, 8px);\n margin-inline: calc(-1 * var(--base-size-8, 8px));\n list-style: none;\n background: var(--color-action-list-item-inline-divider);\n border: 0;\n }\n\n & .ActionList-sectionDivider-title {\n font-size: var(--primer-text-body-size-small, 12px);\n font-weight: var(--base-text-weight-semibold, 600);\n color: var(--color-fg-muted);\n }\n}\n\n.ActionList-sectionDivider--filled {\n margin-block-start: calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));\n margin-block-end: var(--base-size-8, 8px);\n margin-inline: calc(-1 * var(--base-size-8, 8px));\n background: var(--color-canvas-subtle);\n border-top: solid var(--primer-borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);\n border-bottom: solid var(--primer-borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);\n\n /* if no children, treat as divider */\n &:empty {\n height: var(--base-size-8, 8px);\n box-sizing: border-box;\n }\n\n &:first-child {\n margin-block-start: 0;\n }\n}\n","/* active indicator line for navlist items */\n@define-mixin activeIndicatorLine $padding-left: calc(-1 * var(--base-size-8, 8px)) {\n position: absolute;\n top: calc(50% - 12px);\n left: $padding-left;\n width: var(--base-size-4, 4px);\n height: var(--base-size-24, 24px);\n content: '';\n background: var(--color-accent-fg);\n border-radius: var(--primer-borderRadius-medium, 6px);\n}\n"]}
1
+ {"version":3,"sources":["action_list.pcss","../../../../lib/postcss_mixins/activeIndicatorLine.pcss"],"names":[],"mappings":"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","file":"action_list.css","sourcesContent":[":root {\n --primer-actionListContent-paddingBlock: var(--primer-control-medium-paddingBlock, 6px);\n}\n\n/* ActionList */\n\n/* <ul> */\n.ActionListWrap {\n list-style: none;\n}\n\n.ActionListWrap--inset {\n padding: var(--base-size-8, 8px);\n}\n\n/* list dividers */\n\n.ActionListWrap--divided {\n & .ActionListItem-label::before {\n position: absolute;\n top: calc(-1 * var(--primer-actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: 1px;\n content: '';\n background: var(--color-action-list-item-inline-divider);\n }\n\n /* if descriptionWrap--inline exists, move pseudo divider to wrapper */\n & .ActionListItem-descriptionWrap--inline {\n &::before {\n position: absolute;\n top: calc(-1 * var(--primer-actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: var(--primer-borderWidth-thin, 1px);\n content: '';\n background: var(--color-action-list-item-inline-divider);\n }\n\n /* unset the default label pseudo */\n & .ActionListItem-label::before {\n content: unset;\n }\n }\n\n /* hide divider if item is active */\n & .ActionListItem--navActive {\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n }\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-label::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n visibility: hidden;\n}\n\n/* ActionList::Item */\n\n.ActionListItem {\n position: relative;\n list-style: none;\n background-color: transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n\n /* state */\n\n &:hover,\n &:active {\n cursor: pointer;\n }\n\n /* hide dividers */\n @media (hover: hover) {\n &:hover {\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n\n & .ActionListItem-descriptionWrap--inline::before,\n & + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n visibility: hidden;\n }\n }\n }\n\n /* Make sure that the first visible item isn't a divider */\n &[hidden] + .ActionList-sectionDivider {\n display: none;\n }\n\n /* collapse styles here */\n &.ActionListItem--hasSubItem {\n /* first child */\n & > .ActionListContent {\n z-index: 1;\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n }\n\n &:active {\n background-color: var(--color-action-list-item-default-active-bg);\n }\n }\n }\n\n /* only hover li without list as children */\n &:not(.ActionListItem--hasSubItem),\n /* target contents of first child li if sub-item (li wraps item label + nested ul) */\n &.ActionListItem--hasSubItem > .ActionListContent {\n @media (hover: hover) {\n &:hover {\n cursor: pointer;\n background-color: var(--color-action-list-item-default-hover-bg);\n\n &:not(.ActionListItem--navActive, :focus-visible) {\n /* Support for \"Windows high contrast mode\" */\n outline: solid var(--primer-borderWidth-thin, 1px) transparent;\n outline-offset: calc(-1 * var(--primer-borderWidth-thin, 1px));\n box-shadow: var(--primer-borderInset-thin, 1px) var(--color-action-list-item-default-active-border);\n }\n }\n }\n\n &:active {\n background: var(--color-action-list-item-default-active-bg);\n\n &:not(.ActionListItem--navActive) {\n /* Support for \"Windows high contrast mode\" https:sarahmhigley.com/writing/whcm-quick-tips/ */\n outline: solid var(--primer-borderWidth-thin, 1px) transparent;\n outline-offset: calc(-1 * var(--primer-borderWidth-thin, 1px));\n box-shadow: var(--primer-borderInset-thin, 1px) var(--color-action-list-item-default-active-border);\n }\n\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n }\n }\n\n /*\n * checkbox item [aria-checked]\n * listbox [aria-selected]\n */\n &[aria-checked='true'],\n &[aria-selected='true'] {\n /* multiselect checkmark */\n & .ActionListItem-multiSelectCheckmark {\n visibility: visible;\n opacity: 1;\n transition: visibility 0 linear 0, opacity 50ms;\n }\n\n /* singleselect checkmark */\n & .ActionListItem-singleSelectCheckmark {\n visibility: visible;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;\n }\n }\n\n /* checkbox */\n & .ActionListItem-multiSelectIcon {\n & .ActionListItem-multiSelectIconRect {\n fill: var(--color-accent-fg);\n stroke: var(--color-accent-fg);\n stroke-width: var(--primer-borderWidth-thin, 1px);\n }\n\n & .ActionListItem-multiSelectCheckmark {\n fill: var(--color-fg-on-emphasis);\n }\n }\n }\n\n &[aria-checked='false'],\n &[aria-selected='false'] {\n /* multiselect checkmark */\n & .ActionListItem-multiSelectCheckmark {\n visibility: hidden;\n opacity: 0;\n transition: visibility 0 linear 50ms, opacity 50ms;\n }\n\n /* singleselect checkmark */\n & .ActionListItem-singleSelectCheckmark {\n visibility: hidden;\n transition: visibility 0s linear 200ms;\n clip-path: inset(16px 0 0 0);\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;\n }\n }\n\n /* checkbox */\n & .ActionListItem-multiSelectIcon {\n & .ActionListItem-multiSelectIconRect {\n fill: var(--color-canvas-default);\n stroke: var(--color-border-default);\n stroke-width: var(--primer-borderWidth-thin, 1px);\n }\n }\n\n & .ActionListItem-multiSelectIconRect {\n fill: var(--color-canvas-default);\n border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n }\n }\n\n @keyframes checkmarkIn {\n from {\n clip-path: inset(16px 0 0 0);\n }\n\n to {\n clip-path: inset(0 0 0 0);\n }\n }\n\n @keyframes checkmarkOut {\n from {\n clip-path: inset(0 0 0 0);\n }\n\n to {\n clip-path: inset(16px 0 0 0);\n }\n }\n\n /* Autocomplete [aria-selected] items */\n\n &[aria-selected='true'] {\n font-weight: var(--base-text-weight-normal, 400);\n background: var(--color-action-list-item-default-selected-bg);\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n\n &::after {\n @mixin activeIndicatorLine calc(-1 * var(--base-size-4, 4px));\n }\n }\n\n /* active state [aria-current] */\n\n &.ActionListItem--navActive {\n &:not(.ActionListItem--subItem) {\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold, 600);\n }\n }\n\n &:not(.ActionListItem--danger) {\n background: var(--color-action-list-item-default-selected-bg);\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n &::after {\n @mixin activeIndicatorLine;\n }\n }\n }\n\n /* disabled */\n\n &[aria-disabled='true'] {\n & .ActionListContent {\n & .ActionListItem-label,\n & .ActionListItem-description {\n color: var(--color-primer-fg-disabled);\n }\n\n & .ActionListItem-visual {\n fill: var(--color-primer-fg-disabled);\n }\n }\n\n @media (hover: hover) {\n &:hover {\n cursor: not-allowed;\n background-color: transparent;\n }\n }\n }\n\n /* variants */\n\n /* danger */\n &.ActionListItem--danger {\n & .ActionListItem-label {\n color: var(--color-danger-fg);\n }\n\n & .ActionListItem-visual {\n color: var(--color-danger-fg);\n }\n\n @media (hover: hover) {\n &:hover {\n background: var(--color-action-list-item-danger-hover-bg);\n\n & .ActionListItem-label {\n color: var(--color-action-list-item-danger-hover-text);\n }\n }\n }\n\n & .ActionListContent {\n &:active {\n background: var(--color-action-list-item-danger-active-bg);\n }\n }\n }\n}\n\n/* button or a href */\n.ActionListContent {\n position: relative;\n display: grid;\n width: 100%;\n padding-block: var(--primer-actionListContent-paddingBlock);\n padding-inline: var(--primer-control-medium-paddingInline-condensed, 8px);\n color: var(--color-fg-default);\n text-align: left;\n user-select: none;\n background-color: transparent;\n border: none;\n border-radius: var(--primer-borderRadius-medium, 6px);\n transition: background 33.333ms linear;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n grid-template-rows: min-content;\n grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';\n grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;\n align-items: start;\n\n /* column-gap persists with empty grid-areas, margin applies only when children exist */\n & > :not(:last-child) {\n margin-right: var(--primer-control-medium-gap, 8px);\n }\n\n /* state */\n\n &:hover {\n text-decoration: none;\n }\n\n /* disabled */\n &[aria-disabled='true'] {\n & .ActionListItem-label,\n & .ActionListItem-description {\n color: var(--color-primer-fg-disabled);\n }\n\n & .ActionListItem-visual {\n fill: var(--color-primer-fg-disabled);\n }\n\n @media (hover: hover) {\n &:hover {\n cursor: not-allowed;\n background-color: transparent;\n }\n }\n }\n\n /* collapsible item [aria-expanded] */\n\n /* nesting (single level)\n target items inside expanded subgroups */\n &[aria-expanded] {\n & + .ActionList--subGroup {\n @media screen and (prefers-reduced-motion: no-preference) {\n transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);\n }\n\n & .ActionListContent {\n padding-left: var(--base-size-24, 24px);\n }\n }\n\n /* has 16px leading visual */\n &.ActionListContent--visual16 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-32, 32px);\n }\n }\n\n /* has 20px leading visual */\n &.ActionListContent--visual20 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-36, 36px);\n }\n }\n\n /* has 24px leading visual */\n &.ActionListContent--visual24 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-40, 40px);\n }\n }\n }\n\n &[aria-expanded='true'] {\n & .ActionListItem-collapseIcon {\n transition: transform 120ms linear;\n transform: scaleY(-1);\n }\n\n & + .ActionList--subGroup {\n height: auto;\n overflow: visible;\n visibility: visible;\n opacity: 1;\n transform: translateY(0);\n }\n\n &.ActionListContent--hasActiveSubItem {\n & > .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold, 600);\n }\n }\n }\n\n &[aria-expanded='false'] {\n & .ActionListItem-collapseIcon {\n transition: transform 120ms linear;\n transform: scaleY(1);\n }\n\n & + .ActionList--subGroup {\n height: 0;\n overflow: hidden;\n visibility: hidden;\n opacity: 0;\n transform: translateY(calc(-1 * var(--base-size-16, 16px)));\n }\n\n /* show active indicator on parent collapse if child is active */\n &.ActionListContent--hasActiveSubItem {\n background: var(--color-action-list-item-default-selected-bg);\n\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold, 600);\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n &::after {\n @mixin activeIndicatorLine;\n }\n }\n }\n\n /* sizes */\n\n &.ActionListContent--sizeLarge {\n --primer-actionListContent-paddingBlock: var(--primer-control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));\n }\n\n &.ActionListContent--sizeXLarge {\n --primer-actionListContent-paddingBlock: var(--primer-control-xlarge-paddingBlock, calc((3rem - 1.25rem) / 2));\n }\n\n /* On pointer:coarse (mobile), all list items are large */\n @media (pointer: coarse) {\n --primer-actionListContent-paddingBlock: var(--primer-control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));\n }\n\n &.ActionListContent--blockDescription {\n /* if leading/trailing visual, align with first line of content */\n & .ActionListItem-visual {\n place-self: start;\n }\n }\n}\n\n/* place children on grid */\n\n.ActionListItem-action--leading {\n grid-area: leadingAction;\n}\n\n.ActionListItem-visual--leading {\n grid-area: leadingVisual;\n}\n\n.ActionListItem-visual--trailing {\n grid-area: trailingVisual;\n}\n\n.ActionListItem-action--trailing {\n grid-area: trailingAction;\n}\n\n/* wrapper span\n default block */\n.ActionListItem-descriptionWrap {\n grid-area: label;\n display: flex;\n flex-direction: column;\n gap: var(--base-size-4, 4px);\n\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold, 600);\n }\n}\n\n/* inline */\n.ActionListItem-descriptionWrap--inline {\n position: relative;\n flex-direction: row;\n align-items: baseline;\n gap: var(--base-size-8, 8px);\n}\n\n/* description */\n.ActionListItem-description {\n font-size: var(--primer-text-body-size-small, 12px);\n font-weight: var(--base-text-weight-normal, 400);\n line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n color: var(--color-fg-muted);\n}\n\n/* helper for grid alignment with multi-line content\n span wrapping svg or text */\n.ActionListItem-visual,\n.ActionListItem-action {\n display: flex;\n min-height: var(--primer-control-medium-lineBoxHeight, 20px);\n color: var(--color-fg-muted);\n pointer-events: none;\n fill: var(--color-fg-muted);\n align-items: center;\n}\n\n/* text */\n.ActionListItem-label {\n position: relative;\n font-size: var(--primer-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-normal, 400);\n line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));\n color: var(--color-fg-default);\n grid-area: label;\n}\n\n.ActionListItem-label--truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* nested lists (only supports 1 level currently)\n target ActionListItem--subItem for padding-left to maintain :active :after state */\n\n.ActionListItem--subItem > .ActionListContent > .ActionListItem-label {\n font-size: var(--primer-text-body-size-small, 12px);\n line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n}\n\n/* trailing action icon button */\n\n.ActionListItem--withActions {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n}\n\n.ActionListItem-trailingAction {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n/* show trailing action button on hover */\n\n.ActionListItem--trailingActionHover {\n & .ActionListItem-trailingAction {\n visibility: hidden;\n }\n\n &:hover,\n &:focus-within {\n & .ActionListItem-trailingAction {\n visibility: visible;\n }\n }\n}\n\n/* ActionList::Divider */\n\n.ActionList-sectionDivider {\n /* with children */\n &:not(:empty) {\n display: flex;\n padding-inline: var(--primer-actionListContent-paddingBlock);\n padding-block: var(--base-size-8, 8px);\n font-size: var(--primer-text-body-size-small, 12px);\n line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n font-weight: var(--base-text-weight-semibold, 600);\n color: var(--color-fg-muted);\n flex-direction: column;\n }\n\n /* no children */\n &:empty {\n display: block;\n height: var(--primer-borderWidth-thin, 1px);\n padding: 0;\n margin-block-start: calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));\n margin-block-end: var(--base-size-8, 8px);\n margin-inline: calc(-1 * var(--base-size-8, 8px));\n list-style: none;\n background: var(--color-action-list-item-inline-divider);\n border: 0;\n }\n\n & .ActionList-sectionDivider-title {\n font-size: var(--primer-text-body-size-small, 12px);\n font-weight: var(--base-text-weight-semibold, 600);\n color: var(--color-fg-muted);\n }\n}\n\n.ActionList-sectionDivider--filled {\n margin-block-start: calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));\n margin-block-end: var(--base-size-8, 8px);\n margin-inline: calc(-1 * var(--base-size-8, 8px));\n background: var(--color-canvas-subtle);\n border-top: solid var(--primer-borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);\n border-bottom: solid var(--primer-borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);\n\n /* if no children, treat as divider */\n &:empty {\n height: var(--base-size-8, 8px);\n box-sizing: border-box;\n }\n\n &:first-child {\n margin-block-start: 0;\n }\n}\n","/* active indicator line for navlist items */\n@define-mixin activeIndicatorLine $padding-left: calc(-1 * var(--base-size-8, 8px)) {\n position: absolute;\n top: calc(50% - 12px);\n left: $padding-left;\n width: var(--base-size-4, 4px);\n height: var(--base-size-24, 24px);\n content: '';\n background: var(--color-accent-fg);\n border-radius: var(--primer-borderRadius-medium, 6px);\n}\n"]}
data/app/components/primer/alpha/action_list.pcss CHANGED
@@ -146,21 +146,6 @@
146
146
  box-shadow: var(--primer-borderInset-thin, 1px) var(--color-action-list-item-default-active-border);
147
147
  }
148
148
 
149
- @media screen and (prefers-reduced-motion: no-preference) {
150
- animation: ActionListItem-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1);
151
- }
152
-
153
- @keyframes ActionListItem-active-bg {
154
- 50% {
155
- box-shadow: inset 0 2px 12px 6px rgba(var(--color-canvas-default), 0.4);
156
- transform: scale(1);
157
- }
158
-
159
- 100% {
160
- transform: scale(0.97);
161
- }
162
- }
163
-
164
149
  & .ActionListItem-label::before,
165
150
  & + .ActionListItem .ActionListItem-label::before {
166
151
  visibility: hidden;
data/app/components/primer/alpha/auto_complete.css CHANGED
@@ -1 +1 @@
1
- .autocomplete-label-stacked{display:block;margin-bottom:6px}.autocomplete-label-inline{display:inline;margin-right:6px}@media (max-width:calc(48rem - 0.02px)){.autocomplete-label-inline{display:block;margin-bottom:6px}}.autocomplete-body{display:inline;position:relative}.autocomplete-embedded-icon-wrap{align-items:center;display:inline-flex;padding:4px 8px}.autocomplete-embedded-icon-wrap:focus-within{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}.autocomplete-embedded-icon-wrap .form-control{border:none;box-shadow:none;margin-left:8px;padding:0}.autocomplete-embedded-icon-wrap .form-control:focus{box-shadow:none}.autocomplete-embedded-icon-wrap .form-control:focus-visible{box-shadow:none}.autocomplete-results{background:var(--color-canvas-overlay);border:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);border-radius:var(--primer-borderRadius-medium,6px);box-shadow:var(--color-shadow-medium);font-size:13px;left:0;list-style:none;max-height:20em;min-width:100%;overflow-y:auto;position:absolute;width:max-content;z-index:99}.autocomplete-item{background-color:var(--color-canvas-overlay);border:0;color:var(--color-fg-default);cursor:pointer;display:block;font-weight:var(--base-text-weight-semibold,600);overflow:hidden;padding:4px 8px;text-align:left;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;width:100%}.autocomplete-item:hover{background-color:var(--color-accent-emphasis);color:var(--color-fg-on-emphasis);text-decoration:none}.autocomplete-item:hover *{color:inherit!important}.autocomplete-item.navigation-focus,.autocomplete-item.selected,.autocomplete-item[aria-selected=true]{background-color:var(--color-accent-emphasis);color:var(--color-fg-on-emphasis);text-decoration:none}.autocomplete-item.navigation-focus *,.autocomplete-item.selected *,.autocomplete-item[aria-selected=true] *{color:inherit!important}
1
+ .autocomplete-label-stacked{display:block;margin-bottom:6px}.autocomplete-label-inline{display:inline;margin-right:6px}@media (max-width:543.98px){.autocomplete-label-inline{display:block;margin-bottom:6px}}.autocomplete-body{display:inline;position:relative}.autocomplete-embedded-icon-wrap{align-items:center;display:inline-flex;padding:4px 8px}.autocomplete-embedded-icon-wrap:focus-within{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}.autocomplete-embedded-icon-wrap .form-control{border:none;box-shadow:none;margin-left:8px;padding:0}.autocomplete-embedded-icon-wrap .form-control:focus{box-shadow:none}.autocomplete-embedded-icon-wrap .form-control:focus-visible{box-shadow:none}.autocomplete-results{background:var(--color-canvas-overlay);border:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);border-radius:var(--primer-borderRadius-medium,6px);box-shadow:var(--color-shadow-medium);font-size:13px;left:0;list-style:none;max-height:20em;min-width:100%;overflow-y:auto;position:absolute;width:max-content;z-index:99}.autocomplete-item{background-color:var(--color-canvas-overlay);border:0;color:var(--color-fg-default);cursor:pointer;display:block;font-weight:var(--base-text-weight-semibold,600);overflow:hidden;padding:4px 8px;text-align:left;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;width:100%}.autocomplete-item:hover{background-color:var(--color-accent-emphasis);color:var(--color-fg-on-emphasis);text-decoration:none}.autocomplete-item:hover *{color:inherit!important}.autocomplete-item.navigation-focus,.autocomplete-item.selected,.autocomplete-item[aria-selected=true]{background-color:var(--color-accent-emphasis);color:var(--color-fg-on-emphasis);text-decoration:none}.autocomplete-item.navigation-focus *,.autocomplete-item.selected *,.autocomplete-item[aria-selected=true] *{color:inherit!important}
data/app/components/primer/alpha/auto_complete.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["auto_complete.pcss","../../../../lib/postcss_mixins/focusBoxShadowInset.pcss"],"names":[],"mappings":"AAMA,4BACE,aAAc,CACd,iBACF,CAGA,2BACE,cAAe,CACf,gBACF,CAGA,wCACE,2BACE,aAAc,CACd,iBACF,CACF,CAGA,mBAEE,cAAe,CADf,iBAEF,CAGA,iCAGE,kBAAmB,CAFnB,mBAAoB,CACpB,eAuBF,CApBE,8CCnCA,mCAAoC,CAEpC,iDAAmD,CADnD,YDsCA,CAEA,+CAGE,WAAY,CACZ,eAAgB,CAFhB,eAAgB,CADhB,SAYF,CAPE,qDACE,eACF,CAEA,6DACE,eACF,CAKJ,sBAUE,sCAAuC,CACvC,2EAA6E,CAC7E,mDAAqD,CACrD,qCAAsC,CALtC,cAAe,CANf,MAAO,CAOP,eAAgB,CAHhB,eAAgB,CADhB,cAAe,CAEf,eAAgB,CANhB,iBAAkB,CAGlB,iBAAkB,CADlB,UAWF,CAKA,mBAYE,4CAA6C,CAC7C,QAAS,CAPT,6BAA8B,CAK9B,cAAe,CAVf,aAAc,CAId,gDAAkD,CADlD,eAAgB,CADhB,eAAgB,CAIhB,eAAgB,CAChB,oBAAqB,CACrB,sBAAuB,CACvB,kBAAmB,CARnB,UAoCF,CAvBE,yBAGE,6CAA8C,CAF9C,iCAAkC,CAClC,oBAOF,CAHE,2BACE,uBACF,CAGF,uGAKE,6CAA8C,CAF9C,iCAAkC,CAClC,oBAOF,CAHE,6GACE,uBACF","file":"auto_complete.css","sourcesContent":["/* autocomplete */\n\n/* This file can be deprecated when AutoComplete is upstreamed to PVC + rolled out to dotcom https://github.com/github/primer/issues/796\n** AutoComplete relies on FormControl, Overlay and ActionList CSS */\n\n/* Stacked label (default) */\n.autocomplete-label-stacked {\n display: block;\n margin-bottom: 6px;\n}\n\n/* Inline label (non-default) */\n.autocomplete-label-inline {\n display: inline;\n margin-right: 6px;\n}\n\n/* Switch to stacked at smaller viewport */\n@media (--primer-viewportRange-narrow-viewport) {\n .autocomplete-label-inline {\n display: block;\n margin-bottom: 6px;\n }\n}\n\n/* Wrapper for the input and result elements to ensure alignment */\n.autocomplete-body {\n position: relative;\n display: inline;\n}\n\n/* Wrapper and conditional styles for when an icon is added */\n.autocomplete-embedded-icon-wrap {\n display: inline-flex;\n padding: 4px 8px;\n align-items: center;\n\n &:focus-within {\n border-color: var(--color-accent-fg);\n\n @mixin focusBoxShadowInset;\n }\n\n & .form-control {\n padding: 0;\n margin-left: 8px;\n border: none;\n box-shadow: none;\n\n &:focus {\n box-shadow: none;\n }\n\n &:focus-visible {\n box-shadow: none;\n }\n }\n}\n\n/* A pop up list of items used to show autocompleted results */\n.autocomplete-results {\n position: absolute;\n left: 0;\n z-index: 99;\n width: max-content;\n min-width: 100%;\n max-height: 20em;\n overflow-y: auto;\n font-size: 13px;\n list-style: none;\n background: var(--color-canvas-overlay);\n border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n border-radius: var(--primer-borderRadius-medium, 6px);\n box-shadow: var(--color-shadow-medium);\n}\n\n/* One of the items that appears within an autocomplete group\n** Bold black text on white background */\n\n.autocomplete-item {\n display: block;\n width: 100%;\n padding: 4px 8px;\n overflow: hidden;\n font-weight: var(--base-text-weight-semibold, 600);\n color: var(--color-fg-default);\n text-align: left;\n text-decoration: none;\n text-overflow: ellipsis;\n white-space: nowrap;\n cursor: pointer;\n background-color: var(--color-canvas-overlay);\n border: 0;\n\n &:hover {\n color: var(--color-fg-on-emphasis);\n text-decoration: none;\n background-color: var(--color-accent-emphasis);\n\n /* Inherit color on all child elements to ensure enough contrast */\n & * {\n color: inherit !important;\n }\n }\n\n &.selected,\n &[aria-selected='true'],\n &.navigation-focus {\n color: var(--color-fg-on-emphasis);\n text-decoration: none;\n background-color: var(--color-accent-emphasis);\n\n /* Inherit color on all child elements to ensure enough contrast */\n & * {\n color: inherit !important;\n }\n }\n}\n","/* inset box-shadow for form controls */\n@define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--color-accent-fg) {\n border-color: var(--color-accent-fg);\n outline: none;\n box-shadow: inset 0 0 0 $outlineWidth $outlineColor;\n}\n"]}
1
+ {"version":3,"sources":["auto_complete.pcss","../../../../lib/postcss_mixins/focusBoxShadowInset.pcss"],"names":[],"mappings":"AAMA,4BACE,aAAc,CACd,iBACF,CAGA,2BACE,cAAe,CACf,gBACF,CAGA,4BACE,2BACE,aAAc,CACd,iBACF,CACF,CAGA,mBAEE,cAAe,CADf,iBAEF,CAGA,iCAGE,kBAAmB,CAFnB,mBAAoB,CACpB,eAuBF,CApBE,8CCnCA,mCAAoC,CAEpC,iDAAmD,CADnD,YDsCA,CAEA,+CAGE,WAAY,CACZ,eAAgB,CAFhB,eAAgB,CADhB,SAYF,CAPE,qDACE,eACF,CAEA,6DACE,eACF,CAKJ,sBAUE,sCAAuC,CACvC,2EAA6E,CAC7E,mDAAqD,CACrD,qCAAsC,CALtC,cAAe,CANf,MAAO,CAOP,eAAgB,CAHhB,eAAgB,CADhB,cAAe,CAEf,eAAgB,CANhB,iBAAkB,CAGlB,iBAAkB,CADlB,UAWF,CAKA,mBAYE,4CAA6C,CAC7C,QAAS,CAPT,6BAA8B,CAK9B,cAAe,CAVf,aAAc,CAId,gDAAkD,CADlD,eAAgB,CADhB,eAAgB,CAIhB,eAAgB,CAChB,oBAAqB,CACrB,sBAAuB,CACvB,kBAAmB,CARnB,UAoCF,CAvBE,yBAGE,6CAA8C,CAF9C,iCAAkC,CAClC,oBAOF,CAHE,2BACE,uBACF,CAGF,uGAKE,6CAA8C,CAF9C,iCAAkC,CAClC,oBAOF,CAHE,6GACE,uBACF","file":"auto_complete.css","sourcesContent":["/* autocomplete */\n\n/* This file can be deprecated when AutoComplete is upstreamed to PVC + rolled out to dotcom https://github.com/github/primer/issues/796\n** AutoComplete relies on FormControl, Overlay and ActionList CSS */\n\n/* Stacked label (default) */\n.autocomplete-label-stacked {\n display: block;\n margin-bottom: 6px;\n}\n\n/* Inline label (non-default) */\n.autocomplete-label-inline {\n display: inline;\n margin-right: 6px;\n}\n\n/* Switch to stacked at smaller viewport */\n@media (max-width: 543.98px) {\n .autocomplete-label-inline {\n display: block;\n margin-bottom: 6px;\n }\n}\n\n/* Wrapper for the input and result elements to ensure alignment */\n.autocomplete-body {\n position: relative;\n display: inline;\n}\n\n/* Wrapper and conditional styles for when an icon is added */\n.autocomplete-embedded-icon-wrap {\n display: inline-flex;\n padding: 4px 8px;\n align-items: center;\n\n &:focus-within {\n border-color: var(--color-accent-fg);\n\n @mixin focusBoxShadowInset;\n }\n\n & .form-control {\n padding: 0;\n margin-left: 8px;\n border: none;\n box-shadow: none;\n\n &:focus {\n box-shadow: none;\n }\n\n &:focus-visible {\n box-shadow: none;\n }\n }\n}\n\n/* A pop up list of items used to show autocompleted results */\n.autocomplete-results {\n position: absolute;\n left: 0;\n z-index: 99;\n width: max-content;\n min-width: 100%;\n max-height: 20em;\n overflow-y: auto;\n font-size: 13px;\n list-style: none;\n background: var(--color-canvas-overlay);\n border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n border-radius: var(--primer-borderRadius-medium, 6px);\n box-shadow: var(--color-shadow-medium);\n}\n\n/* One of the items that appears within an autocomplete group\n** Bold black text on white background */\n\n.autocomplete-item {\n display: block;\n width: 100%;\n padding: 4px 8px;\n overflow: hidden;\n font-weight: var(--base-text-weight-semibold, 600);\n color: var(--color-fg-default);\n text-align: left;\n text-decoration: none;\n text-overflow: ellipsis;\n white-space: nowrap;\n cursor: pointer;\n background-color: var(--color-canvas-overlay);\n border: 0;\n\n &:hover {\n color: var(--color-fg-on-emphasis);\n text-decoration: none;\n background-color: var(--color-accent-emphasis);\n\n /* Inherit color on all child elements to ensure enough contrast */\n & * {\n color: inherit !important;\n }\n }\n\n &.selected,\n &[aria-selected='true'],\n &.navigation-focus {\n color: var(--color-fg-on-emphasis);\n text-decoration: none;\n background-color: var(--color-accent-emphasis);\n\n /* Inherit color on all child elements to ensure enough contrast */\n & * {\n color: inherit !important;\n }\n }\n}\n","/* inset box-shadow for form controls */\n@define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--color-accent-fg) {\n border-color: var(--color-accent-fg);\n outline: none;\n box-shadow: inset 0 0 0 $outlineWidth $outlineColor;\n}\n"]}
data/app/components/primer/alpha/auto_complete.pcss CHANGED
@@ -16,7 +16,7 @@
16
16
  }
17
17
 
18
18
  /* Switch to stacked at smaller viewport */
19
- @media (--primer-viewportRange-narrow-viewport) {
19
+ @media (max-width: 543.98px) {
20
20
  .autocomplete-label-inline {
21
21
  display: block;
22
22
  margin-bottom: 6px;
data/app/components/primer/alpha/banner.css CHANGED
@@ -1 +1 @@
1
- .Banner{background-image:linear-gradient(var(--color-accent-subtle),var(--color-accent-subtle));border:var(--primer-borderWidth-thin,max(1px,.0625rem)) solid var(--color-accent-muted);border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-default);display:grid;grid-auto-flow:column;grid-template-areas:"visual message actions close";grid-template-columns:min-content 1fr minmax(0,auto) min-content;grid-template-rows:min-content;padding:var(--base-size-8,8px);position:relative}@media (max-width:calc(48rem - 0.02px)){.Banner{grid-template-areas:"visual message close" ". actions actions";grid-template-columns:min-content 1fr min-content;grid-template-rows:min-content min-content}.Banner .Banner-actions{margin:var(--base-size-8,8px) 0 0 var(--base-size-8,8px)}}.Banner .Banner-visual{align-self:start;display:grid;grid-area:visual;padding:var(--base-size-6,6px) var(--base-size-8,8px)}.Banner .Banner-visual>.octicon{margin-bottom:calc(var(--base-size-4, 4px)/2);margin-top:calc(var(--base-size-4, 4px)/2)}.Banner .Banner-visual>*{align-self:center}.Banner .Banner-message{align-self:center;grid-area:message;padding:var(--base-size-6,6px) var(--base-size-8,8px)}.Banner .Banner-message p:last-child{margin-bottom:0}.Banner .Banner-message .Banner-title:not(:only-child){font-weight:var(--base-text-weight-semibold,600);margin-bottom:0}.Banner .Banner-actions{grid-area:actions}.Banner .Banner-actions:last-child{align-self:center}.Banner .Banner-close{grid-area:close;margin-left:var(--primer-controlStack-medium-gap-condensed,8px)}.Banner .Banner-visual .octicon{color:var(--color-accent-fg)}.Banner.Banner--warning{background-image:linear-gradient(var(--color-attention-subtle),var(--color-attention-subtle));border-color:var(--color-attention-muted);color:var(--color-fg-default)}.Banner.Banner--warning .Banner-visual .octicon{color:var(--color-attention-fg)}.Banner.Banner--error{background-image:linear-gradient(var(--color-danger-subtle),var(--color-danger-subtle));border-color:var(--color-danger-muted);color:var(--color-fg-default)}.Banner.Banner--error .Banner-visual .octicon{color:var(--color-danger-fg)}.Banner.Banner--success{background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));border-color:var(--color-success-muted);color:var(--color-fg-default)}.Banner.Banner--success .Banner-visual .octicon{color:var(--color-success-fg)}.Banner.Banner--full{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--primer-borderWidth-thin, max(1px, .0625rem))*-1)}@media (--primer-viewportRange-narrowLandscape ){.Banner.Banner--full-whenNarrow{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--primer-borderWidth-thin, max(1px, .0625rem))*-1)}}
1
+ .Banner{background-image:linear-gradient(var(--color-accent-subtle),var(--color-accent-subtle));border:var(--primer-borderWidth-thin,max(1px,.0625rem)) solid var(--color-accent-muted);border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-default);display:grid;grid-auto-flow:column;grid-template-areas:"visual message actions close";grid-template-columns:min-content 1fr minmax(0,auto) min-content;grid-template-rows:min-content;padding:var(--base-size-8,8px);position:relative}@media (max-width:543.98px){.Banner{grid-template-areas:"visual message close" ". actions actions";grid-template-columns:min-content 1fr min-content;grid-template-rows:min-content min-content}.Banner .Banner-actions{margin:var(--base-size-8,8px) 0 0 var(--base-size-8,8px)}}.Banner .Banner-visual{align-self:start;display:grid;grid-area:visual;padding:var(--base-size-6,6px) var(--base-size-8,8px)}.Banner .Banner-visual>.octicon{margin-block:calc(var(--base-size-4, 4px)/2)}.Banner .Banner-visual>*{align-self:center}.Banner .Banner-message{align-self:center;grid-area:message;padding:var(--base-size-6,6px) var(--base-size-8,8px)}.Banner .Banner-message p:last-child{margin-bottom:0}.Banner .Banner-message .Banner-title:not(:only-child){font-weight:var(--base-text-weight-semibold,600);margin-bottom:0}.Banner .Banner-actions{grid-area:actions}.Banner .Banner-actions:last-child{align-self:center}.Banner .Banner-close{grid-area:close;margin-left:var(--primer-controlStack-medium-gap-condensed,8px)}.Banner .Banner-visual .octicon{color:var(--color-accent-fg)}.Banner.Banner--warning{background-image:linear-gradient(var(--color-attention-subtle),var(--color-attention-subtle));border-color:var(--color-attention-muted);color:var(--color-fg-default)}.Banner.Banner--warning .Banner-visual .octicon{color:var(--color-attention-fg)}.Banner.Banner--error{background-image:linear-gradient(var(--color-danger-subtle),var(--color-danger-subtle));border-color:var(--color-danger-muted);color:var(--color-fg-default)}.Banner.Banner--error .Banner-visual .octicon{color:var(--color-danger-fg)}.Banner.Banner--success{background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));border-color:var(--color-success-muted);color:var(--color-fg-default)}.Banner.Banner--success .Banner-visual .octicon{color:var(--color-success-fg)}.Banner.Banner--full{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--primer-borderWidth-thin, max(1px, .0625rem))*-1)}@media (max-width:767.98px){.Banner.Banner--full-whenNarrow{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--primer-borderWidth-thin, max(1px, .0625rem))*-1)}}
data/app/components/primer/alpha/banner.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["banner.pcss"],"names":[],"mappings":"AAEA,QAKE,uFAAyF,CACzF,uFAA2F,CAC3F,mDAAqD,CAHrD,6BAA8B,CAF9B,YAAa,CAMb,qBAAsB,CACtB,kDAAmD,CACnD,gEAAiE,CACjE,8BAA+B,CAR/B,8BAAgC,CAFhC,iBA0HF,CA7GE,wCAdF,QAeI,8DAEqB,CACrB,iDAAkD,CAClD,0CAwGJ,CAtGI,wBACI,wDACJ,CACF,CAIA,uBAIE,gBAAiB,CAHjB,YAAa,CAEb,gBAAiB,CADjB,qDAWF,CAPE,gCACE,6CAA+C,CAA/C,0CACF,CAEA,yBACE,iBACF,CAGF,wBAGE,iBAAkB,CADlB,iBAAkB,CADlB,qDAYF,CARE,qCACE,eACF,CAEA,uDAEE,gDAAkD,CADlD,eAEF,CAGF,wBACE,iBAKF,CAHE,mCACE,iBACF,CAIF,sBACE,eAAgB,CAChB,+DACF,CAEA,gCACE,4BACF,CAEA,wBAEE,6FAA+F,CAC/F,yCAA0C,CAF1C,6BAOF,CAHE,gDACE,+BACF,CAGF,sBAEE,uFAAyF,CACzF,sCAAuC,CAFvC,6BAOF,CAHE,8CACE,4BACF,CAGF,wBAEE,yFAA2F,CAC3F,uCAAwC,CAFxC,6BAOF,CAHE,gDACE,6BACF,CAKF,qBAGE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,sEAIF,CAEA,iDACE,gCAGE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,sEAIF,CACF","file":"banner.css","sourcesContent":["/* Banner alert */\n\n.Banner {\n position: relative;\n display: grid;\n padding: var(--base-size-8, 8px);\n color: var(--color-fg-default);\n background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));\n border: var(--primer-borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-accent-muted);\n border-radius: var(--primer-borderRadius-medium, 6px);\n grid-auto-flow: column;\n grid-template-areas: 'visual message actions close';\n grid-template-columns: min-content 1fr minmax(0,auto) min-content;\n grid-template-rows: min-content;\n\n /* `sm` breakpoint variantion */\n @media (--primer-viewportRange-narrow-viewport) {\n grid-template-areas:\n 'visual message close'\n '. actions actions';\n grid-template-columns: min-content 1fr min-content;\n grid-template-rows: min-content min-content;\n\n & .Banner-actions {\n margin: var(--base-size-8, 8px) 0 0 var(--base-size-8, 8px);\n }\n }\n\n /* Elements */\n\n & .Banner-visual {\n display: grid;\n padding: var(--base-size-6, 6px) var(--base-size-8, 8px);\n grid-area: visual;\n align-self: start;\n\n & > .octicon {\n margin-block: calc(var(--base-size-4, 4px) / 2);\n }\n\n & > * {\n align-self: center;\n }\n }\n\n & .Banner-message {\n padding: var(--base-size-6, 6px) var(--base-size-8, 8px);\n grid-area: message;\n align-self: center;\n\n & p:last-child {\n margin-bottom: 0;\n }\n\n & .Banner-title:not(:only-child) {\n margin-bottom: 0;\n font-weight: var(--base-text-weight-semibold, 600);\n }\n }\n\n & .Banner-actions {\n grid-area: actions;\n\n &:last-child {\n align-self: center;\n }\n }\n\n /* is this used anywhere? could not find any use, but unsure */\n & .Banner-close {\n grid-area: close;\n margin-left: var(--primer-controlStack-medium-gap-condensed, 8px);\n }\n\n & .Banner-visual .octicon {\n color: var(--color-accent-fg);\n }\n\n &.Banner--warning {\n color: var(--color-fg-default);\n background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));\n border-color: var(--color-attention-muted);\n\n & .Banner-visual .octicon {\n color: var(--color-attention-fg);\n }\n }\n\n &.Banner--error {\n color: var(--color-fg-default);\n background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));\n border-color: var(--color-danger-muted);\n\n & .Banner-visual .octicon {\n color: var(--color-danger-fg);\n }\n }\n\n &.Banner--success {\n color: var(--color-fg-default);\n background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));\n border-color: var(--color-success-muted);\n\n & .Banner-visual .octicon {\n color: var(--color-success-fg);\n }\n }\n\n /* Full-width */\n\n &.Banner--full {\n margin-top: calc(var(--primer-borderWidth-thin, max(1px, 0.0625rem)) * -1);\n border-right: 0;\n border-left: 0;\n border-radius: 0;\n }\n\n @media (--primer-viewportRange-narrowLandscape) {\n &.Banner--full-whenNarrow {\n margin-top: calc(var(--primer-borderWidth-thin, max(1px, 0.0625rem)) * -1);\n border-right: 0;\n border-left: 0;\n border-radius: 0;\n }\n }\n}\n"]}
1
+ {"version":3,"sources":["banner.pcss"],"names":[],"mappings":"AAEA,QAKE,uFAAyF,CACzF,uFAA2F,CAC3F,mDAAqD,CAHrD,6BAA8B,CAF9B,YAAa,CAMb,qBAAsB,CACtB,kDAAmD,CACnD,gEAAiE,CACjE,8BAA+B,CAR/B,8BAAgC,CAFhC,iBA0HF,CA7GE,4BAdF,QAeI,8DAEqB,CACrB,iDAAkD,CAClD,0CAwGJ,CAtGI,wBACI,wDACJ,CACF,CAIA,uBAIE,gBAAiB,CAHjB,YAAa,CAEb,gBAAiB,CADjB,qDAWF,CAPE,gCACE,4CACF,CAEA,yBACE,iBACF,CAGF,wBAGE,iBAAkB,CADlB,iBAAkB,CADlB,qDAYF,CARE,qCACE,eACF,CAEA,uDAEE,gDAAkD,CADlD,eAEF,CAGF,wBACE,iBAKF,CAHE,mCACE,iBACF,CAIF,sBACE,eAAgB,CAChB,+DACF,CAEA,gCACE,4BACF,CAEA,wBAEE,6FAA+F,CAC/F,yCAA0C,CAF1C,6BAOF,CAHE,gDACE,+BACF,CAGF,sBAEE,uFAAyF,CACzF,sCAAuC,CAFvC,6BAOF,CAHE,8CACE,4BACF,CAGF,wBAEE,yFAA2F,CAC3F,uCAAwC,CAFxC,6BAOF,CAHE,gDACE,6BACF,CAKF,qBAGE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,sEAIF,CAEA,4BACE,gCAGE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,sEAIF,CACF","file":"banner.css","sourcesContent":["/* Banner alert */\n\n.Banner {\n position: relative;\n display: grid;\n padding: var(--base-size-8, 8px);\n color: var(--color-fg-default);\n background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));\n border: var(--primer-borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-accent-muted);\n border-radius: var(--primer-borderRadius-medium, 6px);\n grid-auto-flow: column;\n grid-template-areas: 'visual message actions close';\n grid-template-columns: min-content 1fr minmax(0,auto) min-content;\n grid-template-rows: min-content;\n\n /* `sm` breakpoint variantion */\n @media (max-width: 543.98px) {\n grid-template-areas:\n 'visual message close'\n '. actions actions';\n grid-template-columns: min-content 1fr min-content;\n grid-template-rows: min-content min-content;\n\n & .Banner-actions {\n margin: var(--base-size-8, 8px) 0 0 var(--base-size-8, 8px);\n }\n }\n\n /* Elements */\n\n & .Banner-visual {\n display: grid;\n padding: var(--base-size-6, 6px) var(--base-size-8, 8px);\n grid-area: visual;\n align-self: start;\n\n & > .octicon {\n margin-block: calc(var(--base-size-4, 4px) / 2);\n }\n\n & > * {\n align-self: center;\n }\n }\n\n & .Banner-message {\n padding: var(--base-size-6, 6px) var(--base-size-8, 8px);\n grid-area: message;\n align-self: center;\n\n & p:last-child {\n margin-bottom: 0;\n }\n\n & .Banner-title:not(:only-child) {\n margin-bottom: 0;\n font-weight: var(--base-text-weight-semibold, 600);\n }\n }\n\n & .Banner-actions {\n grid-area: actions;\n\n &:last-child {\n align-self: center;\n }\n }\n\n /* is this used anywhere? could not find any use, but unsure */\n & .Banner-close {\n grid-area: close;\n margin-left: var(--primer-controlStack-medium-gap-condensed, 8px);\n }\n\n & .Banner-visual .octicon {\n color: var(--color-accent-fg);\n }\n\n &.Banner--warning {\n color: var(--color-fg-default);\n background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));\n border-color: var(--color-attention-muted);\n\n & .Banner-visual .octicon {\n color: var(--color-attention-fg);\n }\n }\n\n &.Banner--error {\n color: var(--color-fg-default);\n background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));\n border-color: var(--color-danger-muted);\n\n & .Banner-visual .octicon {\n color: var(--color-danger-fg);\n }\n }\n\n &.Banner--success {\n color: var(--color-fg-default);\n background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));\n border-color: var(--color-success-muted);\n\n & .Banner-visual .octicon {\n color: var(--color-success-fg);\n }\n }\n\n /* Full-width */\n\n &.Banner--full {\n margin-top: calc(var(--primer-borderWidth-thin, max(1px, 0.0625rem)) * -1);\n border-right: 0;\n border-left: 0;\n border-radius: 0;\n }\n\n @media (max-width: 767.98px) {\n &.Banner--full-whenNarrow {\n margin-top: calc(var(--primer-borderWidth-thin, max(1px, 0.0625rem)) * -1);\n border-right: 0;\n border-left: 0;\n border-radius: 0;\n }\n }\n}\n"]}
data/app/components/primer/alpha/banner.pcss CHANGED
@@ -14,7 +14,7 @@
14
14
  grid-template-rows: min-content;
15
15
 
16
16
  /* `sm` breakpoint variantion */
17
- @media (--primer-viewportRange-narrow-viewport) {
17
+ @media (max-width: 543.98px) {
18
18
  grid-template-areas:
19
19
  'visual message close'
20
20
  '. actions actions';
@@ -115,7 +115,7 @@
115
115
  border-radius: 0;
116
116
  }
117
117
 
118
- @media (--primer-viewportRange-narrowLandscape) {
118
+ @media (max-width: 767.98px) {
119
119
  &.Banner--full-whenNarrow {
120
120
  margin-top: calc(var(--primer-borderWidth-thin, max(1px, 0.0625rem)) * -1);
121
121
  border-right: 0;
data/app/components/primer/alpha/dialog/body.rb CHANGED
@@ -6,6 +6,9 @@ module Primer
6
6
  # A `Dialog::Body` is a compositional component, used to render the
7
7
  # Body of a dialog. See <%= link_to_component(Primer::Alpha::Dialog) %>.
8
8
  class Body < Primer::Component
9
+ status :alpha
10
+ audited_at "2022-10-10"
11
+
9
12
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
10
13
  def initialize(**system_arguments)
11
14
  @system_arguments = deny_tag_argument(**system_arguments)
data/app/components/primer/alpha/dialog/footer.rb CHANGED
@@ -6,6 +6,9 @@ module Primer
6
6
  # A `Dialog::Footer` is a compositional component, used to render the
7
7
  # Footer of a dialog. See <%= link_to_component(Primer::Alpha::Dialog) %>.
8
8
  class Footer < Primer::Component
9
+ status :alpha
10
+ audited_at "2022-10-10"
11
+
9
12
  # @param show_divider [Boolean] Show a divider between the footer and body.
10
13
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
11
14
  def initialize(
data/app/components/primer/alpha/dialog/header.rb CHANGED
@@ -6,6 +6,9 @@ module Primer
6
6
  # A `Dialog::Header` is a compositional component, used to render the
7
7
  # Header of a dialog. See <%= link_to_component(Primer::Alpha::Dialog) %>.
8
8
  class Header < Primer::Component
9
+ status :alpha
10
+ audited_at "2022-10-10"
11
+
9
12
  # @param title [String] Describes the content of the dialog.
10
13
  # @param subtitle [String] Provides dditional context for the dialog, also setting the `aria-describedby` attribute.
11
14
  # @param show_divider [Boolean] Show a divider between the header and body.
data/app/components/primer/alpha/dialog.css ADDED
@@ -0,0 +1 @@
1
+ .Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}.Overlay{background-color:var(--color-canvas-overlay);border-radius:var(--primer-borderRadius-large,12px);box-shadow:var(--color-overlay-shadow);display:flex;flex-direction:column;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;white-space:normal;width:min(var(--overlay-width),100vw - 2rem)}.Overlay.Overlay--size-auto{max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);min-width:192px}.Overlay.Overlay--size-full{height:100vh;width:100vw}.Overlay.Overlay--size-xsmall{--overlay-width:192px;max-height:calc(100vh - 2rem)}.Overlay.Overlay--size-small{--overlay-height:256px;--overlay-width:320px}.Overlay.Overlay--size-small-portrait{--overlay-height:432px;--overlay-width:320px}.Overlay.Overlay--size-medium{--overlay-height:320px;--overlay-width:480px}.Overlay.Overlay--size-medium-portrait{--overlay-height:600px;--overlay-width:480px}.Overlay.Overlay--size-large{--overlay-height:432px;--overlay-width:640px}.Overlay.Overlay--size-xlarge{--overlay-height:600px;--overlay-width:960px}.Overlay.Overlay--height-auto{height:auto}.Overlay.Overlay--height-xsmall{height:min(192px,100vh - 2rem)}.Overlay.Overlay--height-small{height:min(256px,100vh - 2rem)}.Overlay.Overlay--height-medium{height:min(320px,100vh - 2rem)}.Overlay.Overlay--height-large{height:min(432px,100vh - 2rem)}.Overlay.Overlay--height-xlarge{height:min(600px,100vh - 2rem)}.Overlay.Overlay--width-auto{width:auto}.Overlay.Overlay--width-small{width:min(256px,100vw - 2rem)}.Overlay.Overlay--width-medium{width:min(320px,100vw - 2rem)}.Overlay.Overlay--width-large{width:min(480px,100vw - 2rem)}.Overlay.Overlay--width-xlarge{width:min(640px,100vw - 2rem)}.Overlay.Overlay--width-xxlarge{width:min(960px,100vw - 2rem)}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}@keyframes Overlay--motion-scaleFade{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.Overlay-form{flex-grow:1;overflow:auto}.Overlay-form,.Overlay-header{display:flex;flex-direction:column}.Overlay-header{z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--primer-borderWidth-thin, 1px)*-1) var(--color-border-default);padding-bottom:var(--primer-stack-padding-condensed,8px)}.Overlay-header.Overlay-header--divided+.Overlay-body{padding-top:var(--primer-stack-padding-normal,16px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap{gap:var(--primer-stack-gap-condensed,8px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--primer-text-title-size-medium,20px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{font-size:var(--primer-text-body-size-medium,14px)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--primer-stack-gap-condensed,8px);padding:var(--primer-stack-gap-condensed,8px) var(--primer-stack-gap-condensed,8px) 0 var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--primer-control-small-gap,4px);padding:calc(var(--primer-stack-gap-condensed, 8px)*.75) 0 calc(var(--primer-stack-gap-condensed, 8px)*.75) var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-semibold,600);margin:0}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{color:var(--color-fg-muted);font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-normal,400);margin:0}.Overlay-body{flex-grow:1;font-size:var(--primer-text-body-size-medium,14px);overflow-y:auto;padding:var(--primer-stack-padding-normal,16px);padding-top:0;scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--primer-stack-padding-condensed,8px);padding-top:0}.Overlay-body.Overlay-body--paddingNone{padding:0}.Overlay-footer{display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;padding:0 var(--primer-stack-padding-normal,16px) var(--primer-stack-padding-normal,16px) var(--primer-stack-padding-normal,16px);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--primer-borderWidth-thin,1px) var(--color-border-default);padding-top:var(--primer-stack-padding-normal,16px)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--primer-stack-gap-condensed,8px);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--primer-stack-gap-condensed,8px);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--primer-stack-gap-condensed,8px);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid #0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-muted);cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32,32px);padding:0;place-content:center;position:relative;transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;-webkit-user-select:none;user-select:none;width:var(--base-size-32,32px)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--color-btn-hover-bg);border:var(--primer-borderWidth-thin,1px) solid var(--color-btn-hover-bg)}.Overlay-closeButton.close-button{border:var(--primer-borderWidth-thin,1px) solid #0000}.Overlay-backdrop--center{align-items:center;background-color:var(--color-neutral-muted);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--anchor{background-color:initial;position:absolute;z-index:999}.Overlay-backdrop--anchor .Overlay{width:auto}.Overlay-backdrop--side{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--side,.Overlay-backdrop--side.Overlay-backdrop--placement-left{align-items:center;justify-content:left}.Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-top-left-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay{animation:Overlay--motion-slideInRight .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-right{align-items:center;justify-content:right}.Overlay-backdrop--side.Overlay-backdrop--placement-right>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-bottom-right-radius:0;border-top-right-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-right>.Overlay{animation:Overlay--motion-slideInLeft .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-bottom{align-items:end;justify-content:center}.Overlay-backdrop--side.Overlay-backdrop--placement-bottom>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100vh - 2rem);width:100vw}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-bottom>.Overlay{animation:Overlay--motion-slideUp .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-top{align-items:start;justify-content:center}.Overlay-backdrop--side.Overlay-backdrop--placement-top>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-top-left-radius:0;border-top-right-radius:0}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-top>.Overlay{animation:Overlay--motion-slideDown .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--full{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--full .Overlay{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}@media (max-width:767px){.Overlay-backdrop--center-whenNarrow{align-items:center;background-color:var(--color-neutral-muted);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--anchor-whenNarrow{background-color:initial;position:absolute;z-index:999}.Overlay-backdrop--anchor-whenNarrow .Overlay{width:auto}.Overlay-backdrop--side-whenNarrow{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--side-whenNarrow,.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow{align-items:center;justify-content:left}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-top-left-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideInRight .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow{align-items:center;justify-content:right}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-bottom-right-radius:0;border-top-right-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideInLeft .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow{align-items:end;justify-content:center}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100vh - 2rem);width:100vw}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideUp .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow{align-items:start;justify-content:center}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-top-left-radius:0;border-top-right-radius:0}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideDown .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--full-whenNarrow{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--full-whenNarrow .Overlay{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}}@keyframes Overlay--motion-slideDown{0%{transform:translateY(-100%)}}@keyframes Overlay--motion-slideUp{0%{transform:translateY(100%)}}@keyframes Overlay--motion-slideInRight{0%{transform:translateX(-100%)}}@keyframes Overlay--motion-slideInLeft{0%{transform:translateX(100%)}}
data/app/components/primer/alpha/dialog.css.json ADDED
@@ -0,0 +1 @@
1
+ {"name":"alpha/dialog","selectors":[".Overlay--hidden",".Overlay--visibilityHidden",".Overlay",".Overlay.Overlay--size-auto",".Overlay.Overlay--size-full",".Overlay.Overlay--size-xsmall",".Overlay.Overlay--size-small",".Overlay.Overlay--size-small-portrait",".Overlay.Overlay--size-medium",".Overlay.Overlay--size-medium-portrait",".Overlay.Overlay--size-large",".Overlay.Overlay--size-xlarge",".Overlay.Overlay--height-auto",".Overlay.Overlay--height-xsmall",".Overlay.Overlay--height-small",".Overlay.Overlay--height-medium",".Overlay.Overlay--height-large",".Overlay.Overlay--height-xlarge",".Overlay.Overlay--width-auto",".Overlay.Overlay--width-small",".Overlay.Overlay--width-medium",".Overlay.Overlay--width-large",".Overlay.Overlay--width-xlarge",".Overlay.Overlay--width-xxlarge",".Overlay.Overlay--motion-scaleFade","0%","to",".Overlay-form",".Overlay-header",".Overlay-header.Overlay-header--divided",".Overlay-header.Overlay-header--divided+.Overlay-body",".Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap",".Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title",".Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description",".Overlay-header .Overlay-headerContentWrap",".Overlay-header .Overlay-headerContentWrap .Overlay-actionWrap",".Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap",".Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title",".Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description",".Overlay-body",".Overlay-body.Overlay-body--paddingCondensed",".Overlay-body.Overlay-body--paddingNone",".Overlay-footer",".Overlay-footer.Overlay-footer--divided",".Overlay-footer.Overlay-footer--alignStart",".Overlay-footer.Overlay-footer--alignCenter",".Overlay-footer.Overlay-footer--alignEnd",".Overlay-closeButton",".Overlay-closeButton:focus",".Overlay-closeButton:hover",".Overlay-closeButton.close-button",".Overlay-backdrop--center",".Overlay-backdrop--anchor",".Overlay-backdrop--anchor .Overlay",".Overlay-backdrop--side",".Overlay-backdrop--side.Overlay-backdrop--placement-left",".Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay",".Overlay-backdrop--side.Overlay-backdrop--placement-right",".Overlay-backdrop--side.Overlay-backdrop--placement-right>.Overlay",".Overlay-backdrop--side.Overlay-backdrop--placement-bottom",".Overlay-backdrop--side.Overlay-backdrop--placement-bottom>.Overlay",".Overlay-backdrop--side.Overlay-backdrop--placement-top",".Overlay-backdrop--side.Overlay-backdrop--placement-top>.Overlay",".Overlay-backdrop--full",".Overlay-backdrop--full .Overlay",".Overlay-backdrop--center-whenNarrow",".Overlay-backdrop--anchor-whenNarrow",".Overlay-backdrop--anchor-whenNarrow .Overlay",".Overlay-backdrop--side-whenNarrow",".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow",".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow",".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow",".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow>.Overlay-whenNarrow",".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow",".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow>.Overlay-whenNarrow",".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow",".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow",".Overlay-backdrop--full-whenNarrow",".Overlay-backdrop--full-whenNarrow .Overlay"]}
data/app/components/primer/alpha/dialog.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["dialog.pcss"],"names":[],"mappings":"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","file":"dialog.css","sourcesContent":["/* Overlay */\n\n.Overlay--hidden {\n display: none !important;\n}\n\n.Overlay--visibilityHidden {\n height: 0;\n overflow: hidden;\n visibility: hidden;\n opacity: 0;\n}\n\n.Overlay {\n display: flex;\n width: min(var(--overlay-width), 100vw - 2rem);\n min-width: 192px;\n max-height: min(calc(100vh - 2rem), var(--overlay-height));\n white-space: normal;\n flex-direction: column;\n background-color: var(--color-canvas-overlay);\n border-radius: var(--primer-borderRadius-large, 12px);\n box-shadow: var(--color-overlay-shadow);\n opacity: 1;\n\n &.Overlay--size-auto {\n min-width: 192px;\n max-width: calc(100vw - 2rem);\n max-height: calc(100vh - 2rem);\n }\n\n &.Overlay--size-full {\n width: 100vw;\n height: 100vh;\n }\n\n &.Overlay--size-xsmall {\n --overlay-width: 192px;\n\n max-height: calc(100vh - 2rem);\n }\n\n &.Overlay--size-small {\n --overlay-height: 256px;\n --overlay-width: 320px;\n }\n\n &.Overlay--size-small-portrait {\n --overlay-height: 432px;\n --overlay-width: 320px;\n }\n\n &.Overlay--size-medium {\n --overlay-height: 320px;\n --overlay-width: 480px;\n }\n\n &.Overlay--size-medium-portrait {\n --overlay-height: 600px;\n --overlay-width: 480px;\n }\n\n &.Overlay--size-large {\n --overlay-height: 432px;\n --overlay-width: 640px;\n }\n\n &.Overlay--size-xlarge {\n --overlay-height: 600px;\n --overlay-width: 960px;\n }\n\n &.Overlay--height-auto {\n height: auto;\n }\n\n /* start deprecate in favor of Alpha::Dialog */\n &.Overlay--height-xsmall {\n height: min(192px, 100vh - 2rem);\n }\n\n &.Overlay--height-small {\n height: min(256px, 100vh - 2rem);\n }\n\n &.Overlay--height-medium {\n height: min(320px, 100vh - 2rem);\n }\n\n &.Overlay--height-large {\n height: min(432px, 100vh - 2rem);\n }\n\n &.Overlay--height-xlarge {\n height: min(600px, 100vh - 2rem);\n }\n\n &.Overlay--width-auto {\n width: auto;\n }\n\n &.Overlay--width-small {\n width: min(256px, 100vw - 2rem);\n }\n\n &.Overlay--width-medium {\n width: min(320px, 100vw - 2rem);\n }\n\n &.Overlay--width-large {\n width: min(480px, 100vw - 2rem);\n }\n\n &.Overlay--width-xlarge {\n width: min(640px, 100vw - 2rem);\n }\n\n &.Overlay--width-xxlarge {\n width: min(960px, 100vw - 2rem);\n }\n\n /* end deprecate */\n\n &.Overlay--motion-scaleFade {\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;\n }\n }\n}\n\n@keyframes Overlay--motion-scaleFade {\n 0% {\n opacity: 0;\n transform: scale(0.5);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n/* for <form> element that wraps entire contents of overlay */\n.Overlay-form {\n display: flex;\n overflow: auto;\n flex-direction: column;\n flex-grow: 1;\n}\n\n.Overlay-header {\n z-index: 1;\n display: flex;\n flex-direction: column;\n\n &.Overlay-header--divided {\n padding-bottom: var(--primer-stack-padding-condensed, 8px);\n box-shadow: inset 0 calc(var(--primer-borderWidth-thin, 1px) * -1) var(--color-border-default);\n\n & + .Overlay-body {\n padding-top: var(--primer-stack-padding-normal, 16px);\n }\n }\n\n &.Overlay-header--large {\n & .Overlay-headerContentWrap {\n & .Overlay-titleWrap {\n gap: var(--primer-stack-gap-condensed, 8px);\n\n & .Overlay-title {\n font-size: var(--primer-text-title-size-medium, 20px);\n }\n\n & .Overlay-description {\n font-size: var(--primer-text-body-size-medium, 14px);\n }\n }\n }\n }\n\n & .Overlay-headerContentWrap {\n display: flex;\n align-items: flex-start;\n gap: var(--primer-stack-gap-condensed, 8px);\n padding: var(--primer-stack-gap-condensed, 8px) var(--primer-stack-gap-condensed, 8px) 0 var(--primer-stack-gap-condensed, 8px);\n\n & .Overlay-actionWrap {\n display: flex;\n flex-direction: row;\n gap: var(--primer-stack-gap-condensed, 8px);\n }\n\n & .Overlay-titleWrap {\n display: flex;\n padding: calc(var(--primer-stack-gap-condensed, 8px) * 0.75) 0 calc(var(--primer-stack-gap-condensed, 8px) * 0.75) var(--primer-stack-gap-condensed, 8px);\n flex-direction: column;\n flex-grow: 1;\n gap: var(--primer-control-small-gap, 4px);\n\n & .Overlay-title {\n margin: 0;\n font-size: var(--primer-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-semibold, 600);\n }\n\n & .Overlay-description {\n margin: 0;\n font-size: var(--primer-text-body-size-small, 12px);\n font-weight: var(--base-text-weight-normal, 400);\n color: var(--color-fg-muted);\n }\n }\n }\n}\n\n/* generic body content slot */\n.Overlay-body {\n padding: var(--primer-stack-padding-normal, 16px);\n padding-top: 0;\n overflow-y: auto;\n scrollbar-width: thin;\n font-size: var(--primer-text-body-size-medium, 14px);\n flex-grow: 1;\n\n &.Overlay-body--paddingCondensed {\n padding: var(--primer-stack-padding-condensed, 8px);\n padding-top: 0;\n }\n\n &.Overlay-body--paddingNone {\n padding: 0;\n }\n}\n\n/* generic footer slot */\n.Overlay-footer {\n z-index: 1;\n display: flex;\n padding: 0 var(--primer-stack-padding-normal, 16px) var(--primer-stack-padding-normal, 16px) var(--primer-stack-padding-normal, 16px);\n flex-direction: row;\n flex-shrink: 0;\n flex-wrap: wrap;\n\n &.Overlay-footer--divided {\n padding-top: var(--primer-stack-padding-normal, 16px);\n box-shadow: inset 0 var(--primer-borderWidth-thin, 1px) var(--color-border-default);\n }\n\n &.Overlay-footer--alignStart {\n justify-content: flex-start;\n gap: var(--primer-stack-gap-condensed, 8px);\n }\n\n &.Overlay-footer--alignCenter {\n justify-content: center;\n gap: var(--primer-stack-gap-condensed, 8px);\n }\n\n &.Overlay-footer--alignEnd {\n justify-content: flex-end;\n gap: var(--primer-stack-gap-condensed, 8px);\n }\n}\n\n/* TODO: replace with refactored IconButton */\n.Overlay-closeButton {\n position: relative;\n display: grid;\n width: var(--base-size-32, 32px);\n height: var(--base-size-32, 32px);\n padding: 0;\n color: var(--color-fg-muted);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--primer-borderWidth-thin, 1px) solid transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n transition-property: color, background-color, border-color;\n place-content: center;\n align-self: flex-start;\n flex-shrink: 0;\n\n &:hover,\n &:focus {\n background-color: var(--color-btn-hover-bg);\n border: var(--primer-borderWidth-thin, 1px) solid var(--color-btn-hover-bg);\n }\n\n /* Override .close-button's `border: 0` that triggers a border-color transition on hover */\n &.close-button {\n border: var(--primer-borderWidth-thin, 1px) solid transparent;\n }\n}\n\n@define-mixin Overlay-backdrop {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 999;\n display: flex;\n background-color: var(--color-neutral-muted);\n}\n\n@define-mixin Overlay-backdrop--transparent {\n position: absolute;\n z-index: 999;\n background-color: transparent;\n}\n\n/* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */\n\n/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */\n\n/* center */\n@define-mixin Overlay-backdrop--center {\n @mixin Overlay-backdrop;\n\n align-items: center;\n justify-content: center;\n}\n\n/* anchor */\n@define-mixin Overlay-backdrop--anchor {\n @mixin Overlay-backdrop--transparent;\n\n & .Overlay {\n width: auto;\n }\n}\n\n/* anchor side(s) */\n@define-mixin Overlay-backdrop--side $responsiveVariant {\n @mixin Overlay-backdrop;\n\n /* default left */\n align-items: center;\n justify-content: left;\n\n &.Overlay-backdrop--placement-left$(responsiveVariant) {\n align-items: center;\n justify-content: left;\n\n & > .Overlay$(responsiveVariant) {\n height: 100vh;\n max-height: unset;\n border-radius: var(--primer-borderRadius-large, 12px);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInRight;\n }\n }\n }\n\n &.Overlay-backdrop--placement-right$(responsiveVariant) {\n align-items: center;\n justify-content: right;\n\n & > .Overlay$(responsiveVariant) {\n height: 100vh;\n max-height: unset;\n border-radius: var(--primer-borderRadius-large, 12px);\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInLeft;\n }\n }\n }\n\n &.Overlay-backdrop--placement-bottom$(responsiveVariant) {\n align-items: end;\n justify-content: center;\n\n & > .Overlay$(responsiveVariant) {\n width: 100vw;\n height: auto;\n max-height: calc(100vh - 2rem);\n border-radius: var(--primer-borderRadius-large, 12px);\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideUp;\n }\n }\n }\n\n &.Overlay-backdrop--placement-top$(responsiveVariant) {\n align-items: start;\n justify-content: center;\n\n & > .Overlay$(responsiveVariant) {\n border-radius: var(--primer-borderRadius-large, 12px);\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideDown;\n }\n }\n }\n}\n\n/* full width */\n@define-mixin Overlay-backdrop--full {\n @mixin Overlay-backdrop;\n\n & .Overlay {\n width: 100%;\n max-width: 100vw;\n height: 100%;\n max-height: 100vh;\n border-radius: unset !important;\n flex-grow: 1;\n }\n}\n\n/* Overlay variant classnames */\n.Overlay-backdrop--center {\n @mixin Overlay-backdrop--center;\n}\n\n.Overlay-backdrop--anchor {\n @mixin Overlay-backdrop--anchor;\n}\n\n.Overlay-backdrop--side {\n @mixin Overlay-backdrop--side;\n}\n\n.Overlay-backdrop--full {\n @mixin Overlay-backdrop--full;\n}\n\n/* responsive variants */\n\n/* --primer-viewportRange-narrowLandscape */\n@media (max-width: 767px) {\n .Overlay-backdrop--center-whenNarrow {\n @mixin Overlay-backdrop--center;\n }\n\n .Overlay-backdrop--anchor-whenNarrow {\n @mixin Overlay-backdrop--anchor;\n }\n\n .Overlay-backdrop--side-whenNarrow {\n @mixin Overlay-backdrop--side -whenNarrow;\n }\n\n .Overlay-backdrop--full-whenNarrow {\n @mixin Overlay-backdrop--full;\n }\n}\n\n@keyframes Overlay--motion-slideDown {\n from {\n transform: translateY(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideUp {\n from {\n transform: translateY(100%);\n }\n}\n\n@keyframes Overlay--motion-slideInRight {\n from {\n transform: translateX(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideInLeft {\n from {\n transform: translateX(100%);\n }\n}\n"]}