openproject-primer_view_components 0.15.0 → 0.17.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (153) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +39 -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 +1 -1
  6. data/app/assets/styles/primer_view_components.css.map +1 -1
  7. data/app/components/primer/alpha/action_bar.css +1 -1
  8. data/app/components/primer/alpha/action_bar.css.json +1 -4
  9. data/app/components/primer/alpha/action_bar.css.map +1 -1
  10. data/app/components/primer/alpha/action_bar.pcss +1 -17
  11. data/app/components/primer/alpha/action_bar_element.js +21 -9
  12. data/app/components/primer/alpha/action_list/item.rb +0 -2
  13. data/app/components/primer/alpha/action_list.css +1 -1
  14. data/app/components/primer/alpha/action_list.css.map +1 -1
  15. data/app/components/primer/alpha/action_list.rb +0 -1
  16. data/app/components/primer/alpha/action_menu/action_menu_element.js +44 -20
  17. data/app/components/primer/alpha/action_menu/list.rb +0 -9
  18. data/app/components/primer/alpha/action_menu.html.erb +20 -18
  19. data/app/components/primer/alpha/auto_complete.css +1 -1
  20. data/app/components/primer/alpha/auto_complete.css.map +1 -1
  21. data/app/components/primer/alpha/button_marketing.css +1 -1
  22. data/app/components/primer/alpha/button_marketing.css.map +1 -1
  23. data/app/components/primer/alpha/dialog/header.rb +1 -1
  24. data/app/components/primer/alpha/dropdown.css +1 -1
  25. data/app/components/primer/alpha/dropdown.css.map +1 -1
  26. data/app/components/primer/alpha/layout.css +1 -1
  27. data/app/components/primer/alpha/layout.css.map +1 -1
  28. data/app/components/primer/alpha/menu.css +1 -1
  29. data/app/components/primer/alpha/menu.css.map +1 -1
  30. data/app/components/primer/alpha/nav_list/divider.rb +1 -0
  31. data/app/components/primer/alpha/nav_list/group.rb +1 -0
  32. data/app/components/primer/alpha/nav_list/heading.rb +1 -0
  33. data/app/components/primer/alpha/nav_list/item.rb +1 -0
  34. data/app/components/primer/alpha/nav_list.rb +1 -0
  35. data/app/components/primer/alpha/octicon_symbols.html.erb +1 -1
  36. data/app/components/primer/alpha/overlay.css +1 -1
  37. data/app/components/primer/alpha/overlay.css.json +0 -1
  38. data/app/components/primer/alpha/overlay.css.map +1 -1
  39. data/app/components/primer/alpha/segmented_control.css +1 -1
  40. data/app/components/primer/alpha/segmented_control.css.json +0 -1
  41. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  42. data/app/components/primer/alpha/segmented_control.js +2 -1
  43. data/app/components/primer/alpha/segmented_control.pcss +0 -4
  44. data/app/components/primer/alpha/tab_nav.css +1 -1
  45. data/app/components/primer/alpha/tab_nav.css.map +1 -1
  46. data/app/components/primer/alpha/text_field.css +1 -1
  47. data/app/components/primer/alpha/text_field.css.json +11 -5
  48. data/app/components/primer/alpha/text_field.css.map +1 -1
  49. data/app/components/primer/alpha/text_field.pcss +10 -1
  50. data/app/components/primer/alpha/toggle_switch.css +1 -1
  51. data/app/components/primer/alpha/toggle_switch.css.map +1 -1
  52. data/app/components/primer/alpha/underline_nav.css +1 -1
  53. data/app/components/primer/alpha/underline_nav.css.map +1 -1
  54. data/app/components/primer/alpha/x_banner.js +2 -1
  55. data/app/components/primer/anchored_position.js +2 -1
  56. data/app/components/primer/beta/auto_complete/item.rb +1 -1
  57. data/app/components/primer/beta/avatar.rb +1 -1
  58. data/app/components/primer/beta/base_button.rb +1 -1
  59. data/app/components/primer/beta/blankslate.css +1 -1
  60. data/app/components/primer/beta/blankslate.css.json +1 -0
  61. data/app/components/primer/beta/blankslate.css.map +1 -1
  62. data/app/components/primer/beta/blankslate.html.erb +16 -14
  63. data/app/components/primer/beta/blankslate.pcss +52 -2
  64. data/app/components/primer/beta/border_box.css +1 -1
  65. data/app/components/primer/beta/border_box.css.map +1 -1
  66. data/app/components/primer/beta/button.css +1 -1
  67. data/app/components/primer/beta/button.css.json +0 -1
  68. data/app/components/primer/beta/button.css.map +1 -1
  69. data/app/components/primer/beta/button.html.erb +18 -20
  70. data/app/components/primer/beta/button.pcss +0 -5
  71. data/app/components/primer/beta/button.rb +3 -0
  72. data/app/components/primer/beta/button_group.css +1 -1
  73. data/app/components/primer/beta/button_group.css.json +2 -4
  74. data/app/components/primer/beta/button_group.css.map +1 -1
  75. data/app/components/primer/beta/button_group.html.erb +3 -1
  76. data/app/components/primer/beta/button_group.pcss +2 -4
  77. data/app/components/primer/beta/button_group.rb +41 -12
  78. data/app/components/primer/beta/clipboard_copy.rb +4 -0
  79. data/app/components/primer/beta/clipboard_copy_button.rb +25 -0
  80. data/app/components/primer/beta/counter.rb +1 -1
  81. data/app/components/primer/beta/flash.html.erb +1 -1
  82. data/app/components/primer/beta/icon_button.html.erb +4 -6
  83. data/app/components/primer/beta/icon_button.rb +1 -3
  84. data/app/components/primer/beta/label.css +1 -1
  85. data/app/components/primer/beta/label.css.map +1 -1
  86. data/app/components/primer/beta/link.css +1 -1
  87. data/app/components/primer/beta/link.css.map +1 -1
  88. data/app/components/primer/beta/nav_list.js +14 -7
  89. data/app/components/primer/beta/subhead.css +1 -1
  90. data/app/components/primer/beta/subhead.css.json +2 -0
  91. data/app/components/primer/beta/subhead.css.map +1 -1
  92. data/app/components/primer/beta/subhead.pcss +8 -1
  93. data/app/components/primer/beta/subhead.rb +9 -1
  94. data/app/components/primer/focus_group.js +2 -1
  95. data/app/components/primer/open_project/page_header.css +1 -1
  96. data/app/components/primer/open_project/page_header.css.json +4 -1
  97. data/app/components/primer/open_project/page_header.css.map +1 -1
  98. data/app/components/primer/open_project/page_header.html.erb +9 -1
  99. data/app/components/primer/open_project/page_header.pcss +19 -1
  100. data/app/components/primer/open_project/page_header.rb +38 -0
  101. data/app/forms/action_menu_form.rb +20 -0
  102. data/app/forms/immediate_validation_form.rb +2 -2
  103. data/app/lib/primer/fetch_or_fallback_helper.rb +0 -1
  104. data/app/lib/primer/octicon/cache.rb +1 -1
  105. data/lib/primer/classify.rb +0 -2
  106. data/lib/primer/forms/action_menu.html.erb +6 -0
  107. data/lib/primer/forms/action_menu.rb +25 -0
  108. data/lib/primer/forms/acts_as_component.rb +0 -3
  109. data/lib/primer/forms/base.rb +0 -1
  110. data/lib/primer/forms/base_component.rb +0 -2
  111. data/lib/primer/forms/dsl/action_menu_input.rb +36 -0
  112. data/lib/primer/forms/dsl/input.rb +8 -1
  113. data/lib/primer/forms/dsl/input_methods.rb +9 -0
  114. data/lib/primer/forms/dsl/text_field_input.rb +8 -0
  115. data/lib/primer/forms/primer_base_component_wrapper.rb +0 -2
  116. data/lib/primer/forms/primer_text_field.js +40 -5
  117. data/lib/primer/forms/primer_text_field.ts +39 -7
  118. data/lib/primer/forms/validation_message.html.erb +2 -1
  119. data/lib/primer/static/generate_info_arch.rb +1 -2
  120. data/lib/primer/static/generate_previews.rb +0 -2
  121. data/lib/primer/view_components/engine.rb +5 -1
  122. data/lib/primer/view_components/linters/base_linter.rb +3 -2
  123. data/lib/primer/view_components/linters/deprecated_components_counter.rb +1 -1
  124. data/lib/primer/view_components/linters/disallow_action_list.rb +1 -0
  125. data/lib/primer/view_components/linters/severity_schema.rb +1 -0
  126. data/lib/primer/view_components/version.rb +1 -2
  127. data/lib/primer/yard/lookbook_pages_backend.rb +0 -2
  128. data/lib/rubocop/cop/primer/base_cop.rb +1 -1
  129. data/lib/rubocop/cop/primer/deprecated_arguments.rb +0 -2
  130. data/lib/rubocop/cop/primer/deprecated_components.rb +1 -1
  131. data/lib/rubocop/cop/primer/deprecated_label_schemes.rb +1 -1
  132. data/lib/rubocop/cop/primer/deprecated_label_variants.rb +1 -1
  133. data/previews/primer/alpha/octicon_symbols_preview/default.html.erb +6 -0
  134. data/previews/primer/alpha/octicon_symbols_preview/playground.html.erb +13 -0
  135. data/previews/primer/alpha/octicon_symbols_preview.rb +21 -0
  136. data/previews/primer/alpha/text_field_preview.rb +5 -0
  137. data/previews/primer/beta/avatar_preview.rb +6 -0
  138. data/previews/primer/beta/button_group_preview.rb +11 -0
  139. data/previews/primer/beta/clipboard_copy_button_preview.rb +29 -0
  140. data/previews/primer/beta/subhead_preview.rb +32 -4
  141. data/previews/primer/forms_preview/action_menu_form.html.erb +3 -0
  142. data/previews/primer/forms_preview.rb +4 -0
  143. data/previews/primer/open_project/page_header_preview/context_bar_actions.html.erb +25 -0
  144. data/previews/primer/open_project/page_header_preview/playground.html.erb +32 -0
  145. data/previews/primer/open_project/page_header_preview.rb +48 -9
  146. data/static/arguments.json +75 -13
  147. data/static/audited_at.json +2 -0
  148. data/static/classes.json +18 -3
  149. data/static/constants.json +32 -1
  150. data/static/info_arch.json +381 -28
  151. data/static/previews.json +172 -0
  152. data/static/statuses.json +2 -0
  153. metadata +16 -4
@@ -1 +1 @@
1
- :root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--button-default-fgColor-rest,var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,.25rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled{box-shadow:none;cursor:not-allowed}.Button[aria-disabled=true]{box-shadow:none;cursor:default}.Button-withTooltip{display:inline-block;position:relative}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium,1.4285);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-leadingVisual svg{fill:currentcolor}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4,.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small,1.6666)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.Button--large{gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow));color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text))}.Button--primary:hover:not(:disabled){background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{fill:var(--fgColor-muted,var(--color-fg-muted));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--secondary:hover:not(:disabled){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover,var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active,var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected,var(--color-btn-selected-bg));box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-default-bgColor-disabled,var(--color-btn-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--invisible.Button--iconOnly{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible:hover:not(:disabled){background-color:var(--button-invisible-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:hover:not(:disabled) .Button-visual{color:var(--button-invisible-iconColor-hover,var(--color-fg-default))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active,var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));border-color:var(--button-invisible-borderColor-disabled,var(--color-action-list-item-default-selected-bg));color:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest,var(--color-btn-outline-text))}.Button--invisible .Button-visual{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default,var(--color-fg-default))}.Button--link{fill:var(--fgColor-link,var(--color-accent-fg));border:none;color:var(--fgColor-link,var(--color-accent-fg));display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--danger{fill:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest,var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-danger-fgColor-rest,var(--color-btn-danger-text))}.Button--danger:hover:not(:disabled){fill:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small));color:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text))}.Button--danger:hover:not(:disabled) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));color:var(--buttonCounter-danger-fgColor-hover,var(--color-btn-danger-hover-counter-fg))}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow));color:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text))}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text))}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));color:var(--buttonCounter-danger-fgColor-disabled,var(--color-btn-danger-disabled-counter-fg))}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));color:var(--buttonCounter-danger-fgColor-rest,var(--color-btn-danger-counter-fg))}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.Button--iconOnly.Button--small{width:var(--control-small-size,1.75rem)}.Button--iconOnly.Button--large{width:var(--control-large-size,2.5rem)}
1
+ :root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--button-default-fgColor-rest,var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,.25rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled{box-shadow:none;cursor:not-allowed}.Button[aria-disabled=true]{box-shadow:none;cursor:default}a.Button:hover,summary.Button:hover{-webkit-text-decoration:none;text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium,1.4285);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-leadingVisual svg{fill:currentcolor}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4,.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small,1.6666)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.Button--large{gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow));color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text))}.Button--primary:hover:not(:disabled){background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{fill:var(--fgColor-muted,var(--color-fg-muted));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--secondary:hover:not(:disabled){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover,var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active,var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected,var(--color-btn-selected-bg));box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-default-bgColor-disabled,var(--color-btn-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--invisible.Button--iconOnly{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible:hover:not(:disabled){background-color:var(--button-invisible-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:hover:not(:disabled) .Button-visual{color:var(--button-invisible-iconColor-hover,var(--color-fg-default))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active,var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));border-color:var(--button-invisible-borderColor-disabled,var(--color-action-list-item-default-selected-bg));color:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest,var(--color-btn-outline-text))}.Button--invisible .Button-visual{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default,var(--color-fg-default))}.Button--link{fill:var(--fgColor-link,var(--color-accent-fg));border:none;color:var(--fgColor-link,var(--color-accent-fg));display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){-webkit-text-decoration:underline;text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--danger{fill:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest,var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-danger-fgColor-rest,var(--color-btn-danger-text))}.Button--danger:hover:not(:disabled){fill:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small));color:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text))}.Button--danger:hover:not(:disabled) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));color:var(--buttonCounter-danger-fgColor-hover,var(--color-btn-danger-hover-counter-fg))}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow));color:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text))}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text))}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));color:var(--buttonCounter-danger-fgColor-disabled,var(--color-btn-danger-disabled-counter-fg))}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));color:var(--buttonCounter-danger-fgColor-rest,var(--color-btn-danger-counter-fg))}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.Button--iconOnly.Button--small{width:var(--control-small-size,1.75rem)}.Button--iconOnly.Button--large{width:var(--control-large-size,2.5rem)}
@@ -8,7 +8,6 @@
8
8
  ".Button:active",
9
9
  ".Button:disabled",
10
10
  ".Button[aria-disabled=true]",
11
- ".Button-withTooltip",
12
11
  "a.Button:hover",
13
12
  "summary.Button:hover",
14
13
  ".Button-content",
@@ -1 +1 @@
1
- {"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* CSS for Button */\n\n/* temporary, pre primitives release */\n:root {\n --duration-fast: 80ms;\n --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-medium);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid;\n border-color: transparent;\n border-radius: var(--borderRadius-medium);\n color: var(--button-default-fgColor-rest);\n transition: var(--duration-fast) var(--easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--control-medium-size);\n padding: 0 var(--control-medium-paddingInline-normal);\n display: inline-flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--base-size-4);\n min-width: max-content;\n\n /* mobile friendly sizing */\n @media (pointer: coarse) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--duration-fast);\n }\n\n &:active {\n transition: none;\n }\n\n &:disabled {\n cursor: not-allowed;\n box-shadow: none;\n }\n\n &[aria-disabled='true'] {\n cursor: default;\n box-shadow: none;\n }\n}\n\n.Button-withTooltip {\n position: relative;\n display: inline-block;\n}\n\na.Button,\nsummary.Button {\n &:hover {\n text-decoration: none;\n }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n place-content: center;\n\n /* padding-bottom: 1px; optical alignment for firefox */\n\n & > :not(:last-child) {\n margin-right: var(--control-medium-gap);\n }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n display: flex;\n pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n & .Counter {\n color: inherit;\n background-color: var(--buttonCounter-default-bgColor-rest);\n }\n}\n\n.Button-label {\n grid-area: text;\n white-space: nowrap;\n line-height: var(--text-body-lineHeight-medium);\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-leadingVisual svg {\n fill: currentcolor;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n font-size: var(--text-body-size-small);\n height: var(--control-small-size);\n padding: 0 var(--control-small-paddingInline-condensed);\n gap: var(--control-small-gap);\n\n & .Button-label {\n line-height: var(--text-body-lineHeight-small);\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--control-small-gap);\n }\n }\n}\n\n.Button--large {\n height: var(--control-large-size);\n padding: 0 var(--control-large-paddingInline-spacious);\n gap: var(--control-large-gap);\n\n & .Button-label {\n line-height: var(--text-body-lineHeight-large);\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--control-large-gap);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--button-primary-fgColor-rest);\n fill: var(--button-primary-iconColor-rest);\n background-color: var(--button-primary-bgColor-rest);\n border-color: var(--button-primary-borderColor-rest);\n box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow));\n\n &:hover:not(:disabled) {\n background-color: var(--button-primary-bgColor-hover);\n border-color: var(--button-primary-borderColor-hover);\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n background-color: var(--button-primary-bgColor-active);\n box-shadow: var(--button-primary-shadow-selected);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-primary-fgColor-disabled);\n background-color: var(--button-primary-bgColor-disabled);\n border-color: var(--button-primary-borderColor-disabled);\n fill: var(--button-primary-fgColor-disabled);\n }\n\n & .Counter {\n color: inherit;\n background-color: var(--buttonCounter-primary-bgColor-rest);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--button-default-fgColor-rest);\n fill: var(--fgColor-muted); /* help this */\n background-color: var(--button-default-bgColor-rest);\n border-color: var(--button-default-borderColor-rest);\n box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n &:hover:not(:disabled) {\n background-color: var(--button-default-bgColor-hover);\n border-color: var(--button-default-borderColor-hover);\n }\n\n &:active:not(:disabled) {\n background-color: var(--button-default-bgColor-active);\n border-color: var(--button-default-borderColor-active);\n }\n\n &[aria-pressed='true'] {\n background-color: var(--button-default-bgColor-selected);\n box-shadow: var(--shadow-inset);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--control-fgColor-disabled);\n background-color: var(--button-default-bgColor-disabled);\n border-color: var(--button-default-borderColor-disabled);\n fill: var(--control-fgColor-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--button-default-fgColor-rest);\n\n &.Button--iconOnly {\n color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));\n }\n\n &:hover:not(:disabled) {\n background-color: var(--button-invisible-bgColor-hover);\n\n & .Button-visual {\n color: var(--button-invisible-iconColor-hover, var(--color-fg-default));\n }\n }\n\n &[aria-pressed='true'],\n &:active:not(:disabled) {\n background-color: var(--button-invisible-bgColor-active);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-invisible-fgColor-disabled);\n background-color: var(--button-invisible-bgColor-disabled);\n border-color: var(--button-invisible-borderColor-disabled);\n fill: var(--button-invisible-fgColor-disabled);\n }\n\n /* if button has no visuals, use link blue for text */\n &.Button--invisible-noVisuals .Button-label {\n color: var(--button-invisible-fgColor-rest);\n }\n\n & .Button-visual {\n color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));\n\n & .Counter {\n color: var(--fgColor-default);\n }\n }\n}\n\n.Button--link {\n color: var(--fgColor-link);\n fill: var(--fgColor-link);\n display: inline-block;\n font-size: inherit;\n border: none;\n height: unset;\n padding: 0;\n\n &:hover:not(:disabled) {\n text-decoration: underline;\n }\n\n &:focus-visible,\n &:focus {\n outline-offset: 2px;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--control-fgColor-disabled);\n background-color: transparent;\n border-color: transparent;\n fill: var(--control-fgColor-disabled);\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--button-danger-fgColor-rest);\n fill: var(--button-danger-iconColor-rest);\n background-color: var(--button-danger-bgColor-rest);\n border-color: var(--button-danger-borderColor-rest);\n box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n &:hover:not(:disabled) {\n color: var(--button-danger-fgColor-hover);\n fill: var(--button-danger-fgColor-hover);\n background-color: var(--button-danger-bgColor-hover);\n border-color: var(--button-danger-borderColor-hover);\n box-shadow: var(--shadow-resting-small);\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-hover);\n background-color: var(--buttonCounter-danger-bgColor-hover);\n }\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n color: var(--button-danger-fgColor-active);\n fill: var(--button-danger-fgColor-active);\n background-color: var(--button-danger-bgColor-active);\n border-color: var(--button-danger-borderColor-active);\n box-shadow: var(--button-danger-shadow-selected);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-danger-fgColor-disabled);\n fill: var(--button-danger-fgColor-disabled);\n background-color: var(--button-danger-bgColor-disabled);\n border-color: var(--button-default-borderColor-disabled);\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-disabled);\n background-color: var(--buttonCounter-danger-bgColor-disabled);\n }\n }\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-rest);\n background-color: var(--buttonCounter-danger-bgColor-rest);\n }\n}\n\n.Button--iconOnly {\n display: inline-grid;\n place-content: center;\n padding: unset;\n width: var(--control-medium-size);\n\n &.Button--small {\n width: var(--control-small-size);\n }\n\n &.Button--large {\n width: var(--control-large-size);\n }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);\n}\n"]}
1
+ {"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* CSS for Button */\n\n/* temporary, pre primitives release */\n:root {\n --duration-fast: 80ms;\n --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-medium);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid;\n border-color: transparent;\n border-radius: var(--borderRadius-medium);\n color: var(--button-default-fgColor-rest);\n transition: var(--duration-fast) var(--easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--control-medium-size);\n padding: 0 var(--control-medium-paddingInline-normal);\n display: inline-flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--base-size-4);\n min-width: max-content;\n\n /* mobile friendly sizing */\n @media (pointer: coarse) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--duration-fast);\n }\n\n &:active {\n transition: none;\n }\n\n &:disabled {\n cursor: not-allowed;\n box-shadow: none;\n }\n\n &[aria-disabled='true'] {\n cursor: default;\n box-shadow: none;\n }\n}\n\na.Button,\nsummary.Button {\n &:hover {\n text-decoration: none;\n }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n place-content: center;\n\n /* padding-bottom: 1px; optical alignment for firefox */\n\n & > :not(:last-child) {\n margin-right: var(--control-medium-gap);\n }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n display: flex;\n pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n & .Counter {\n color: inherit;\n background-color: var(--buttonCounter-default-bgColor-rest);\n }\n}\n\n.Button-label {\n grid-area: text;\n white-space: nowrap;\n line-height: var(--text-body-lineHeight-medium);\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-leadingVisual svg {\n fill: currentcolor;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n font-size: var(--text-body-size-small);\n height: var(--control-small-size);\n padding: 0 var(--control-small-paddingInline-condensed);\n gap: var(--control-small-gap);\n\n & .Button-label {\n line-height: var(--text-body-lineHeight-small);\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--control-small-gap);\n }\n }\n}\n\n.Button--large {\n height: var(--control-large-size);\n padding: 0 var(--control-large-paddingInline-spacious);\n gap: var(--control-large-gap);\n\n & .Button-label {\n line-height: var(--text-body-lineHeight-large);\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--control-large-gap);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--button-primary-fgColor-rest);\n fill: var(--button-primary-iconColor-rest);\n background-color: var(--button-primary-bgColor-rest);\n border-color: var(--button-primary-borderColor-rest);\n box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow));\n\n &:hover:not(:disabled) {\n background-color: var(--button-primary-bgColor-hover);\n border-color: var(--button-primary-borderColor-hover);\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n background-color: var(--button-primary-bgColor-active);\n box-shadow: var(--button-primary-shadow-selected);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-primary-fgColor-disabled);\n background-color: var(--button-primary-bgColor-disabled);\n border-color: var(--button-primary-borderColor-disabled);\n fill: var(--button-primary-fgColor-disabled);\n }\n\n & .Counter {\n color: inherit;\n background-color: var(--buttonCounter-primary-bgColor-rest);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--button-default-fgColor-rest);\n fill: var(--fgColor-muted); /* help this */\n background-color: var(--button-default-bgColor-rest);\n border-color: var(--button-default-borderColor-rest);\n box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n &:hover:not(:disabled) {\n background-color: var(--button-default-bgColor-hover);\n border-color: var(--button-default-borderColor-hover);\n }\n\n &:active:not(:disabled) {\n background-color: var(--button-default-bgColor-active);\n border-color: var(--button-default-borderColor-active);\n }\n\n &[aria-pressed='true'] {\n background-color: var(--button-default-bgColor-selected);\n box-shadow: var(--shadow-inset);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--control-fgColor-disabled);\n background-color: var(--button-default-bgColor-disabled);\n border-color: var(--button-default-borderColor-disabled);\n fill: var(--control-fgColor-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--button-default-fgColor-rest);\n\n &.Button--iconOnly {\n color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));\n }\n\n &:hover:not(:disabled) {\n background-color: var(--button-invisible-bgColor-hover);\n\n & .Button-visual {\n color: var(--button-invisible-iconColor-hover, var(--color-fg-default));\n }\n }\n\n &[aria-pressed='true'],\n &:active:not(:disabled) {\n background-color: var(--button-invisible-bgColor-active);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-invisible-fgColor-disabled);\n background-color: var(--button-invisible-bgColor-disabled);\n border-color: var(--button-invisible-borderColor-disabled);\n fill: var(--button-invisible-fgColor-disabled);\n }\n\n /* if button has no visuals, use link blue for text */\n &.Button--invisible-noVisuals .Button-label {\n color: var(--button-invisible-fgColor-rest);\n }\n\n & .Button-visual {\n color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));\n\n & .Counter {\n color: var(--fgColor-default);\n }\n }\n}\n\n.Button--link {\n color: var(--fgColor-link);\n fill: var(--fgColor-link);\n display: inline-block;\n font-size: inherit;\n border: none;\n height: unset;\n padding: 0;\n\n &:hover:not(:disabled) {\n text-decoration: underline;\n }\n\n &:focus-visible,\n &:focus {\n outline-offset: 2px;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--control-fgColor-disabled);\n background-color: transparent;\n border-color: transparent;\n fill: var(--control-fgColor-disabled);\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--button-danger-fgColor-rest);\n fill: var(--button-danger-iconColor-rest);\n background-color: var(--button-danger-bgColor-rest);\n border-color: var(--button-danger-borderColor-rest);\n box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n &:hover:not(:disabled) {\n color: var(--button-danger-fgColor-hover);\n fill: var(--button-danger-fgColor-hover);\n background-color: var(--button-danger-bgColor-hover);\n border-color: var(--button-danger-borderColor-hover);\n box-shadow: var(--shadow-resting-small);\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-hover);\n background-color: var(--buttonCounter-danger-bgColor-hover);\n }\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n color: var(--button-danger-fgColor-active);\n fill: var(--button-danger-fgColor-active);\n background-color: var(--button-danger-bgColor-active);\n border-color: var(--button-danger-borderColor-active);\n box-shadow: var(--button-danger-shadow-selected);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-danger-fgColor-disabled);\n fill: var(--button-danger-fgColor-disabled);\n background-color: var(--button-danger-bgColor-disabled);\n border-color: var(--button-default-borderColor-disabled);\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-disabled);\n background-color: var(--buttonCounter-danger-bgColor-disabled);\n }\n }\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-rest);\n background-color: var(--buttonCounter-danger-bgColor-rest);\n }\n}\n\n.Button--iconOnly {\n display: inline-grid;\n place-content: center;\n padding: unset;\n width: var(--control-medium-size);\n\n &.Button--small {\n width: var(--control-small-size);\n }\n\n &.Button--large {\n width: var(--control-large-size);\n }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);\n}\n"]}
@@ -1,23 +1,21 @@
1
- <%= render Primer::ConditionalWrapper.new(condition: tooltip.present?, tag: :div, display: (:block if @block), classes: "Button-withTooltip") do -%>
2
- <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
3
- <span class="<%= @align_content_classes %>">
4
- <% if leading_visual %>
5
- <span class="Button-visual Button-leadingVisual">
6
- <%= leading_visual %>
7
- </span>
8
- <% end %>
9
- <span class="Button-label"><%= trimmed_content %></span>
10
- <% if trailing_visual %>
11
- <span class="Button-visual Button-trailingVisual">
12
- <%= trailing_visual %>
13
- </span>
14
- <% end %>
15
- </span>
16
- <% if trailing_action %>
17
- <span class="Button-visual Button-trailingAction">
18
- <%= trailing_action %>
1
+ <%= render @base_button_class.new(**@system_arguments) do -%>
2
+ <span class="<%= @align_content_classes %>">
3
+ <% if leading_visual %>
4
+ <span class="Button-visual Button-leadingVisual">
5
+ <%= leading_visual %>
6
+ </span>
7
+ <% end %>
8
+ <span class="Button-label"><%= trimmed_content %></span>
9
+ <% if trailing_visual %>
10
+ <span class="Button-visual Button-trailingVisual">
11
+ <%= trailing_visual %>
19
12
  </span>
20
13
  <% end %>
21
- <% end -%>
22
- <%= tooltip %>
14
+ </span>
15
+ <% if trailing_action %>
16
+ <span class="Button-visual Button-trailingAction">
17
+ <%= trailing_action %>
18
+ </span>
19
+ <% end %>
23
20
  <% end -%>
21
+ <%= tooltip %>
@@ -58,11 +58,6 @@
58
58
  }
59
59
  }
60
60
 
61
- .Button-withTooltip {
62
- position: relative;
63
- display: inline-block;
64
- }
65
-
66
61
  a.Button,
67
62
  summary.Button {
68
63
  &:hover {
@@ -93,6 +93,7 @@ module Primer
93
93
  Primer::Alpha::Tooltip.new(**system_arguments)
94
94
  }
95
95
 
96
+ # @param base_button_class [Class] The button class to render.
96
97
  # @param scheme [Symbol] <%= one_of(Primer::Beta::Button::SCHEME_OPTIONS) %>
97
98
  # @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>
98
99
  # @param block [Boolean] Whether button is full-width with `display: block`.
@@ -102,6 +103,7 @@ module Primer
102
103
  # @param disabled [Boolean] Whether or not the button is disabled. If true, this option forces `tag:` to `:button`.
103
104
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
104
105
  def initialize(
106
+ base_button_class: Primer::Beta::BaseButton,
105
107
  scheme: DEFAULT_SCHEME,
106
108
  size: DEFAULT_SIZE,
107
109
  block: false,
@@ -109,6 +111,7 @@ module Primer
109
111
  disabled: false,
110
112
  **system_arguments
111
113
  )
114
+ @base_button_class = base_button_class
112
115
  @scheme = scheme
113
116
  @block = block
114
117
 
@@ -1 +1 @@
1
- .ButtonGroup{display:inline-flex}.ButtonGroup .Button{border-radius:0;margin-inline-end:-1px;position:relative}.ButtonGroup .Button:active,.ButtonGroup .Button:focus,.ButtonGroup .Button:hover{z-index:1}.ButtonGroup>.Button-withTooltip:first-child .Button,.ButtonGroup>:first-child{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}.ButtonGroup>.Button-withTooltip:last-child .Button,.ButtonGroup>:last-child{border-bottom-right-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}
1
+ .ButtonGroup{display:inline-flex}.ButtonGroup .Button{border-radius:0;margin-inline-end:-1px;position:relative}.ButtonGroup .Button:active,.ButtonGroup .Button:focus,.ButtonGroup .Button:hover{z-index:1}.ButtonGroup>:first-child .Button{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}.ButtonGroup>:last-child .Button{border-bottom-right-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}
@@ -6,9 +6,7 @@
6
6
  ".ButtonGroup .Button:active",
7
7
  ".ButtonGroup .Button:focus",
8
8
  ".ButtonGroup .Button:hover",
9
- ".ButtonGroup>.Button-withTooltip:first-child .Button",
10
- ".ButtonGroup>:first-child",
11
- ".ButtonGroup>.Button-withTooltip:last-child .Button",
12
- ".ButtonGroup>:last-child"
9
+ ".ButtonGroup>:first-child .Button",
10
+ ".ButtonGroup>:last-child .Button"
13
11
  ]
14
12
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["button_group.pcss"],"names":[],"mappings":"AAAA,aACE,mBAyBF,CAvBE,qBAGE,eAAgB,CAFhB,sBAAuB,CACvB,iBAQF,CALE,kFAGE,SACF,CAGF,+EAGE,4DAAqD,CADrD,yDAEF,CAEA,6EAGE,6DAAsD,CADtD,0DAEF","file":"button_group.css","sourcesContent":[".ButtonGroup {\n display: inline-flex;\n\n & .Button {\n margin-inline-end: -1px;\n position: relative;\n border-radius: 0;\n\n &:focus,\n &:active,\n &:hover {\n z-index: 1;\n }\n }\n\n & > :first-child,\n & > :first-child.Button-withTooltip .Button {\n border-top-left-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n\n & > :last-child,\n & > :last-child.Button-withTooltip .Button {\n border-top-right-radius: var(--borderRadius-medium);\n border-bottom-right-radius: var(--borderRadius-medium);\n }\n}\n"]}
1
+ {"version":3,"sources":["button_group.pcss"],"names":[],"mappings":"AAAA,aACE,mBAuBF,CArBE,qBAGE,eAAgB,CAFhB,sBAAuB,CACvB,iBAQF,CALE,kFAGE,SACF,CAGF,kCAEE,4DAAqD,CADrD,yDAEF,CAEA,iCAEE,6DAAsD,CADtD,0DAEF","file":"button_group.css","sourcesContent":[".ButtonGroup {\n display: inline-flex;\n\n & .Button {\n margin-inline-end: -1px;\n position: relative;\n border-radius: 0;\n\n &:focus,\n &:active,\n &:hover {\n z-index: 1;\n }\n }\n\n & > :first-child .Button {\n border-top-left-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n\n & > :last-child .Button {\n border-top-right-radius: var(--borderRadius-medium);\n border-bottom-right-radius: var(--borderRadius-medium);\n }\n}\n"]}
@@ -1,5 +1,7 @@
1
1
  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
2
2
  <% buttons.each do |button| %>
3
- <%= button %>
3
+ <div>
4
+ <%= button %>
5
+ </div>
4
6
  <% end %>
5
7
  <% end %>
@@ -13,14 +13,12 @@
13
13
  }
14
14
  }
15
15
 
16
- & > :first-child,
17
- & > :first-child.Button-withTooltip .Button {
16
+ & > :first-child .Button {
18
17
  border-top-left-radius: var(--borderRadius-medium);
19
18
  border-bottom-left-radius: var(--borderRadius-medium);
20
19
  }
21
20
 
22
- & > :last-child,
23
- & > :last-child.Button-withTooltip .Button {
21
+ & > :last-child .Button {
24
22
  border-top-right-radius: var(--borderRadius-medium);
25
23
  border-bottom-right-radius: var(--borderRadius-medium);
26
24
  }
@@ -6,18 +6,47 @@ module Primer
6
6
  class ButtonGroup < Primer::Component
7
7
  status :beta
8
8
 
9
- # Required list of buttons to be rendered.
10
- #
11
- # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Button) %>
12
- renders_many :buttons, lambda { |**kwargs|
13
- kwargs[:size] = @size
14
- kwargs[:scheme] = @scheme
15
-
16
- if kwargs[:icon]
17
- Primer::Beta::IconButton.new(**kwargs)
18
- else
19
- Primer::Beta::Button.new(**kwargs)
20
- end
9
+ # @!parse
10
+ # # Adds a button.
11
+ # #
12
+ # # @param icon [Symbol] If included, adds a <%= link_to_component(Primer::Beta::IconButton) %> with the given <%= link_to_octicons %>. Otherwise, a <%= link_to_component(Primer::Beta::Button) %> is added instead.
13
+ # # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Button) %> or <%= link_to_component(Primer::Beta::IconButton) %>, depending on the value of the `icon:` argument.
14
+ # def with_button(icon: nil, **system_arguments)
15
+ # end
16
+
17
+ # @!parse
18
+ # # Adds a <%= link_to_component(Primer::Beta::ClipboardCopyButton) %>.
19
+ # #
20
+ # # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::ClipboardCopyButton) %>.
21
+ # def with_clipboard_copy_button(**system_arguments)
22
+ # end
23
+
24
+ # List of buttons to be rendered. Add buttons via the `#with_button` and `#with_clipboard_copy_button` methods (see below).
25
+ renders_many :buttons, types: {
26
+ button: {
27
+ renders: lambda { |icon: nil, **kwargs|
28
+ kwargs[:size] = @size
29
+ kwargs[:scheme] = @scheme
30
+
31
+ if icon
32
+ Primer::Beta::IconButton.new(icon: icon, **kwargs)
33
+ else
34
+ Primer::Beta::Button.new(**kwargs)
35
+ end
36
+ },
37
+
38
+ as: :button
39
+ },
40
+
41
+ clipboard_copy_button: {
42
+ renders: lambda { |**kwargs|
43
+ kwargs[:size] = @size
44
+ kwargs[:scheme] = @scheme
45
+ Primer::Beta::ClipboardCopyButton.new(**kwargs)
46
+ },
47
+
48
+ as: :clipboard_copy_button
49
+ }
21
50
  }
22
51
 
23
52
  # @param scheme [Symbol] DEPRECATED. <%= one_of(Primer::Beta::Button::SCHEME_OPTIONS) %>
@@ -4,6 +4,10 @@ module Primer
4
4
  module Beta
5
5
  # Use `ClipboardCopy` to copy element text content or input values to the clipboard.
6
6
  #
7
+ # This component by itself is not styled as a button, and can therefore only be used in limited circumstances.
8
+ # If you're looking for a button, consider using <%= link_to_component(Primer::Beta::ClipboardCopyButton) %>
9
+ # instead.
10
+ #
7
11
  # @accessibility
8
12
  # Always set an accessible label to help the user interact with the component.
9
13
  class ClipboardCopy < Primer::Component
@@ -0,0 +1,25 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Primer
4
+ module Beta
5
+ # `ClipboardCopyButton` uses the `ClipboardCopy` component to copy text to the clipboard,
6
+ # styled as a Primer button. It can be used wherever a button is desired, and works well
7
+ # with components like `ButtonGroup`.
8
+ class ClipboardCopyButton < Primer::Beta::Button
9
+ # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Button) %> and <%= link_to_component(Primer::Beta::ClipboardCopy) %>.
10
+ def initialize(**system_arguments)
11
+ super(**system_arguments, base_button_class: ClipboardCopyBaseButton)
12
+ end
13
+ end
14
+
15
+ # Internal
16
+ #
17
+ # :nodoc:
18
+ class ClipboardCopyBaseButton < Primer::Beta::BaseButton
19
+ def call
20
+ arguments = @system_arguments.except(:tag)
21
+ render(Primer::Beta::ClipboardCopy.new(**arguments))
22
+ end
23
+ end
24
+ end
25
+ end
@@ -54,7 +54,7 @@ module Primer
54
54
  @system_arguments[:classes],
55
55
  SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME, deprecated_values: DEPRECATED_SCHEME_OPTIONS)]
56
56
  )
57
- @system_arguments[:hidden] = true if count == 0 && hide_if_zero # rubocop:disable Style/NumericPredicate
57
+ @system_arguments[:hidden] = true if count == 0 && hide_if_zero
58
58
  end
59
59
 
60
60
  def call
@@ -1,7 +1,7 @@
1
1
  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
2
2
  <%= primer_octicon @icon if @icon %><%= content %>
3
3
  <% if @dismissible %>
4
- <%= render Primer::Beta::IconButton.new(icon: :x, scheme: :invisible, wrapper_arguments: { classes: "flash-close" }, classes: "js-flash-close", "aria-label": "Dismiss alert") %>
4
+ <%= render Primer::Beta::IconButton.new(icon: :x, scheme: :invisible, classes: "flash-close js-flash-close", "aria-label": "Dismiss alert") %>
5
5
  <% end %>
6
6
 
7
7
  <%= action %>
@@ -1,6 +1,4 @@
1
- <%= render Primer::ConditionalWrapper.new(condition: render_tooltip?, tag: :div, classes: "Button-withTooltip", **@wrapper_arguments) do %>
2
- <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
3
- <%= render Primer::Beta::Octicon.new(icon: @icon, classes: "Button-visual") %>
4
- <% end -%>
5
- <%= render @tooltip if render_tooltip? %>
6
- <% end %>
1
+ <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
2
+ <%= render Primer::Beta::Octicon.new(icon: @icon, classes: "Button-visual") %>
3
+ <% end -%>
4
+ <%= render @tooltip if render_tooltip? %>
@@ -27,7 +27,6 @@ module Primer
27
27
 
28
28
  # @param icon [String] Name of <%= link_to_octicons %> to use.
29
29
  # @param tag [Symbol] <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
30
- # @param wrapper_arguments [Hash] Optional keyword arguments to be passed to the wrapper `<div>` tag.
31
30
  # @param scheme [Symbol] <%= one_of(Primer::Beta::IconButton::SCHEME_OPTIONS) %>
32
31
  # @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>
33
32
  # @param disabled [Boolean] Whether or not the button is disabled. If true, this option forces `tag:` to `:button`.
@@ -37,10 +36,9 @@ module Primer
37
36
  # @param show_tooltip [Boolean] Whether or not to show a tooltip when this button is hovered. Tooltips should only be hidden if the aria label is redundant, i.e. if the icon has a widely understood definition.
38
37
  # @param tooltip_direction [Symbol] (Primer::Alpha::Tooltip::DIRECTION_DEFAULT) <%= one_of(Primer::Alpha::Tooltip::DIRECTION_OPTIONS) %>
39
38
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
40
- def initialize(icon:, scheme: DEFAULT_SCHEME, wrapper_arguments: {}, show_tooltip: true, tooltip_direction: Primer::Alpha::Tooltip::DIRECTION_DEFAULT, size: Primer::Beta::Button::DEFAULT_SIZE, disabled: false, **system_arguments)
39
+ def initialize(icon:, scheme: DEFAULT_SCHEME, show_tooltip: true, tooltip_direction: Primer::Alpha::Tooltip::DIRECTION_DEFAULT, size: Primer::Beta::Button::DEFAULT_SIZE, disabled: false, **system_arguments)
41
40
  @icon = icon
42
41
 
43
- @wrapper_arguments = wrapper_arguments
44
42
  @show_tooltip = show_tooltip
45
43
  @system_arguments = system_arguments
46
44
  @system_arguments[:id] ||= self.class.generate_id
@@ -1 +1 @@
1
- .labels{position:relative}.Label,.label{border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:2em;display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:18px;padding:0 7px;white-space:nowrap}.Label:hover,.label:hover{text-decoration:none}.Label--large{line-height:22px;padding-left:10px;padding-right:10px}.Label--inline{display:inline;font-size:85%;padding:.12em .5em}.Label--primary{border-color:var(--borderColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-default,var(--color-fg-default))}.Label--secondary{border-color:var(--borderColor-default,var(--color-border-default));color:var(--fgColor-muted,var(--color-fg-muted))}.Label--accent,.Label--info{border-color:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));color:var(--fgColor-accent,var(--color-accent-fg))}.Label--success{border-color:var(--borderColor-success-emphasis,var(--color-success-emphasis));color:var(--fgColor-success,var(--color-success-fg))}.Label--attention,.Label--warning{border-color:var(--borderColor-attention-emphasis,var(--color-attention-emphasis));color:var(--fgColor-attention,var(--color-attention-fg))}.Label--severe{border-color:var(--borderColor-severe-emphasis,var(--color-severe-emphasis));color:var(--fgColor-severe,var(--color-severe-fg))}.Label--danger{border-color:var(--borderColor-danger-emphasis,var(--color-danger-emphasis));color:var(--fgColor-danger,var(--color-danger-fg))}.Label--open{border-color:var(--borderColor-open-emphasis,var(--color-open-emphasis));color:var(--fgColor-open,var(--color-open-fg))}.Label--closed{border-color:var(--borderColor-closed-emphasis,var(--color-closed-emphasis));color:var(--fgColor-closed,var(--color-closed-fg))}.Label--done{border-color:var(--borderColor-done-emphasis,var(--color-done-emphasis));color:var(--fgColor-done,var(--color-done-fg))}.Label--sponsors{border-color:var(--borderColor-sponsors-emphasis,var(--color-sponsors-emphasis));color:var(--fgColor-sponsors,var(--color-sponsors-fg))}
1
+ .labels{position:relative}.Label,.label{border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:2em;display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:18px;padding:0 7px;white-space:nowrap}.Label:hover,.label:hover{-webkit-text-decoration:none;text-decoration:none}.Label--large{line-height:22px;padding-left:10px;padding-right:10px}.Label--inline{display:inline;font-size:85%;padding:.12em .5em}.Label--primary{border-color:var(--borderColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-default,var(--color-fg-default))}.Label--secondary{border-color:var(--borderColor-default,var(--color-border-default));color:var(--fgColor-muted,var(--color-fg-muted))}.Label--accent,.Label--info{border-color:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));color:var(--fgColor-accent,var(--color-accent-fg))}.Label--success{border-color:var(--borderColor-success-emphasis,var(--color-success-emphasis));color:var(--fgColor-success,var(--color-success-fg))}.Label--attention,.Label--warning{border-color:var(--borderColor-attention-emphasis,var(--color-attention-emphasis));color:var(--fgColor-attention,var(--color-attention-fg))}.Label--severe{border-color:var(--borderColor-severe-emphasis,var(--color-severe-emphasis));color:var(--fgColor-severe,var(--color-severe-fg))}.Label--danger{border-color:var(--borderColor-danger-emphasis,var(--color-danger-emphasis));color:var(--fgColor-danger,var(--color-danger-fg))}.Label--open{border-color:var(--borderColor-open-emphasis,var(--color-open-emphasis));color:var(--fgColor-open,var(--color-open-fg))}.Label--closed{border-color:var(--borderColor-closed-emphasis,var(--color-closed-emphasis));color:var(--fgColor-closed,var(--color-closed-fg))}.Label--done{border-color:var(--borderColor-done-emphasis,var(--color-done-emphasis));color:var(--fgColor-done,var(--color-done-fg))}.Label--sponsors{border-color:var(--borderColor-sponsors-emphasis,var(--color-sponsors-emphasis));color:var(--fgColor-sponsors,var(--color-sponsors-fg))}
@@ -1 +1 @@
1
- {"version":3,"sources":["label.pcss"],"names":[],"mappings":"AAGA,QACE,iBACF,CAIA,cAQE,6GAAgE,CAChE,iBAAkB,CAPlB,oBAAqB,CAErB,4CAAsC,CACtC,8CAA2C,CAC3C,gBAAiB,CAHjB,aAAc,CAId,kBAOF,CAHE,0BACE,oBACF,CAKF,cAGE,gBAAiB,CADjB,iBAAkB,CADlB,kBAGF,CAMA,eACE,cAAe,CAEf,aAAc,CADd,kBAEF,CAIA,gBAEE,uEAAiD,CADjD,oDAEF,CAEA,kBAEE,mEAAwC,CADxC,gDAEF,CAIA,4BAGE,4EAAgD,CADhD,kDAEF,CAEA,gBAEE,8EAAiD,CADjD,oDAEF,CAEA,kCAGE,kFAAmD,CADnD,wDAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,aAEE,wEAA8C,CAD9C,8CAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,aAEE,wEAA8C,CAD9C,8CAEF,CAEA,iBAEE,gFAAkD,CADlD,sDAEF","file":"label.css","sourcesContent":["/* Labels */\n\n/* Provide a wrapper to ensure labels stick together */\n.labels {\n position: relative;\n}\n\n/* Default 20px */\n\n.label, /* TODO: Deprecate */\n.Label {\n display: inline-block;\n padding: 0 7px;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-medium);\n line-height: 18px;\n white-space: nowrap;\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: 2em;\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* Large 24px */\n\n.Label--large {\n padding-right: 10px;\n padding-left: 10px;\n line-height: 22px;\n}\n\n/* Inline */\n\n/* Doesn't increase height of parent element\n** Can be used with different font-sizes */\n.Label--inline {\n display: inline;\n padding: 0.12em 0.5em;\n font-size: 85%;\n}\n\n/* Contrast */\n\n.Label--primary {\n color: var(--fgColor-default);\n border-color: var(--borderColor-neutral-emphasis);\n}\n\n.Label--secondary {\n color: var(--fgColor-muted);\n border-color: var(--borderColor-default);\n}\n\n/* Colors */\n\n.Label--info, /* TODO: deprecate */\n.Label--accent {\n color: var(--fgColor-accent);\n border-color: var(--borderColor-accent-emphasis);\n}\n\n.Label--success {\n color: var(--fgColor-success);\n border-color: var(--borderColor-success-emphasis);\n}\n\n.Label--warning, /* TODO: deprecate */\n.Label--attention {\n color: var(--fgColor-attention);\n border-color: var(--borderColor-attention-emphasis);\n}\n\n.Label--severe {\n color: var(--fgColor-severe);\n border-color: var(--borderColor-severe-emphasis);\n}\n\n.Label--danger {\n color: var(--fgColor-danger);\n border-color: var(--borderColor-danger-emphasis);\n}\n\n.Label--open {\n color: var(--fgColor-open);\n border-color: var(--borderColor-open-emphasis);\n}\n\n.Label--closed {\n color: var(--fgColor-closed);\n border-color: var(--borderColor-closed-emphasis);\n}\n\n.Label--done {\n color: var(--fgColor-done);\n border-color: var(--borderColor-done-emphasis);\n}\n\n.Label--sponsors {\n color: var(--fgColor-sponsors);\n border-color: var(--borderColor-sponsors-emphasis);\n}\n"]}
1
+ {"version":3,"sources":["label.pcss"],"names":[],"mappings":"AAGA,QACE,iBACF,CAIA,cAQE,6GAAgE,CAChE,iBAAkB,CAPlB,oBAAqB,CAErB,4CAAsC,CACtC,8CAA2C,CAC3C,gBAAiB,CAHjB,aAAc,CAId,kBAOF,CAHE,0BACE,4BAAqB,CAArB,oBACF,CAKF,cAGE,gBAAiB,CADjB,iBAAkB,CADlB,kBAGF,CAMA,eACE,cAAe,CAEf,aAAc,CADd,kBAEF,CAIA,gBAEE,uEAAiD,CADjD,oDAEF,CAEA,kBAEE,mEAAwC,CADxC,gDAEF,CAIA,4BAGE,4EAAgD,CADhD,kDAEF,CAEA,gBAEE,8EAAiD,CADjD,oDAEF,CAEA,kCAGE,kFAAmD,CADnD,wDAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,aAEE,wEAA8C,CAD9C,8CAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,aAEE,wEAA8C,CAD9C,8CAEF,CAEA,iBAEE,gFAAkD,CADlD,sDAEF","file":"label.css","sourcesContent":["/* Labels */\n\n/* Provide a wrapper to ensure labels stick together */\n.labels {\n position: relative;\n}\n\n/* Default 20px */\n\n.label, /* TODO: Deprecate */\n.Label {\n display: inline-block;\n padding: 0 7px;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-medium);\n line-height: 18px;\n white-space: nowrap;\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: 2em;\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* Large 24px */\n\n.Label--large {\n padding-right: 10px;\n padding-left: 10px;\n line-height: 22px;\n}\n\n/* Inline */\n\n/* Doesn't increase height of parent element\n** Can be used with different font-sizes */\n.Label--inline {\n display: inline;\n padding: 0.12em 0.5em;\n font-size: 85%;\n}\n\n/* Contrast */\n\n.Label--primary {\n color: var(--fgColor-default);\n border-color: var(--borderColor-neutral-emphasis);\n}\n\n.Label--secondary {\n color: var(--fgColor-muted);\n border-color: var(--borderColor-default);\n}\n\n/* Colors */\n\n.Label--info, /* TODO: deprecate */\n.Label--accent {\n color: var(--fgColor-accent);\n border-color: var(--borderColor-accent-emphasis);\n}\n\n.Label--success {\n color: var(--fgColor-success);\n border-color: var(--borderColor-success-emphasis);\n}\n\n.Label--warning, /* TODO: deprecate */\n.Label--attention {\n color: var(--fgColor-attention);\n border-color: var(--borderColor-attention-emphasis);\n}\n\n.Label--severe {\n color: var(--fgColor-severe);\n border-color: var(--borderColor-severe-emphasis);\n}\n\n.Label--danger {\n color: var(--fgColor-danger);\n border-color: var(--borderColor-danger-emphasis);\n}\n\n.Label--open {\n color: var(--fgColor-open);\n border-color: var(--borderColor-open-emphasis);\n}\n\n.Label--closed {\n color: var(--fgColor-closed);\n border-color: var(--borderColor-closed-emphasis);\n}\n\n.Label--done {\n color: var(--fgColor-done);\n border-color: var(--borderColor-done-emphasis);\n}\n\n.Label--sponsors {\n color: var(--fgColor-sponsors);\n border-color: var(--borderColor-sponsors-emphasis);\n}\n"]}
@@ -1 +1 @@
1
- .Link{color:var(--fgColor-accent,var(--color-accent-fg));text-decoration:none}.Link:hover{cursor:pointer}.Link:focus,.Link:hover{text-decoration:underline}.Link:focus,.Link:focus-visible{outline-offset:0}.Link--underline{text-decoration:underline}.Link--primary{color:var(--fgColor-default,var(--color-fg-default))!important}.Link--primary:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--secondary{color:var(--fgColor-muted,var(--color-fg-muted))!important}.Link--secondary:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--muted{color:var(--fgColor-muted,var(--color-fg-muted))!important}.Link--muted:hover{text-decoration:none}.Link--muted:hover,.Link--onHover:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--onHover:hover{cursor:pointer;text-decoration:underline}.Link--muted:hover [class*=color-fg],.Link--primary:hover [class*=color-fg],.Link--secondary:hover [class*=color-fg]{color:inherit!important}
1
+ .Link{color:var(--fgColor-accent,var(--color-accent-fg));-webkit-text-decoration:none;text-decoration:none}.Link:hover{cursor:pointer}.Link:focus,.Link:hover{-webkit-text-decoration:underline;text-decoration:underline}.Link:focus,.Link:focus-visible{outline-offset:0}.Link--underline{-webkit-text-decoration:underline;text-decoration:underline}.Link--primary{color:var(--fgColor-default,var(--color-fg-default))!important}.Link--primary:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--secondary{color:var(--fgColor-muted,var(--color-fg-muted))!important}.Link--secondary:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--muted{color:var(--fgColor-muted,var(--color-fg-muted))!important}.Link--muted:hover{-webkit-text-decoration:none;text-decoration:none}.Link--muted:hover,.Link--onHover:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--onHover:hover{cursor:pointer;-webkit-text-decoration:underline;text-decoration:underline}.Link--muted:hover [class*=color-fg],.Link--primary:hover [class*=color-fg],.Link--secondary:hover [class*=color-fg]{color:inherit!important}
@@ -1 +1 @@
1
- {"version":3,"sources":["link.pcss"],"names":[],"mappings":"AAEA,MACE,kDAA4B,CAC5B,oBAeF,CAbE,YAEE,cACF,CAEA,wBAJE,yBAMF,CAEA,gCAEE,gBACF,CAGF,iBACE,yBACF,CAEA,eACE,8DAKF,CAHE,qBACE,4DACF,CAGF,iBACE,0DAKF,CAHE,uBACE,4DACF,CAGF,aACE,0DAMF,CAJE,mBAEE,oBACF,CAMA,wCARE,4DAYF,CAJA,qBAGE,cAAe,CADf,yBAEF,CAQA,qHACE,uBACF","file":"link.css","sourcesContent":["/* Links */\n\n.Link {\n color: var(--fgColor-accent);\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n cursor: pointer;\n }\n\n &:focus {\n text-decoration: underline;\n }\n\n &:focus,\n &:focus-visible {\n outline-offset: 0;\n }\n}\n\n.Link--underline {\n text-decoration: underline;\n}\n\n.Link--primary {\n color: var(--fgColor-default) !important;\n\n &:hover {\n color: var(--fgColor-accent) !important;\n }\n}\n\n.Link--secondary {\n color: var(--fgColor-muted) !important;\n\n &:hover {\n color: var(--fgColor-accent) !important;\n }\n}\n\n.Link--muted {\n color: var(--fgColor-muted) !important;\n\n &:hover {\n color: var(--fgColor-accent) !important;\n text-decoration: none;\n }\n}\n\n/* Set the link color only on hover\n Useful when you want only part of a link to turn blue on hover */\n.Link--onHover {\n &:hover {\n color: var(--fgColor-accent) !important;\n text-decoration: underline;\n cursor: pointer;\n }\n}\n\n/* When using a color utility class inside of a link class\n color should change with link on hover. */\n.Link--secondary,\n.Link--primary,\n.Link--muted {\n &:hover [class*='color-fg'] {\n color: inherit !important;\n }\n}\n"]}
1
+ {"version":3,"sources":["link.pcss"],"names":[],"mappings":"AAEA,MACE,kDAA4B,CAC5B,4BAAqB,CAArB,oBAeF,CAbE,YAEE,cACF,CAEA,wBAJE,iCAA0B,CAA1B,yBAMF,CAEA,gCAEE,gBACF,CAGF,iBACE,iCAA0B,CAA1B,yBACF,CAEA,eACE,8DAKF,CAHE,qBACE,4DACF,CAGF,iBACE,0DAKF,CAHE,uBACE,4DACF,CAGF,aACE,0DAMF,CAJE,mBAEE,4BAAqB,CAArB,oBACF,CAMA,wCARE,4DAYF,CAJA,qBAGE,cAAe,CADf,iCAA0B,CAA1B,yBAEF,CAQA,qHACE,uBACF","file":"link.css","sourcesContent":["/* Links */\n\n.Link {\n color: var(--fgColor-accent);\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n cursor: pointer;\n }\n\n &:focus {\n text-decoration: underline;\n }\n\n &:focus,\n &:focus-visible {\n outline-offset: 0;\n }\n}\n\n.Link--underline {\n text-decoration: underline;\n}\n\n.Link--primary {\n color: var(--fgColor-default) !important;\n\n &:hover {\n color: var(--fgColor-accent) !important;\n }\n}\n\n.Link--secondary {\n color: var(--fgColor-muted) !important;\n\n &:hover {\n color: var(--fgColor-accent) !important;\n }\n}\n\n.Link--muted {\n color: var(--fgColor-muted) !important;\n\n &:hover {\n color: var(--fgColor-accent) !important;\n text-decoration: none;\n }\n}\n\n/* Set the link color only on hover\n Useful when you want only part of a link to turn blue on hover */\n.Link--onHover {\n &:hover {\n color: var(--fgColor-accent) !important;\n text-decoration: underline;\n cursor: pointer;\n }\n}\n\n/* When using a color utility class inside of a link class\n color should change with link on hover. */\n.Link--secondary,\n.Link--primary,\n.Link--muted {\n &:hover [class*='color-fg'] {\n color: inherit !important;\n }\n}\n"]}
@@ -171,12 +171,14 @@ let NavListElement = class NavListElement extends HTMLElement {
171
171
  }
172
172
  }
173
173
  };
174
- _NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function _NavListElement_parseHTML(document, html) {
174
+ _NavListElement_instances = new WeakSet();
175
+ _NavListElement_parseHTML = function _NavListElement_parseHTML(document, html) {
175
176
  const template = document.createElement('template');
176
177
  // eslint-disable-next-line github/no-inner-html
177
178
  template.innerHTML = html;
178
179
  return document.importNode(template.content, true);
179
- }, _NavListElement_findSelectedNavItemById = function _NavListElement_findSelectedNavItemById(itemId) {
180
+ };
181
+ _NavListElement_findSelectedNavItemById = function _NavListElement_findSelectedNavItemById(itemId) {
180
182
  var _a;
181
183
  // First we compare the selected link to data-item-id for each nav item
182
184
  for (const navItem of this.items) {
@@ -189,16 +191,19 @@ _NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function
189
191
  }
190
192
  }
191
193
  return null;
192
- }, _NavListElement_findSelectedNavItemByHref = function _NavListElement_findSelectedNavItemByHref(href) {
194
+ };
195
+ _NavListElement_findSelectedNavItemByHref = function _NavListElement_findSelectedNavItemByHref(href) {
193
196
  // If we didn't find a match, we compare the selected link to the href of each nav item
194
197
  const selectedNavItem = this.querySelector(`.ActionListContent[href="${href}"]`);
195
198
  if (selectedNavItem) {
196
199
  return selectedNavItem.closest('.ActionListItem');
197
200
  }
198
201
  return null;
199
- }, _NavListElement_findSelectedNavItemByCurrentLocation = function _NavListElement_findSelectedNavItemByCurrentLocation() {
202
+ };
203
+ _NavListElement_findSelectedNavItemByCurrentLocation = function _NavListElement_findSelectedNavItemByCurrentLocation() {
200
204
  return __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findSelectedNavItemByHref).call(this, window.location.pathname);
201
- }, _NavListElement_select = function _NavListElement_select(navItem) {
205
+ };
206
+ _NavListElement_select = function _NavListElement_select(navItem) {
202
207
  const currentlySelectedItem = this.querySelector('.ActionListItem--navActive');
203
208
  if (currentlySelectedItem)
204
209
  __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_deselect).call(this, currentlySelectedItem);
@@ -211,7 +216,8 @@ _NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function
211
216
  this.expandItem(parentMenu);
212
217
  parentMenu.classList.add('ActionListContent--hasActiveSubItem');
213
218
  }
214
- }, _NavListElement_deselect = function _NavListElement_deselect(navItem) {
219
+ };
220
+ _NavListElement_deselect = function _NavListElement_deselect(navItem) {
215
221
  navItem.classList.remove('ActionListItem--navActive');
216
222
  if (navItem.children.length > 0) {
217
223
  navItem.children[0].removeAttribute('aria-current');
@@ -221,7 +227,8 @@ _NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function
221
227
  this.collapseItem(parentMenu);
222
228
  parentMenu.classList.remove('ActionListContent--hasActiveSubItem');
223
229
  }
224
- }, _NavListElement_findParentMenu = function _NavListElement_findParentMenu(navItem) {
230
+ };
231
+ _NavListElement_findParentMenu = function _NavListElement_findParentMenu(navItem) {
225
232
  var _a;
226
233
  if (!navItem.classList.contains('ActionListItem--subItem'))
227
234
  return null;
@@ -1 +1 @@
1
- .Subhead{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:row wrap;justify-content:flex-end;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}.Subhead--spacious{margin-top:var(--base-size-40,2.5rem)}.Subhead-heading{flex:1 1 auto;font-size:24px;font-weight:var(--base-text-weight-normal,400);order:0}.Subhead-heading--danger{color:var(--fgColor-danger,var(--color-danger-fg));font-weight:var(--base-text-weight-semibold,600)}.Subhead-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem);order:2}.Subhead-actions{align-self:center;justify-content:flex-end;margin:var(--base-size-4,.25rem) 0 var(--base-size-4,.25rem) var(--base-size-4,.25rem);order:1}.Subhead-actions+.Subhead-description{margin-top:var(--base-size-4,.25rem)}
1
+ .Subhead{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:row wrap;justify-content:flex-end;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}.Subhead--spacious{margin-top:var(--base-size-40,2.5rem)}.Subhead-heading{flex:1 1 auto;font-weight:var(--base-text-weight-normal,400);order:0}.Subhead-heading--large{font-size:var(--base-size-24,1.5rem)}.Subhead-heading--medium{font-size:var(--text-title-size-medium,1.25rem)}.Subhead-heading--danger{color:var(--fgColor-danger,var(--color-danger-fg));font-weight:var(--base-text-weight-semibold,600)}.Subhead-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem);order:2}.Subhead-actions{align-self:center;justify-content:flex-end;margin:var(--base-size-4,.25rem) 0 var(--base-size-4,.25rem) var(--base-size-4,.25rem);order:1}.Subhead-actions+.Subhead-description{margin-top:var(--base-size-4,.25rem)}
@@ -4,6 +4,8 @@
4
4
  ".Subhead",
5
5
  ".Subhead--spacious",
6
6
  ".Subhead-heading",
7
+ ".Subhead-heading--large",
8
+ ".Subhead-heading--medium",
7
9
  ".Subhead-heading--danger",
8
10
  ".Subhead-description",
9
11
  ".Subhead-actions",
@@ -1 +1 @@
1
- {"version":3,"sources":["subhead.pcss"],"names":[],"mappings":"AAEA,SAIE,gHAAqE,CAHrE,YAAa,CAIb,kBAAmB,CACnB,wBAAyB,CAHzB,0CAAsC,CADtC,mDAKF,CAGA,mBACE,qCACF,CAGA,iBAGE,aAAc,CAFd,cAAe,CACf,8CAA2C,CAE3C,OACF,CAGA,yBAEE,kDAA4B,CAD5B,gDAEF,CAGA,qBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAAuC,CAGvC,OACF,CAGA,iBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,sFAAkE,CAGlE,OAKF,CAHE,sCACE,oCACF","file":"subhead.css","sourcesContent":["/* Subhead */\n\n.Subhead {\n display: flex;\n padding-bottom: var(--stack-padding-condensed);\n margin-bottom: var(--stack-gap-normal);\n border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n flex-flow: row wrap;\n justify-content: flex-end; /* Keep actions right aligned. */\n}\n\n/* Modifier class to give a lot of breathing room between sections of content. */\n.Subhead--spacious {\n margin-top: var(--base-size-40);\n}\n\n/* <h2> sized heading with normal font weight */\n.Subhead-heading {\n font-size: 24px;\n font-weight: var(--base-text-weight-normal);\n flex: 1 1 auto;\n order: 0;\n}\n\n/* Make the text bold and red for dangerous content */\n.Subhead-heading--danger {\n font-weight: var(--base-text-weight-semibold);\n color: var(--fgColor-danger);\n}\n\n/* One-liner of supporting text */\n.Subhead-description {\n font-size: var(--text-body-size-medium);\n color: var(--fgColor-muted);\n flex: 1 100%;\n order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.Subhead-actions {\n margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);\n align-self: center;\n justify-content: flex-end;\n order: 1;\n\n & + .Subhead-description {\n margin-top: var(--base-size-4);\n }\n}\n"]}
1
+ {"version":3,"sources":["subhead.pcss"],"names":[],"mappings":"AAEA,SAIE,gHAAqE,CAHrE,YAAa,CAIb,kBAAmB,CACnB,wBAAyB,CAHzB,0CAAsC,CADtC,mDAKF,CAGA,mBACE,qCACF,CAGA,iBAEE,aAAc,CADd,8CAA2C,CAE3C,OACF,CAEA,wBACE,oCACF,CAEA,yBACE,+CACF,CAGA,yBAEE,kDAA4B,CAD5B,gDAEF,CAGA,qBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAAuC,CAGvC,OACF,CAGA,iBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,sFAAkE,CAGlE,OAKF,CAHE,sCACE,oCACF","file":"subhead.css","sourcesContent":["/* Subhead */\n\n.Subhead {\n display: flex;\n padding-bottom: var(--stack-padding-condensed);\n margin-bottom: var(--stack-gap-normal);\n border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n flex-flow: row wrap;\n justify-content: flex-end; /* Keep actions right aligned. */\n}\n\n/* Modifier class to give a lot of breathing room between sections of content. */\n.Subhead--spacious {\n margin-top: var(--base-size-40);\n}\n\n/* <h2> sized heading with normal font weight */\n.Subhead-heading {\n font-weight: var(--base-text-weight-normal);\n flex: 1 1 auto;\n order: 0;\n}\n\n.Subhead-heading--large {\n font-size: var(--base-size-24);\n}\n\n.Subhead-heading--medium {\n font-size: var(--text-title-size-medium);\n}\n\n/* Make the text bold and red for dangerous content */\n.Subhead-heading--danger {\n font-weight: var(--base-text-weight-semibold);\n color: var(--fgColor-danger);\n}\n\n/* One-liner of supporting text */\n.Subhead-description {\n font-size: var(--text-body-size-medium);\n color: var(--fgColor-muted);\n flex: 1 100%;\n order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.Subhead-actions {\n margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);\n align-self: center;\n justify-content: flex-end;\n order: 1;\n\n & + .Subhead-description {\n margin-top: var(--base-size-4);\n }\n}\n"]}
@@ -16,12 +16,19 @@
16
16
 
17
17
  /* <h2> sized heading with normal font weight */
18
18
  .Subhead-heading {
19
- font-size: 24px;
20
19
  font-weight: var(--base-text-weight-normal);
21
20
  flex: 1 1 auto;
22
21
  order: 0;
23
22
  }
24
23
 
24
+ .Subhead-heading--large {
25
+ font-size: var(--base-size-24);
26
+ }
27
+
28
+ .Subhead-heading--medium {
29
+ font-size: var(--text-title-size-medium);
30
+ }
31
+
25
32
  /* Make the text bold and red for dangerous content */
26
33
  .Subhead-heading--danger {
27
34
  font-weight: var(--base-text-weight-semibold);
@@ -17,16 +17,24 @@ module Primer
17
17
  DEFAULT_HEADING_TAG = :div
18
18
  HEADING_TAG_OPTIONS = [DEFAULT_HEADING_TAG, :h1, :h2, :h3, :h4, :h5, :h6].freeze
19
19
 
20
+ DEFAULT_HEADING_SIZE = :large
21
+ HEADING_SIZE_MAP = {
22
+ DEFAULT_HEADING_SIZE => "Subhead-heading--large",
23
+ :medium => "Subhead-heading--medium"
24
+ }.freeze
25
+ HEADING_SIZE_OPTIONS = HEADING_SIZE_MAP.keys.freeze
26
+
20
27
  # The heading
21
28
  #
22
29
  # @param tag [Symbol] <%= one_of(Primer::Beta::Subhead::HEADING_TAG_OPTIONS)%>
23
30
  # @param danger [Boolean] Whether to style the heading as dangerous.
24
31
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
25
- renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, danger: false, **system_arguments|
32
+ renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, danger: false, size: DEFAULT_HEADING_SIZE, **system_arguments|
26
33
  system_arguments[:tag] = fetch_or_fallback(HEADING_TAG_OPTIONS, tag, DEFAULT_HEADING_TAG)
27
34
  system_arguments[:classes] = class_names(
28
35
  system_arguments[:classes],
29
36
  "Subhead-heading",
37
+ HEADING_SIZE_MAP[fetch_or_fallback(HEADING_SIZE_OPTIONS, size, DEFAULT_HEADING_SIZE)],
30
38
  "Subhead-heading--danger": danger
31
39
  )
32
40
 
@@ -15,7 +15,7 @@ const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role
15
15
  const menuItemSelector = validSelectors.map(selector => `:not([hidden]) > ${selector}`).join(', ');
16
16
  const getMnemonicFor = (item) => { var _a; return (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()[0].toLowerCase(); };
17
17
  const printable = /^\S$/;
18
- export default class FocusGroupElement extends HTMLElement {
18
+ class FocusGroupElement extends HTMLElement {
19
19
  constructor() {
20
20
  super(...arguments);
21
21
  _FocusGroupElement_instances.add(this);
@@ -159,6 +159,7 @@ export default class FocusGroupElement extends HTMLElement {
159
159
  _FocusGroupElement_retainSignal = new WeakMap(), _FocusGroupElement_abortController = new WeakMap(), _FocusGroupElement_instances = new WeakSet(), _FocusGroupElement_items_get = function _FocusGroupElement_items_get() {
160
160
  return this.querySelectorAll(menuItemSelector);
161
161
  };
162
+ export default FocusGroupElement;
162
163
  if (!customElements.get('focus-group')) {
163
164
  window.FocusGroupElement = FocusGroupElement;
164
165
  customElements.define('focus-group', FocusGroupElement);