primer_view_components 0.1.7 → 0.1.9

Sign up to get free protection for your applications and to get access to all the features.
Files changed (100) 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 +2 -2
  6. data/app/assets/styles/primer_view_components.css.map +1 -1
  7. data/app/components/primer/alpha/action_list/divider.rb +1 -1
  8. data/app/components/primer/alpha/action_list/heading.html.erb +2 -2
  9. data/app/components/primer/alpha/action_list/heading.rb +9 -5
  10. data/app/components/primer/alpha/action_list/item.rb +1 -3
  11. data/app/components/primer/alpha/action_list.css +1 -1
  12. data/app/components/primer/alpha/action_list.css.json +1 -0
  13. data/app/components/primer/alpha/action_list.css.map +1 -1
  14. data/app/components/primer/alpha/action_list.html.erb +1 -0
  15. data/app/components/primer/alpha/action_list.pcss +5 -0
  16. data/app/components/primer/alpha/action_list.rb +14 -11
  17. data/app/components/primer/alpha/action_menu.rb +1 -1
  18. data/app/components/primer/alpha/dialog.rb +4 -0
  19. data/app/components/primer/alpha/modal_dialog.js +6 -0
  20. data/app/components/primer/alpha/modal_dialog.ts +6 -0
  21. data/app/components/primer/alpha/nav_list/divider.rb +14 -0
  22. data/app/components/primer/alpha/nav_list/group.html.erb +7 -0
  23. data/app/components/primer/alpha/nav_list/group.rb +24 -11
  24. data/app/components/primer/alpha/nav_list/item.rb +4 -0
  25. data/app/components/primer/alpha/nav_list.d.ts +0 -1
  26. data/app/components/primer/alpha/nav_list.html.erb +9 -4
  27. data/app/components/primer/alpha/nav_list.js +3 -4
  28. data/app/components/primer/alpha/nav_list.rb +87 -10
  29. data/app/components/primer/alpha/nav_list.ts +3 -2
  30. data/app/components/primer/alpha/overlay/header.html.erb +5 -3
  31. data/app/components/primer/alpha/overlay/header.rb +4 -1
  32. data/app/components/primer/alpha/overlay.css +1 -1
  33. data/app/components/primer/alpha/overlay.css.json +1 -1
  34. data/app/components/primer/alpha/overlay.css.map +1 -1
  35. data/app/components/primer/alpha/overlay.pcss +1 -1
  36. data/app/components/primer/alpha/overlay.rb +1 -0
  37. data/app/components/primer/alpha/segmented_control.css +1 -1
  38. data/app/components/primer/alpha/segmented_control.css.json +2 -2
  39. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  40. data/app/components/primer/alpha/segmented_control.pcss +10 -8
  41. data/app/components/primer/alpha/text_field.css +1 -1
  42. data/app/components/primer/alpha/text_field.css.json +11 -11
  43. data/app/components/primer/alpha/text_field.css.map +1 -1
  44. data/app/components/primer/alpha/text_field.pcss +2 -2
  45. data/app/components/primer/alpha/toggle_switch.css +1 -1
  46. data/app/components/primer/alpha/toggle_switch.css.json +11 -11
  47. data/app/components/primer/alpha/toggle_switch.css.map +1 -1
  48. data/app/components/primer/alpha/toggle_switch.d.ts +1 -1
  49. data/app/components/primer/alpha/toggle_switch.html.erb +2 -2
  50. data/app/components/primer/alpha/toggle_switch.js +44 -42
  51. data/app/components/primer/alpha/toggle_switch.pcss +4 -4
  52. data/app/components/primer/alpha/toggle_switch.rb +7 -0
  53. data/app/components/primer/alpha/toggle_switch.ts +50 -41
  54. data/app/components/primer/beta/auto_complete.rb +1 -1
  55. data/app/components/primer/beta/button.css +1 -1
  56. data/app/components/primer/beta/button.css.json +2 -0
  57. data/app/components/primer/beta/button.css.map +1 -1
  58. data/app/components/primer/beta/button.pcss +9 -0
  59. data/app/components/primer/component.rb +3 -96
  60. data/app/components/primer/focus_group.js +10 -6
  61. data/app/components/primer/focus_group.ts +10 -5
  62. data/app/lib/primer/attributes_helper.rb +105 -0
  63. data/lib/primer/forms/dsl/input.rb +4 -8
  64. data/lib/primer/forms/dsl/text_field_input.rb +0 -4
  65. data/lib/primer/forms/dsl/toggle_switch_input.rb +4 -0
  66. data/lib/primer/forms/form_control.html.erb +3 -5
  67. data/lib/primer/forms/primer_base_component_wrapper.html.erb +3 -0
  68. data/lib/primer/forms/primer_base_component_wrapper.rb +24 -0
  69. data/lib/primer/forms/text_field.rb +6 -0
  70. data/lib/primer/forms/toggle_switch.html.erb +3 -3
  71. data/lib/primer/forms/toggle_switch.rb +6 -2
  72. data/lib/primer/forms/toggle_switch_input.js +7 -2
  73. data/lib/primer/forms/toggle_switch_input.ts +9 -2
  74. data/lib/primer/static/generate_info_arch.rb +3 -0
  75. data/lib/primer/view_components/version.rb +1 -1
  76. data/lib/primer/yard/component_manifest.rb +1 -1
  77. data/lib/primer/yard/lookbook_pages_backend.rb +7 -1
  78. data/lib/primer/yard/registry.rb +4 -0
  79. data/previews/primer/alpha/nav_list_preview/trailing_action.html.erb +10 -10
  80. data/previews/primer/alpha/nav_list_preview.rb +37 -16
  81. data/previews/primer/alpha/overlay_preview/middle_of_page_with_relative_container.html.erb +19 -0
  82. data/previews/primer/alpha/overlay_preview.rb +31 -0
  83. data/previews/primer/beta/button_preview/trailing_counter.html.erb +11 -0
  84. data/previews/primer/beta/button_preview.rb +15 -0
  85. data/previews/primer/box_preview.rb +28 -0
  86. data/static/arguments.json +29 -13
  87. data/static/audited_at.json +1 -0
  88. data/static/classes.json +3 -0
  89. data/static/constants.json +3 -0
  90. data/static/info_arch.json +448 -20
  91. data/static/previews.json +43 -0
  92. data/static/statuses.json +1 -0
  93. metadata +10 -9
  94. data/lib/tasks/docs.rake +0 -185
  95. data/lib/tasks/helpers/ast_processor.rb +0 -44
  96. data/lib/tasks/helpers/ast_traverser.rb +0 -77
  97. data/lib/tasks/primer_view_components.rake +0 -47
  98. data/lib/tasks/static.rake +0 -29
  99. data/lib/tasks/test.rake +0 -83
  100. data/lib/tasks/utilities.rake +0 -109
data/app/components/primer/alpha/action_list/divider.rb CHANGED
@@ -3,7 +3,7 @@
3
3
  module Primer
4
4
  module Alpha
5
5
  class ActionList
6
- # Group heading rendered above the group contents.
6
+ # Separator with optional text rendered above groups or between individual items.
7
7
  class Divider < Primer::Component
8
8
  DEFAULT_SCHEME = :subtle
9
9
  SCHEME_MAPPINGS = {
data/app/components/primer/alpha/action_list/heading.html.erb CHANGED
@@ -1,8 +1,8 @@
1
1
  <%= render(Primer::BaseComponent.new(tag: :div, **@system_arguments)) do %>
2
- <%= render(Primer::BaseComponent.new(tag: @tag, classes: "ActionList-sectionDivider-title", id: @id)) do %>
2
+ <%= render(Primer::BaseComponent.new(tag: @tag, classes: "ActionList-sectionDivider-title", id: title_id)) do %>
3
3
  <%= @title %>
4
4
  <% end %>
5
- <%= render Primer::ConditionalWrapper.new(condition: @subtitle.present?, tag: :span, classes: "ActionListItem-description") do %>
5
+ <%= render Primer::ConditionalWrapper.new(condition: subtitle?, tag: :span, classes: "ActionListItem-description", id: subtitle_id) do %>
6
6
  <%= @subtitle %>
7
7
  <% end %>
8
8
  <% end %>
data/app/components/primer/alpha/action_list/heading.rb CHANGED
@@ -15,19 +15,16 @@ module Primer
15
15
  HEADING_MAX = 6
16
16
  HEADING_LEVELS = (HEADING_MIN..HEADING_MAX).to_a.freeze
17
17
 
18
- attr_reader :id
18
+ attr_reader :title_id, :subtitle_id
19
19
 
20
- # @param id [String] The group's identifier (ID attribute in HTML).
21
20
  # @param title [String] Sub list title.
22
21
  # @param heading_level [Integer] Heading level. Level 2 results in an `<h2>` tag, level 3 an `<h3>` tag, etc.
23
22
  # @param subtitle [String] Optional sub list description.
24
23
  # @param scheme [Symbol] Display a background color if scheme is `filled`.
25
- # @param tag [Integer] Semantic tag for the heading.
26
24
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
27
- def initialize(title:, id: self.class.generate_id, heading_level: 3, scheme: DEFAULT_SCHEME, subtitle: nil, **system_arguments)
25
+ def initialize(title:, heading_level: 3, scheme: DEFAULT_SCHEME, subtitle: nil, **system_arguments)
28
26
  raise "Heading level must be between #{HEADING_MIN} and #{HEADING_MAX}" unless HEADING_LEVELS.include?(heading_level)
29
27
 
30
- @id = id
31
28
  @heading_level = heading_level
32
29
  @tag = :"h#{heading_level}"
33
30
  @system_arguments = deny_tag_argument(**system_arguments)
@@ -39,6 +36,13 @@ module Primer
39
36
  SCHEME_MAPPINGS[@scheme],
40
37
  @system_arguments[:classes]
41
38
  )
39
+
40
+ @title_id = self.class.generate_id(base_name: "heading-title")
41
+ @subtitle_id = self.class.generate_id(base_name: "heading-subtitle")
42
+ end
43
+
44
+ def subtitle?
45
+ @subtitle.present?
42
46
  end
43
47
  end
44
48
  end
data/app/components/primer/alpha/action_list/item.rb CHANGED
@@ -42,9 +42,7 @@ module Primer
42
42
  #
43
43
  # To render custom content, call the `with_leading_visual_content` method and pass a block that returns a string.
44
44
  renders_one :leading_visual, types: {
45
- icon: lambda { |**system_arguments|
46
- Primer::Beta::Octicon.new(classes: "ActionListItem-visual ActionListItem-visual--leading", **system_arguments)
47
- },
45
+ icon: Primer::Beta::Octicon,
48
46
  avatar: ->(**kwargs) { Primer::Beta::Avatar.new(**{ **kwargs, size: 16 }) },
49
47
  svg: lambda { |**system_arguments|
50
48
  Primer::BaseComponent.new(tag: :svg, width: "16", height: "16", **system_arguments)
data/app/components/primer/alpha/action_list.css CHANGED
@@ -1 +1 @@
1
- :root{--actionListContent-paddingBlock:var(--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(--actionListContent-paddingBlock)*-1);width:100%}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before{height:var(--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,.ActionListWrap--divided .ActionListItem--navActive+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem{background-color:initial;border-radius:var(--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){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover,.ActionListItem:not(.ActionListItem--hasSubItem):hover{background-color:var(--color-action-list-item-default-hover-bg);cursor:pointer}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover:not(.ActionListItem--navActive,:focus-visible),.ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive,:focus-visible){box-shadow:var(--borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:solid var(--borderWidth-thin,1px) #0000;outline-offset:calc(var(--borderWidth-thin, 1px)*-1)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{background:var(--color-action-list-item-default-active-bg)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active:not(.ActionListItem--navActive),.ActionListItem:not(.ActionListItem--hasSubItem):active:not(.ActionListItem--navActive){box-shadow:var(--borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:solid var(--borderWidth-thin,1px) #0000;outline-offset:calc(var(--borderWidth-thin, 1px)*-1)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active .ActionListItem-label:before,.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active+.ActionListItem .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):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;@keyframes checkmarkIn{0%{clip-path:inset(16px 0 0 0)}to{clip-path:inset(0 0 0 0)}}}}.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(--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;@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(16px 0 0 0)}}}}.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(--borderWidth-thin,1px)}.ActionListItem[aria-checked=false] .ActionListItem-multiSelectIconRect,.ActionListItem[aria-selected=false] .ActionListItem-multiSelectIconRect{fill:var(--color-canvas-default);border:var(--borderWidth-thin,1px) solid var(--color-border-default)}.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(--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(--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.ActionListItem--disabled .ActionListContent .ActionListItem-description,.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-label,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label{color:var(--color-primer-fg-disabled)}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-visual,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill:var(--color-primer-fg-disabled)}@media (hover:hover){.ActionListItem.ActionListItem--disabled: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,.ActionListItem.ActionListItem--danger:hover .ActionListItem-visual{color:var(--color-action-list-item-danger-hover-text)}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--color-action-list-item-danger-active-bg)}.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-visual{color:var(--color-action-list-item-danger-hover-text)}.ActionListContent{-webkit-tap-highlight-color:transparent;align-items:start;background-color:initial;border:none;border-radius:var(--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(--actionListContent-paddingBlock);padding-inline:var(--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(--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(--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{--actionListContent-paddingBlock:var(--control-large-paddingBlock,0.625rem)}.ActionListContent.ActionListContent--sizeXLarge{--actionListContent-paddingBlock:var(--control-xlarge-paddingBlock,0.875rem)}@media (pointer:coarse){.ActionListContent{--actionListContent-paddingBlock:var(--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(--text-body-size-small,12px);font-weight:var(--base-text-weight-normal,400);line-height:var(--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(--control-medium-lineBoxHeight,20px);pointer-events:none}.ActionListItem-label{color:var(--color-fg-default);font-size:var(--text-body-size-medium,14px);font-weight:var(--base-text-weight-normal,400);grid-area:label;line-height:var(--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(--text-body-size-small,12px);line-height:var(--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(--text-body-size-small,12px);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-small,1.66667);padding-block:var(--base-size-8,8px);padding-inline:var(--actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{background:var(--color-action-list-item-inline-divider);border:0;display:block;height:var(--borderWidth-thin,1px);list-style:none;margin-block-end:var(--base-size-8,8px);margin-block-start:calc(var(--base-size-8, 8px) - var(--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(--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(--borderWidth-thin,1px) var(--color-action-list-item-inline-divider);border-top:solid var(--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(--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}
1
+ :root{--actionListContent-paddingBlock:var(--control-medium-paddingBlock,6px)}.ActionListHeader{margin-bottom:var(--base-size-16,16px);margin-left:var(--base-size-8,8px)}.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(--actionListContent-paddingBlock)*-1);width:100%}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before{height:var(--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,.ActionListWrap--divided .ActionListItem--navActive+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem{background-color:initial;border-radius:var(--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){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover,.ActionListItem:not(.ActionListItem--hasSubItem):hover{background-color:var(--color-action-list-item-default-hover-bg);cursor:pointer}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover:not(.ActionListItem--navActive,:focus-visible),.ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive,:focus-visible){box-shadow:var(--borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:solid var(--borderWidth-thin,1px) #0000;outline-offset:calc(var(--borderWidth-thin, 1px)*-1)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{background:var(--color-action-list-item-default-active-bg)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active:not(.ActionListItem--navActive),.ActionListItem:not(.ActionListItem--hasSubItem):active:not(.ActionListItem--navActive){box-shadow:var(--borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:solid var(--borderWidth-thin,1px) #0000;outline-offset:calc(var(--borderWidth-thin, 1px)*-1)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active .ActionListItem-label:before,.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active+.ActionListItem .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):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;@keyframes checkmarkIn{0%{clip-path:inset(16px 0 0 0)}to{clip-path:inset(0 0 0 0)}}}}.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(--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;@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(16px 0 0 0)}}}}.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(--borderWidth-thin,1px)}.ActionListItem[aria-checked=false] .ActionListItem-multiSelectIconRect,.ActionListItem[aria-selected=false] .ActionListItem-multiSelectIconRect{fill:var(--color-canvas-default);border:var(--borderWidth-thin,1px) solid var(--color-border-default)}.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(--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(--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.ActionListItem--disabled .ActionListContent .ActionListItem-description,.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-label,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label{color:var(--color-primer-fg-disabled)}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-visual,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill:var(--color-primer-fg-disabled)}@media (hover:hover){.ActionListItem.ActionListItem--disabled: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,.ActionListItem.ActionListItem--danger:hover .ActionListItem-visual{color:var(--color-action-list-item-danger-hover-text)}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--color-action-list-item-danger-active-bg)}.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-visual{color:var(--color-action-list-item-danger-hover-text)}.ActionListContent{-webkit-tap-highlight-color:transparent;align-items:start;background-color:initial;border:none;border-radius:var(--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(--actionListContent-paddingBlock);padding-inline:var(--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(--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(--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{--actionListContent-paddingBlock:var(--control-large-paddingBlock,0.625rem)}.ActionListContent.ActionListContent--sizeXLarge{--actionListContent-paddingBlock:var(--control-xlarge-paddingBlock,0.875rem)}@media (pointer:coarse){.ActionListContent{--actionListContent-paddingBlock:var(--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(--text-body-size-small,12px);font-weight:var(--base-text-weight-normal,400);line-height:var(--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(--control-medium-lineBoxHeight,20px);pointer-events:none}.ActionListItem-label{color:var(--color-fg-default);font-size:var(--text-body-size-medium,14px);font-weight:var(--base-text-weight-normal,400);grid-area:label;line-height:var(--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(--text-body-size-small,12px);line-height:var(--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(--text-body-size-small,12px);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-small,1.66667);padding-block:var(--base-size-8,8px);padding-inline:var(--actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{background:var(--color-action-list-item-inline-divider);border:0;display:block;height:var(--borderWidth-thin,1px);list-style:none;margin-block-end:var(--base-size-8,8px);margin-block-start:calc(var(--base-size-8, 8px) - var(--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(--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(--borderWidth-thin,1px) var(--color-action-list-item-inline-divider);border-top:solid var(--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(--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
@@ -2,6 +2,7 @@
2
2
  "name": "alpha/action_list",
3
3
  "selectors": [
4
4
  ":root",
5
+ ".ActionListHeader",
5
6
  ".ActionListWrap",
6
7
  ".ActionListWrap--inset",
7
8
  ".ActionListWrap--divided .ActionListItem-label:before",
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":"AAAA,MACE,uEACF,CAKA,gBACE,eACF,CAEA,uBACE,8BACF,CAKE,sDAKE,UAGF,CAIE,8HALA,uDAAwD,CADxD,UAAW,CAHX,aAAc,CAFd,iBAAkB,CAClB,kDAAqD,CAErD,UAgBA,CARA,wEAKE,kCAGF,CAGA,8FACE,aACF,CAmBJ,4dAEE,iBACF,CAIA,gBAGE,wBAA6B,CAC7B,4CAA8C,CAF9C,eAAgB,CADhB,iBA6RF,CAtRE,6CAEE,cACF,CAGA,qBAOI,gRAEE,iBACF,CAEJ,CAGA,mDACE,YACF,CAKE,8DACE,SAWF,CATE,qBACE,oEACE,+DACF,CACF,CAEA,qEACE,gEACF,CAQF,qBACE,2HAEE,+DAAgE,CADhE,cASF,CANE,yNAIE,0FAA4F,CAF5F,+CAAuD,CACvD,oDAEF,CAEJ,CAEA,6HACE,0DAaF,CAXE,6LAIE,0FAA4F,CAF5F,+CAAuD,CACvD,oDAEF,CAEA,8YAEE,iBACF,CAWF,iJAEE,SAAU,CACV,6CAA+C,CAF/C,kBAGF,CAGA,mJACE,kBAcF,CAZE,yDAHF,mJAII,2DAAmE,CACnE,uBACE,GACE,2BACF,CAEA,GACE,wBACF,CACF,CAEJ,CADE,CAKA,+MACE,2BAA4B,CAC5B,6BAA8B,CAC9B,wCACF,CAEA,iNACE,gCACF,CAOF,mJAEE,SAAU,CACV,gDAAkD,CAFlD,iBAGF,CAGA,qJAGE,2BAA4B,CAD5B,mCAAsC,CADtC,iBAgBF,CAZE,yDALF,qJAMI,4DAAoE,CACpE,wBACE,GACE,wBACF,CAEA,GACE,2BACF,CACF,CAEJ,CADE,CAKA,iNACE,gCAAiC,CACjC,kCAAmC,CACnC,wCACF,CAGF,iJACE,gCAAiC,CACjC,oEACF,CAKF,oCAEE,4DAA6D,CAD7D,8CAmBF,CAhBE,qBACE,0CACE,+DACF,CACF,CAEA,sGAEE,iBACF,CAIA,0CC/PF,iCAAkC,CAClC,4CAA8C,CAF9C,UAAW,CADX,+BAAiC,CAFjC,qCAAmB,CAFnB,iBAAkB,CAClB,oBAAqB,CAErB,4BDoQE,CAOE,8FACE,gDACF,CAGF,uEACE,4DAiBF,CAfE,qBACE,6EACE,+DACF,CACF,CAEA,4KAEE,iBACF,CAGA,6EC5RJ,iCAAkC,CAClC,4CAA8C,CAF9C,UAAW,CADX,+BAAiC,CAFjC,qCAAmB,CAFnB,iBAAkB,CAClB,oBAAqB,CAErB,4BDiSI,CASA,0UAEE,qCACF,CAEA,iKACE,oCACF,CAGF,qBACE,yFAEE,wBAA6B,CAD7B,kBAEF,CACF,CAWA,2HACE,4BACF,CAEA,qBACE,6CACE,wDAMF,CAJE,uIAEE,qDACF,CAEJ,CAGE,iEACE,yDAMF,CAJE,+KAEE,qDACF,CAOR,mBAcE,uCAAwC,CAIxC,iBAAkB,CATlB,wBAA6B,CAC7B,WAAY,CACZ,4CAA8C,CAL9C,6BAA8B,CAJ9B,YAAa,CAcb,qFAAsF,CACtF,oFAAsF,CAFtF,8BAA+B,CAX/B,mDAAoD,CACpD,gEAAkE,CAJlE,iBAAkB,CAMlB,eAAgB,CAMhB,yBAA0B,CAD1B,qCAAsC,CAJtC,wBAAiB,CAAjB,gBAAiB,CALjB,UAgKF,CA9IE,qCACE,0CACF,CAIA,yBACE,oBACF,CAIE,gIAEE,qCACF,CAEA,8DACE,oCACF,CAEA,qBACE,6CAEE,wBAA6B,CAD7B,kBAEF,CACF,CASE,yDADF,wDAEI,wFAMJ,CALE,CAEA,2EACE,qCACF,CAKA,uGACE,qCACF,CAKA,uGACE,qCACF,CAKA,uGACE,qCACF,CAKF,oEAEE,oBAAqB,CADrB,gCAEF,CAEA,6DACE,WAAY,CAGZ,SAAU,CAFV,gBAAiB,CAGjB,uBAAwB,CAFxB,kBAGF,CAGE,iGACE,gDACF,CAKF,qEAEE,mBAAoB,CADpB,gCAEF,CAEA,8DACE,QAAS,CAGT,SAAU,CAFV,eAAgB,CAGhB,wDAA2D,CAF3D,iBAGF,CAGA,4EACE,4DAeF,CAbE,kGACE,gDACF,CAEA,sLAEE,iBACF,CAGA,kFCteJ,iCAAkC,CAClC,4CAA8C,CAF9C,UAAW,CADX,+BAAiC,CAFjC,qCAAmB,CAFnB,iBAAkB,CAClB,oBAAqB,CAErB,4BD2eI,CAMJ,gDACE,2EACF,CAEA,iDACE,4EACF,CAGA,wBAzJF,mBA0JI,2EASJ,CARE,CAIE,8EACE,gBACF,CAMJ,gCACE,uBACF,CAEA,gCACE,uBACF,CAEA,iCACE,wBACF,CAEA,iCACE,wBACF,CAIA,gCAEE,YAAa,CACb,qBAAsB,CACtB,0BAA4B,CAH5B,eAQF,CAHE,sDACE,gDACF,CAIF,wCAGE,oBAAqB,CADrB,kBAAmB,CAEnB,0BAA4B,CAH5B,iBAIF,CAGA,4BAIE,2BAA4B,CAH5B,0CAA4C,CAC5C,8CAAgD,CAChD,qDAEF,CAIA,8CAME,0BAA2B,CAC3B,kBAAmB,CAHnB,2BAA4B,CAF5B,YAAa,CACb,mDAAqD,CAErD,mBAGF,CAGA,sBAKE,6BAA8B,CAH9B,2CAA6C,CAC7C,8CAAgD,CAGhD,eAAgB,CAFhB,sDAA8D,CAH9D,iBAMF,CAEA,gCACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAKA,kEACE,0CAA4C,CAC5C,qDACF,CAIA,6BAGE,kBAAmB,CAFnB,YAAa,CACb,gBAEF,CAEA,+BAEE,2BAA4B,CAD5B,wBAEF,CAKE,oEACE,iBACF,CAIE,2JACE,kBACF,CAQF,uCAOE,2BAA4B,CAN5B,YAAa,CAOb,qBAAsB,CAJtB,0CAA4C,CAE5C,gDAAkD,CADlD,qDAA6D,CAF7D,oCAAsC,CADtC,oDAOF,CAGA,iCAQE,uDAAwD,CACxD,QAAS,CART,aAAc,CACd,kCAAoC,CAKpC,eAAgB,CAFhB,uCAAyC,CADzC,+EAAgF,CAEhF,8CAAiD,CAHjD,SAOF,CAEA,4DAGE,2BAA4B,CAF5B,0CAA4C,CAC5C,gDAEF,CAGF,mCAIE,qCAAsC,CAEtC,4FAA8F,CAD9F,yFAA2F,CAH3F,uCAAyC,CADzC,+EAAgF,CAEhF,8CAcF,CARE,yCAEE,qBAAsB,CADtB,6BAEF,CAEA,+CACE,oBACF","file":"action_list.css","sourcesContent":[":root {\n --actionListContent-paddingBlock: var(--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(--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(--actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: var(--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(--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(--borderWidth-thin, 1px) transparent;\n outline-offset: calc(-1 * var(--borderWidth-thin, 1px));\n box-shadow: var(--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(--borderWidth-thin, 1px) transparent;\n outline-offset: calc(-1 * var(--borderWidth-thin, 1px));\n box-shadow: var(--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 @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 }\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(--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 @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 }\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(--borderWidth-thin, 1px);\n }\n }\n\n & .ActionListItem-multiSelectIconRect {\n fill: var(--color-canvas-default);\n border: var(--borderWidth-thin, 1px) solid var(--color-border-default);\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 &.ActionListItem--disabled,\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 & .ActionListItem-visual {\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 & .ActionListItem-label,\n & .ActionListItem-visual {\n color: var(--color-action-list-item-danger-hover-text);\n }\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(--actionListContent-paddingBlock);\n padding-inline: var(--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(--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(--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 --actionListContent-paddingBlock: var(--control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));\n }\n\n &.ActionListContent--sizeXLarge {\n --actionListContent-paddingBlock: var(--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 --actionListContent-paddingBlock: var(--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(--text-body-size-small, 12px);\n font-weight: var(--base-text-weight-normal, 400);\n line-height: var(--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(--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(--text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-normal, 400);\n line-height: var(--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(--text-body-size-small, 12px);\n line-height: var(--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(--actionListContent-paddingBlock);\n padding-block: var(--base-size-8, 8px);\n font-size: var(--text-body-size-small, 12px);\n line-height: var(--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(--borderWidth-thin, 1px);\n padding: 0;\n margin-block-start: calc(var(--base-size-8, 8px) - var(--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(--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(--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(--borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);\n border-bottom: solid var(--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(--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 --actionListContent-paddingBlock: var(--control-medium-paddingBlock, 6px);\n}\n\n/* ActionList */\n\n.ActionListHeader {\n margin-left: var(--base-size-8, 8px);\n margin-bottom: var(--base-size-16, 16px);\n}\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(--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(--actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: var(--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(--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(--borderWidth-thin, 1px) transparent;\n outline-offset: calc(-1 * var(--borderWidth-thin, 1px));\n box-shadow: var(--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(--borderWidth-thin, 1px) transparent;\n outline-offset: calc(-1 * var(--borderWidth-thin, 1px));\n box-shadow: var(--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 @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 }\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(--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 @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 }\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(--borderWidth-thin, 1px);\n }\n }\n\n & .ActionListItem-multiSelectIconRect {\n fill: var(--color-canvas-default);\n border: var(--borderWidth-thin, 1px) solid var(--color-border-default);\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 &.ActionListItem--disabled,\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 & .ActionListItem-visual {\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 & .ActionListItem-label,\n & .ActionListItem-visual {\n color: var(--color-action-list-item-danger-hover-text);\n }\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(--actionListContent-paddingBlock);\n padding-inline: var(--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(--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(--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 --actionListContent-paddingBlock: var(--control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));\n }\n\n &.ActionListContent--sizeXLarge {\n --actionListContent-paddingBlock: var(--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 --actionListContent-paddingBlock: var(--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(--text-body-size-small, 12px);\n font-weight: var(--base-text-weight-normal, 400);\n line-height: var(--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(--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(--text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-normal, 400);\n line-height: var(--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(--text-body-size-small, 12px);\n line-height: var(--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(--actionListContent-paddingBlock);\n padding-block: var(--base-size-8, 8px);\n font-size: var(--text-body-size-small, 12px);\n line-height: var(--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(--borderWidth-thin, 1px);\n padding: 0;\n margin-block-start: calc(var(--base-size-8, 8px) - var(--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(--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(--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(--borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);\n border-bottom: solid var(--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(--borderRadius-medium, 6px);\n}\n"]}
data/app/components/primer/alpha/action_list.html.erb CHANGED
@@ -16,4 +16,5 @@
16
16
  <%= item %>
17
17
  <% end %>
18
18
  <% end %>
19
+ <%= capture(&post_list_content_block) if post_list_content_block %>
19
20
  <% end %>
data/app/components/primer/alpha/action_list.pcss CHANGED
@@ -4,6 +4,11 @@
4
4
 
5
5
  /* ActionList */
6
6
 
7
+ .ActionListHeader {
8
+ margin-left: var(--base-size-8, 8px);
9
+ margin-bottom: var(--base-size-16, 16px);
10
+ }
11
+
7
12
  /* <ul> */
8
13
  .ActionListWrap {
9
14
  list-style: none;
data/app/components/primer/alpha/action_list.rb CHANGED
@@ -53,7 +53,7 @@ module Primer
53
53
  #
54
54
  # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Heading) %>.
55
55
  renders_one :heading, lambda { |**system_arguments|
56
- Heading.new(list_id: @id, **system_arguments)
56
+ Heading.new(**system_arguments)
57
57
  }
58
58
 
59
59
  # Items.
@@ -74,7 +74,7 @@ module Primer
74
74
  set_slot(:items, { renderable: Divider, collection: true }, **system_arguments, &block)
75
75
  end
76
76
 
77
- attr_reader :select_variant, :role
77
+ attr_reader :id, :select_variant, :role
78
78
 
79
79
  # @param id [String] HTML ID value.
80
80
  # @param role [Boolean] ARIA role describing the function of the list. listbox and menu are a common values.
@@ -124,15 +124,10 @@ module Primer
124
124
 
125
125
  # @private
126
126
  def before_render
127
- aria_label = aria(:label, @system_arguments)
128
- aria_labelledby = aria(:labelledby, @system_arguments)
129
-
130
- if heading.present?
131
- @system_arguments[:"aria-labelledby"] = heading.id unless aria_labelledby
132
- raise ArgumentError, "An aria-label should not be provided if a heading is present" if aria_label.present?
133
- elsif aria_label.blank? && aria_labelledby.blank?
134
- raise ArgumentError, "An aria-label, aria-labelledby, or heading must be provided"
135
- end
127
+ return unless heading?
128
+
129
+ @system_arguments[:"aria-labelledby"] = heading.title_id
130
+ @system_arguments[:"aria-describedby"] = heading.subtitle_id if heading.subtitle?
136
131
  end
137
132
 
138
133
  # @private
@@ -177,6 +172,14 @@ module Primer
177
172
 
178
173
  # @private
179
174
  def will_add_item(_item); end
175
+
176
+ private
177
+
178
+ def with_post_list_content(&block)
179
+ @post_list_content_block = block
180
+ end
181
+
182
+ attr_reader :post_list_content_block
180
183
  end
181
184
  end
182
185
  end
data/app/components/primer/alpha/action_menu.rb CHANGED
@@ -105,7 +105,7 @@ module Primer
105
105
  # <% c.with_item(tag: :"clipboard-copy", value: "Text to copy") do %>
106
106
  # Copy Text
107
107
  # <% end %>
108
- # <% c.with_item(tag: :button, type: "button", is_dangerous: true) do %>
108
+ # <% c.with_item(tag: :button, type: "button", scheme: :danger) do %>
109
109
  # Delete
110
110
  # <% end %>
111
111
  # <% end %>
data/app/components/primer/alpha/dialog.rb CHANGED
@@ -50,6 +50,10 @@ module Primer
50
50
  }.freeze
51
51
  POSITION_NARROW_OPTIONS = POSITION_NARROW_MAPPINGS.keys
52
52
 
53
+ # The dialog's ID value.
54
+ #
55
+ attr_reader :id
56
+
53
57
  # Optional button to open the dialog.
54
58
  #
55
59
  # @param system_arguments [Hash] The same arguments as <%= link_to_component(Primer::Beta::Button) %>.
data/app/components/primer/alpha/modal_dialog.js CHANGED
@@ -31,6 +31,10 @@ function clickHandler(event) {
31
31
  if (dialog instanceof ModalDialogElement) {
32
32
  dialog.openButton = button;
33
33
  dialog.show();
34
+ // A buttons default behaviour in some browsers it to send a pointer event
35
+ // If the behaviour is allowed through the dialog will be shown but then
36
+ // quickly hidden- as if it were never shown. This prevents that.
37
+ event.preventDefault();
34
38
  return;
35
39
  }
36
40
  }
@@ -96,6 +100,7 @@ export class ModalDialogElement extends HTMLElement {
96
100
  if (this.open)
97
101
  return;
98
102
  this.setAttribute('open', '');
103
+ this.setAttribute('aria-disabled', 'false');
99
104
  (_a = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _a === void 0 ? void 0 : _a.classList.remove('Overlay--hidden');
100
105
  document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`;
101
106
  document.body.style.overflow = 'hidden';
@@ -109,6 +114,7 @@ export class ModalDialogElement extends HTMLElement {
109
114
  if (!this.open)
110
115
  return;
111
116
  this.removeAttribute('open');
117
+ this.setAttribute('aria-disabled', 'true');
112
118
  (_b = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _b === void 0 ? void 0 : _b.classList.add('Overlay--hidden');
113
119
  document.body.style.paddingRight = '0';
114
120
  document.body.style.overflow = 'initial';
data/app/components/primer/alpha/modal_dialog.ts CHANGED
@@ -23,6 +23,10 @@ function clickHandler(event: Event) {
23
23
  if (dialog instanceof ModalDialogElement) {
24
24
  dialog.openButton = button
25
25
  dialog.show()
26
+ // A buttons default behaviour in some browsers it to send a pointer event
27
+ // If the behaviour is allowed through the dialog will be shown but then
28
+ // quickly hidden- as if it were never shown. This prevents that.
29
+ event.preventDefault()
26
30
  return
27
31
  }
28
32
  }
@@ -96,6 +100,7 @@ export class ModalDialogElement extends HTMLElement {
96
100
  if (value) {
97
101
  if (this.open) return
98
102
  this.setAttribute('open', '')
103
+ this.setAttribute('aria-disabled', 'false')
99
104
  this.#overlayBackdrop?.classList.remove('Overlay--hidden')
100
105
  document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`
101
106
  document.body.style.overflow = 'hidden'
@@ -107,6 +112,7 @@ export class ModalDialogElement extends HTMLElement {
107
112
  } else {
108
113
  if (!this.open) return
109
114
  this.removeAttribute('open')
115
+ this.setAttribute('aria-disabled', 'true')
110
116
  this.#overlayBackdrop?.classList.add('Overlay--hidden')
111
117
  document.body.style.paddingRight = '0'
112
118
  document.body.style.overflow = 'initial'
data/app/components/primer/alpha/nav_list/divider.rb ADDED
@@ -0,0 +1,14 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Primer
4
+ module Alpha
5
+ class NavList
6
+ # Separator with optional text rendered above groups or between individual items.
7
+ class Divider < Primer::Alpha::ActionList::Divider
8
+ def kind
9
+ :divider
10
+ end
11
+ end
12
+ end
13
+ end
14
+ end
data/app/components/primer/alpha/nav_list/group.html.erb ADDED
@@ -0,0 +1,7 @@
1
+ <% with_post_list_content do %>
2
+ <% if show_more_item? %>
3
+ <%= show_more_item %>
4
+ <% end %>
5
+ <% end %>
6
+
7
+ <% render_parent %>
data/app/components/primer/alpha/nav_list/group.rb CHANGED
@@ -20,19 +20,30 @@ module Primer
20
20
  @item_classes,
21
21
  system_arguments[:classes]
22
22
  )
23
- system_arguments[:id] = "ActionList--showMoreItem"
23
+ system_arguments[:tag] = :div
24
+ system_arguments[:id] ||= self.class.generate_id(base_name: "item")
24
25
  system_arguments[:hidden] = true
25
26
  system_arguments[:href] = "#"
26
27
  system_arguments[:data] ||= {}
27
28
  system_arguments[:data][:target] = "nav-list.showMoreItem"
28
29
  system_arguments[:data][:action] = "click:nav-list#showMore"
29
- system_arguments[:data][:"current-page"] = "1"
30
- system_arguments[:data][:"total-pages"] = pages.to_s
30
+ system_arguments[:data][:current_page] = "1"
31
+ system_arguments[:data][:total_pages] = pages.to_s
31
32
  system_arguments[:label_arguments] = {
32
33
  **system_arguments[:label_arguments] || {},
33
34
  color: :accent
34
35
  }
35
36
 
37
+ system_arguments[:content_arguments] = {
38
+ **system_arguments[:content_arguments] || {},
39
+ tag: :button
40
+ }
41
+
42
+ system_arguments[:content_arguments][:data] = merge_data(
43
+ system_arguments[:content_arguments],
44
+ data: { list_id: id }
45
+ )
46
+
36
47
  component_klass.new(list: self, src: src, **system_arguments)
37
48
  }
38
49
 
@@ -46,7 +57,6 @@ module Primer
46
57
  def initialize(selected_item_id: nil, **system_arguments)
47
58
  @system_arguments = system_arguments
48
59
  @selected_item_id = selected_item_id
49
- @system_arguments[:"data-target"] = "nav-list.list"
50
60
 
51
61
  super(**@system_arguments)
52
62
  end
@@ -58,13 +68,6 @@ module Primer
58
68
  end
59
69
  # :nocov:
60
70
 
61
- # The items contained within this group.
62
- #
63
- # @return [Array<Primer::Alpha::ActionList::Item>]
64
- def items
65
- [*super, show_more_item].tap(&:compact!)
66
- end
67
-
68
71
  # @!parse
69
72
  # # Items.
70
73
  # #
@@ -79,6 +82,16 @@ module Primer
79
82
  list: self
80
83
  )
81
84
  end
85
+
86
+ def kind
87
+ :group
88
+ end
89
+
90
+ def before_render
91
+ super
92
+
93
+ raise ArgumentError, "NavList groups are required to have headings" unless heading?
94
+ end
82
95
  end
83
96
  end
84
97
  end
data/app/components/primer/alpha/nav_list/item.rb CHANGED
@@ -110,6 +110,10 @@ module Primer
110
110
  )
111
111
  end
112
112
 
113
+ def kind
114
+ :item
115
+ end
116
+
113
117
  private
114
118
 
115
119
  # Normally it would be easier to simply ask each item for its active status, eg.
data/app/components/primer/alpha/nav_list.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  export declare class NavListElement extends HTMLElement {
2
2
  #private;
3
- list: HTMLElement;
4
3
  items: HTMLElement[];
5
4
  showMoreItem: HTMLElement;
6
5
  focusMarkers: HTMLElement[];
data/app/components/primer/alpha/nav_list.html.erb CHANGED
@@ -1,10 +1,15 @@
1
1
  <%= render(Primer::BaseComponent.new(tag: :nav, **@system_arguments)) do %>
2
+ <%= heading %>
2
3
  <nav-list>
3
- <% groups.each_with_index do |group, index| %>
4
- <% if index > 0 %>
5
- <%= render(Primer::Alpha::ActionList::Divider.new) %>
4
+ <%= render(Primer::ConditionalWrapper.new(condition: render_outer_list?, tag: :ul, classes: "ActionListWrap")) do %>
5
+ <% items.each_with_index do |item, index| %>
6
+ <% if index > 0 && render_divider_between?(item, items[index - 1]) %>
7
+ <%= render(Primer::Alpha::ActionList::Divider.new) %>
8
+ <% end %>
9
+ <%= render(Primer::ConditionalWrapper.new(condition: render_outer_list? && group?(item), tag: :li)) do %>
10
+ <%= item %>
11
+ <% end %>
6
12
  <% end %>
7
- <%= group %>
8
13
  <% end %>
9
14
  </nav-list>
10
15
  <% end %>
data/app/components/primer/alpha/nav_list.js CHANGED
@@ -153,7 +153,9 @@ let NavListElement = class NavListElement extends HTMLElement {
153
153
  }
154
154
  const fragment = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_parseHTML).call(this, document, html);
155
155
  (_a = fragment === null || fragment === void 0 ? void 0 : fragment.querySelector('li > a')) === null || _a === void 0 ? void 0 : _a.setAttribute('data-targets', 'nav-list.focusMarkers');
156
- this.list.insertBefore(fragment, this.showMoreItem);
156
+ const listId = e.target.closest('button').getAttribute('data-list-id');
157
+ const list = document.getElementById(listId);
158
+ list.append(fragment);
157
159
  (_b = this.focusMarkers.pop()) === null || _b === void 0 ? void 0 : _b.focus();
158
160
  this.showMoreDisabled = false;
159
161
  }
@@ -225,9 +227,6 @@ _NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function
225
227
  return null;
226
228
  }
227
229
  };
228
- __decorate([
229
- target
230
- ], NavListElement.prototype, "list", void 0);
231
230
  __decorate([
232
231
  targets
233
232
  ], NavListElement.prototype, "items", void 0);