primer_view_components 0.0.116 → 0.0.118

data/app/components/primer/alpha/layout.rb

@@ -81,9 +81,9 @@ module Primer
 
       # @example Default
       #
-      #   <%= render(Primer::Alpha::Layout.new) do |c| %>
-      #     <% c.with_main(border: true) { "Main" } %>
-      #     <% c.with_sidebar(border: true) { "Sidebar" } %>
+      #   <%= render(Primer::Alpha::Layout.new) do |component| %>
+      #     <% component.with_main(border: true) { "Main" } %>
+      #     <% component.with_sidebar(border: true) { "Sidebar" } %>
       #   <% end %>
       #
       # @example Main widths
@@ -97,21 +97,21 @@ module Primer
       #     When flowing as a row, `Main` takes the full width.
       #
       #   @code
-      #     <%= render(Primer::Alpha::Layout.new) do |c| %>
-      #       <% c.with_main(width: :full, border: true) { "Main" } %>
-      #       <% c.with_sidebar(border: true) { "Sidebar" } %>
+      #     <%= render(Primer::Alpha::Layout.new) do |component| %>
+      #       <% component.with_main(width: :full, border: true) { "Main" } %>
+      #       <% component.with_sidebar(border: true) { "Sidebar" } %>
       #     <% end %>
-      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
-      #       <% c.with_main(width: :md, border: true) { "Main" } %>
-      #       <% c.with_sidebar(border: true) { "Sidebar" } %>
+      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
+      #       <% component.with_main(width: :md, border: true) { "Main" } %>
+      #       <% component.with_sidebar(border: true) { "Sidebar" } %>
       #     <% end %>
-      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
-      #       <% c.with_main(width: :lg, border: true) { "Main" } %>
-      #       <% c.with_sidebar(border: true) { "Sidebar" } %>
+      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
+      #       <% component.with_main(width: :lg, border: true) { "Main" } %>
+      #       <% component.with_sidebar(border: true) { "Sidebar" } %>
       #     <% end %>
-      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
-      #       <% c.with_main(width: :xl, border: true) { "Main" } %>
-      #       <% c.with_sidebar(border: true) { "Sidebar" } %>
+      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
+      #       <% component.with_main(width: :xl, border: true) { "Main" } %>
+      #       <% component.with_sidebar(border: true) { "Sidebar" } %>
       #     <% end %>
       #
       # @example Sidebar widths
@@ -126,17 +126,17 @@ module Primer
       #     When flowing as a row, `Sidebar` takes the full width.
       #
       #   @code
-      #     <%= render(Primer::Alpha::Layout.new) do |c| %>
-      #       <% c.with_main(border: true) { "Main" } %>
-      #       <% c.with_sidebar(width: :default, border: true) { "Sidebar" } %>
+      #     <%= render(Primer::Alpha::Layout.new) do |component| %>
+      #       <% component.with_main(border: true) { "Main" } %>
+      #       <% component.with_sidebar(width: :default, border: true) { "Sidebar" } %>
       #     <% end %>
-      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
-      #       <% c.with_main(border: true) { "Main" } %>
-      #       <% c.with_sidebar(width: :narrow, border: true) { "Sidebar" } %>
+      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
+      #       <% component.with_main(border: true) { "Main" } %>
+      #       <% component.with_sidebar(width: :narrow, border: true) { "Sidebar" } %>
       #     <% end %>
-      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
-      #       <% c.with_main(border: true) { "Main" } %>
-      #       <% c.with_sidebar(width: :wide, border: true) { "Sidebar" } %>
+      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
+      #       <% component.with_main(border: true) { "Main" } %>
+      #       <% component.with_sidebar(width: :wide, border: true) { "Sidebar" } %>
       #     <% end %>
       #
       # @example Sidebar placement
@@ -145,13 +145,13 @@ module Primer
       #     Use `start` for sidebars that manipulate local navigation, while right-aligned `end` is useful for metadata and other auxiliary information.
       #
       #   @code
-      #     <%= render(Primer::Alpha::Layout.new) do |c| %>
-      #       <% c.with_main(border: true) { "Main" } %>
-      #       <% c.with_sidebar(col_placement: :start, border: true) { "Sidebar" } %>
+      #     <%= render(Primer::Alpha::Layout.new) do |component| %>
+      #       <% component.with_main(border: true) { "Main" } %>
+      #       <% component.with_sidebar(col_placement: :start, border: true) { "Sidebar" } %>
       #     <% end %>
-      #     <%= render(Primer::Alpha::Layout.new( mt: 5)) do |c| %>
-      #       <% c.with_main(border: true) { "Main" } %>
-      #       <% c.with_sidebar(col_placement: :end, border: true) { "Sidebar" } %>
+      #     <%= render(Primer::Alpha::Layout.new( mt: 5)) do |component| %>
+      #       <% component.with_main(border: true) { "Main" } %>
+      #       <% component.with_sidebar(col_placement: :end, border: true) { "Sidebar" } %>
       #     <% end %>
       #
       # @example Sidebar placement as row
@@ -164,17 +164,17 @@ module Primer
       #     landing page to interact with the local navigation.
       #
       #   @code
-      #     <%= render(Primer::Alpha::Layout.new) do |c| %>
-      #       <% c.with_main(border: true) { "Main" } %>
-      #       <% c.with_sidebar(row_placement: :start, border: true) { "Sidebar" } %>
+      #     <%= render(Primer::Alpha::Layout.new) do |component| %>
+      #       <% component.with_main(border: true) { "Main" } %>
+      #       <% component.with_sidebar(row_placement: :start, border: true) { "Sidebar" } %>
       #     <% end %>
-      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
-      #       <% c.with_main(border: true) { "Main" } %>
-      #       <% c.with_sidebar(row_placement: :end, border: true) { "Sidebar" } %>
+      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
+      #       <% component.with_main(border: true) { "Main" } %>
+      #       <% component.with_sidebar(row_placement: :end, border: true) { "Sidebar" } %>
       #     <% end %>
-      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
-      #       <% c.with_main(border: true) { "Main" } %>
-      #       <% c.with_sidebar(row_placement: :none, border: true) { "Sidebar" } %>
+      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
+      #       <% component.with_main(border: true) { "Main" } %>
+      #       <% component.with_sidebar(row_placement: :none, border: true) { "Sidebar" } %>
       #     <% end %>
       #
       # @example Changing when to render `Layout` as columns
@@ -184,17 +184,17 @@ module Primer
       #     Any screen size before this breakpoint will render the `Layout` in stacked rows.
       #
       #   @code
-      #     <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :sm)) do |c| %>
-      #       <% c.with_main(border: true) { "Main" } %>
-      #       <% c.with_sidebar(border: true) { "Sidebar" } %>
+      #     <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :sm)) do |component| %>
+      #       <% component.with_main(border: true) { "Main" } %>
+      #       <% component.with_sidebar(border: true) { "Sidebar" } %>
       #     <% end %>
-      #     <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :md, mt: 5)) do |c| %>
-      #       <% c.with_main(border: true) { "Main" } %>
-      #       <% c.with_sidebar(border: true) { "Sidebar" } %>
+      #     <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :md, mt: 5)) do |component| %>
+      #       <% component.with_main(border: true) { "Main" } %>
+      #       <% component.with_sidebar(border: true) { "Sidebar" } %>
       #     <% end %>
-      #     <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :lg, mt: 5)) do |c| %>
-      #       <% c.with_main(border: true) { "Main" } %>
-      #       <% c.with_sidebar(border: true) { "Sidebar" } %>
+      #     <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :lg, mt: 5)) do |component| %>
+      #       <% component.with_main(border: true) { "Main" } %>
+      #       <% component.with_sidebar(border: true) { "Sidebar" } %>
       #     <% end %>
       #
       # @param stacking_breakpoint [Symbol] When the `Layout` should change from rows into columns. <%= one_of(Primer::Alpha::Layout::STACKING_BREAKPOINT_OPTIONS) %>

data/app/components/primer/alpha/menu.css

@@ -1 +1 @@
-.menu{background-color:var(--color-canvas-default);border:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);border-radius:var(--primer-borderRadius-medium,6px);list-style:none;margin-bottom:var(--primer-stack-gap-normal,16px)}.menu-item{border-bottom:var(--primer-borderWidth-thin,1px) solid var(--color-border-muted);color:var(--color-fg-default);display:block;padding:var(--primer-control-medium-paddingInline-condensed,8px) var(--primer-control-medium-paddingInline-spacious,16px);position:relative}.menu-item:first-child{border-top:0;border-top-right-radius:var(--primer-borderRadius-medium,6px)}.menu-item:first-child,.menu-item:first-child:before{border-top-left-radius:var(--primer-borderRadius-medium,6px)}.menu-item:last-child{border-bottom:0;border-bottom-right-radius:var(--primer-borderRadius-medium,6px)}.menu-item:last-child,.menu-item:last-child:before{border-bottom-left-radius:var(--primer-borderRadius-medium,6px)}.menu-item:hover{background-color:var(--color-neutral-subtle);text-decoration:none}.menu-item:active{background-color:var(--color-canvas-subtle)}.menu-item.selected,.menu-item[aria-current]:not([aria-current=false]),.menu-item[aria-selected=true]{background-color:var(--color-menu-bg-active);cursor:default}:is(.menu-item.selected,.menu-item[aria-selected=true],.menu-item[aria-current]:not([aria-current=false])):before{background-color:var(--color-primer-border-active);bottom:0;content:"";left:0;position:absolute;top:0;width:2px}.menu-item .octicon{color:var(--color-fg-muted);margin-right:var(--primer-control-medium-gap,8px);text-align:center;width:16px}.menu-item .Counter{float:right;margin-left:var(--primer-control-small-gap,4px)}.menu-item .menu-warning{color:var(--color-attention-fg);float:right}.menu-item .avatar{float:left;margin-right:var(--primer-control-small-gap,4px)}.menu-item.alert .Counter{color:var(--color-danger-fg)}.menu-heading{border-bottom:var(--primer-borderWidth-thin,1px) solid var(--color-border-muted);color:var(--color-fg-default);display:block;font-size:inherit;font-weight:var(--base-text-weight-semibold,600);margin-bottom:0;margin-top:0;padding:var(--primer-control-medium-paddingInline-condensed,8px) var(--primer-control-medium-paddingInline-spacious,16px)}.menu-heading:hover{text-decoration:none}.menu-heading:first-child{border-top-left-radius:var(--primer-borderRadius-medium,6px);border-top-right-radius:var(--primer-borderRadius-medium,6px)}.menu-heading:last-child{border-bottom:0;border-bottom-left-radius:var(--primer-borderRadius-medium,6px);border-bottom-right-radius:var(--primer-borderRadius-medium,6px)}
+.menu{background-color:var(--color-canvas-default);border:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);border-radius:var(--primer-borderRadius-medium,6px);list-style:none;margin-bottom:var(--primer-stack-gap-normal,16px)}.menu-item{border-bottom:var(--primer-borderWidth-thin,1px) solid var(--color-border-muted);color:var(--color-fg-default);display:block;padding:var(--primer-control-medium-paddingInline-condensed,8px) var(--primer-control-medium-paddingInline-spacious,16px);position:relative}.menu-item:first-child{border-top:0;border-top-right-radius:var(--primer-borderRadius-medium,6px)}.menu-item:first-child,.menu-item:first-child:before{border-top-left-radius:var(--primer-borderRadius-medium,6px)}.menu-item:last-child{border-bottom:0;border-bottom-right-radius:var(--primer-borderRadius-medium,6px)}.menu-item:last-child,.menu-item:last-child:before{border-bottom-left-radius:var(--primer-borderRadius-medium,6px)}.menu-item:hover{background-color:var(--color-neutral-subtle);text-decoration:none}.menu-item:active{background-color:var(--color-canvas-subtle)}.menu-item.selected,.menu-item[aria-current]:not([aria-current=false]),.menu-item[aria-selected=true]{background-color:var(--color-menu-bg-active);cursor:default}.menu-item.selected:before,.menu-item[aria-current]:not([aria-current=false]):before,.menu-item[aria-selected=true]:before{background-color:var(--color-primer-border-active);bottom:0;content:"";left:0;position:absolute;top:0;width:2px}.menu-item .octicon{color:var(--color-fg-muted);margin-right:var(--primer-control-medium-gap,8px);text-align:center;width:16px}.menu-item .Counter{float:right;margin-left:var(--primer-control-small-gap,4px)}.menu-item .menu-warning{color:var(--color-attention-fg);float:right}.menu-item .avatar{float:left;margin-right:var(--primer-control-small-gap,4px)}.menu-item.alert .Counter{color:var(--color-danger-fg)}.menu-heading{border-bottom:var(--primer-borderWidth-thin,1px) solid var(--color-border-muted);color:var(--color-fg-default);display:block;font-size:inherit;font-weight:var(--base-text-weight-semibold,600);margin-bottom:0;margin-top:0;padding:var(--primer-control-medium-paddingInline-condensed,8px) var(--primer-control-medium-paddingInline-spacious,16px)}.menu-heading:hover{text-decoration:none}.menu-heading:first-child{border-top-left-radius:var(--primer-borderRadius-medium,6px);border-top-right-radius:var(--primer-borderRadius-medium,6px)}.menu-heading:last-child{border-bottom:0;border-bottom-left-radius:var(--primer-borderRadius-medium,6px);border-bottom-right-radius:var(--primer-borderRadius-medium,6px)}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["menu.pcss"],"names":[],"mappings":"AAIA,MAGE,4CAA6C,CAC7C,2EAA6E,CAC7E,mDAAqD,CAHrD,eAAgB,CADhB,iDAKF,CAEA,WAKE,gFAAkF,CADlF,6BAA8B,CAF9B,aAAc,CACd,yHAA4H,CAF5H,iBA+EF,CAzEE,uBACE,YAAa,CAEb,6DAKF,CAHE,qDAHA,4DAKA,CAGF,sBACE,eAAgB,CAChB,gEAMF,CAHE,mDAFA,+DAIA,CAGF,iBAEE,4CAA6C,CAD7C,oBAEF,CAEA,kBACE,2CACF,CAEA,sGAIE,4CAA6C,CAD7C,cAYF,CATE,kHAOE,kDAAmD,CAJnD,QAAS,CAGT,UAAW,CAFX,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAGN,SAGF,CAGF,oBAGE,2BAA4B,CAD5B,iDAAmD,CAEnD,iBAAkB,CAHlB,UAIF,CAEA,oBACE,WAAY,CACZ,+CACF,CAEA,yBAEE,+BAAgC,CADhC,WAEF,CAEA,mBACE,UAAW,CACX,gDACF,CAGE,0BACE,4BACF,CAIJ,cAQE,gFAAkF,CADlF,6BAA8B,CAN9B,aAAc,CAId,iBAAkB,CAClB,gDAAkD,CAFlD,eAAgB,CADhB,YAAa,CADb,yHAsBF,CAdE,oBACE,oBACF,CAEA,0BACE,4DAA8D,CAC9D,6DACF,CAEA,yBACE,eAAgB,CAEhB,+DAAiE,CADjE,gEAEF","file":"menu.css","sourcesContent":["/* menu */\n\n/* A menu on the side of a page, defaults to left side. e.g. github.com/about */\n\n.menu {\n  margin-bottom: var(--primer-stack-gap-normal, 16px);\n  list-style: none;\n  background-color: var(--color-canvas-default);\n  border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n  border-radius: var(--primer-borderRadius-medium, 6px);\n}\n\n.menu-item {\n  position: relative;\n  display: block;\n  padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);\n  color: var(--color-fg-default);\n  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);\n\n  &:first-child {\n    border-top: 0;\n    border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n    border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n\n    &::before {\n      border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n    }\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n\n    &::before {\n      border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n    }\n  }\n\n  &:hover {\n    text-decoration: none;\n    background-color: var(--color-neutral-subtle);\n  }\n\n  &:active {\n    background-color: var(--color-canvas-subtle);\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    cursor: default;\n    background-color: var(--color-menu-bg-active);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      width: 2px;\n      content: '';\n      background-color: var(--color-primer-border-active);\n    }\n  }\n\n  & .octicon {\n    width: 16px;\n    margin-right: var(--primer-control-medium-gap, 8px);\n    color: var(--color-fg-muted);\n    text-align: center;\n  }\n\n  & .Counter {\n    float: right;\n    margin-left: var(--primer-control-small-gap, 4px);\n  }\n\n  & .menu-warning {\n    float: right;\n    color: var(--color-attention-fg);\n  }\n\n  & .avatar {\n    float: left;\n    margin-right: var(--primer-control-small-gap, 4px);\n  }\n\n  &.alert {\n    & .Counter {\n      color: var(--color-danger-fg);\n    }\n  }\n}\n\n.menu-heading {\n  display: block;\n  padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: inherit;\n  font-weight: var(--base-text-weight-semibold, 600);\n  color: var(--color-fg-default);\n  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:first-child {\n    border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n    border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n  }\n}\n"]}
+{"version":3,"sources":["menu.pcss"],"names":[],"mappings":"AAIA,MAGE,4CAA6C,CAC7C,2EAA6E,CAC7E,mDAAqD,CAHrD,eAAgB,CADhB,iDAKF,CAEA,WAKE,gFAAkF,CADlF,6BAA8B,CAF9B,aAAc,CACd,yHAA4H,CAF5H,iBA+EF,CAzEE,uBACE,YAAa,CAEb,6DAKF,CAHE,qDAHA,4DAKA,CAGF,sBACE,eAAgB,CAChB,gEAMF,CAHE,mDAFA,+DAIA,CAGF,iBAEE,4CAA6C,CAD7C,oBAEF,CAEA,kBACE,2CACF,CAEA,sGAIE,4CAA6C,CAD7C,cAYF,CATE,2HAOE,kDAAmD,CAJnD,QAAS,CAGT,UAAW,CAFX,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAGN,SAGF,CAGF,oBAGE,2BAA4B,CAD5B,iDAAmD,CAEnD,iBAAkB,CAHlB,UAIF,CAEA,oBACE,WAAY,CACZ,+CACF,CAEA,yBAEE,+BAAgC,CADhC,WAEF,CAEA,mBACE,UAAW,CACX,gDACF,CAGE,0BACE,4BACF,CAIJ,cAQE,gFAAkF,CADlF,6BAA8B,CAN9B,aAAc,CAId,iBAAkB,CAClB,gDAAkD,CAFlD,eAAgB,CADhB,YAAa,CADb,yHAsBF,CAdE,oBACE,oBACF,CAEA,0BACE,4DAA8D,CAC9D,6DACF,CAEA,yBACE,eAAgB,CAEhB,+DAAiE,CADjE,gEAEF","file":"menu.css","sourcesContent":["/* menu */\n\n/* A menu on the side of a page, defaults to left side. e.g. github.com/about */\n\n.menu {\n  margin-bottom: var(--primer-stack-gap-normal, 16px);\n  list-style: none;\n  background-color: var(--color-canvas-default);\n  border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n  border-radius: var(--primer-borderRadius-medium, 6px);\n}\n\n.menu-item {\n  position: relative;\n  display: block;\n  padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);\n  color: var(--color-fg-default);\n  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);\n\n  &:first-child {\n    border-top: 0;\n    border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n    border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n\n    &::before {\n      border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n    }\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n\n    &::before {\n      border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n    }\n  }\n\n  &:hover {\n    text-decoration: none;\n    background-color: var(--color-neutral-subtle);\n  }\n\n  &:active {\n    background-color: var(--color-canvas-subtle);\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    cursor: default;\n    background-color: var(--color-menu-bg-active);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      width: 2px;\n      content: '';\n      background-color: var(--color-primer-border-active);\n    }\n  }\n\n  & .octicon {\n    width: 16px;\n    margin-right: var(--primer-control-medium-gap, 8px);\n    color: var(--color-fg-muted);\n    text-align: center;\n  }\n\n  & .Counter {\n    float: right;\n    margin-left: var(--primer-control-small-gap, 4px);\n  }\n\n  & .menu-warning {\n    float: right;\n    color: var(--color-attention-fg);\n  }\n\n  & .avatar {\n    float: left;\n    margin-right: var(--primer-control-small-gap, 4px);\n  }\n\n  &.alert {\n    & .Counter {\n      color: var(--color-danger-fg);\n    }\n  }\n}\n\n.menu-heading {\n  display: block;\n  padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: inherit;\n  font-weight: var(--base-text-weight-semibold, 600);\n  color: var(--color-fg-default);\n  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:first-child {\n    border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n    border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n  }\n}\n"]}

data/app/components/primer/alpha/menu.rb

@@ -40,18 +40,18 @@ module Primer
       }
 
       # @example Default
-      #   <%= render(Primer::Alpha::Menu.new) do |c| %>
-      #     <% c.with_heading(tag: :h2) do %>
+      #   <%= render(Primer::Alpha::Menu.new) do |component| %>
+      #     <% component.with_heading(tag: :h2) do %>
       #       Heading
       #     <% end %>
-      #     <% c.with_item(selected: true, href: "#url") do %>
+      #     <% component.with_item(selected: true, href: "#url") do %>
       #       Item 1
       #     <% end %>
-      #     <% c.with_item(href: "#url") do %>
+      #     <% component.with_item(href: "#url") do %>
       #       <%= render(Primer::Beta::Octicon.new("check")) %>
       #       With Icon
       #     <% end %>
-      #     <% c.with_item(href: "#url") do %>
+      #     <% component.with_item(href: "#url") do %>
       #       <%= render(Primer::Beta::Octicon.new("check")) %>
       #       With Icon and Counter
       #       <%= render(Primer::Beta::Counter.new(count: 25)) %>

data/app/components/primer/alpha/modal_dialog.js

@@ -21,9 +21,11 @@ const overlayStack = [];
 function clickHandler(event) {
     const target = event.target;
     const button = target === null || target === void 0 ? void 0 : target.closest('button');
+    if (!button)
+        return;
     // If the user is clicking a valid dialog trigger
     let dialogId = button === null || button === void 0 ? void 0 : button.getAttribute('data-show-dialog-id');
-    if (button && dialogId) {
+    if (dialogId) {
         event.stopPropagation();
         const dialog = document.getElementById(dialogId);
         if (dialog instanceof ModalDialogElement) {
@@ -36,17 +38,6 @@ function clickHandler(event) {
     const topLevelDialog = overlayStack[overlayStack.length - 1];
     if (!topLevelDialog)
         return;
-    // Check if the click happened outside the boundary of the top level dialog
-    const clickOutsideDialog = !target.closest(`#${topLevelDialog.getAttribute('id')}`);
-    // Only close dialog if it's a click outside the dialog and the dialog has a
-    // button?
-    if (!button) {
-        if (clickOutsideDialog) {
-            overlayStack.pop();
-            topLevelDialog.close();
-        }
-        return;
-    }
     dialogId = button.getAttribute('data-close-dialog-id');
     if (dialogId === topLevelDialog.id) {
         overlayStack.pop();
@@ -58,6 +49,26 @@ function clickHandler(event) {
         topLevelDialog.close(true);
     }
 }
+function mousedownHandler(event) {
+    const target = event.target;
+    if (target === null || target === void 0 ? void 0 : target.closest('button'))
+        return;
+    // Find the top level dialog that is open.
+    const topLevelDialog = overlayStack[overlayStack.length - 1];
+    if (!topLevelDialog)
+        return;
+    // Check if the mousedown happened outside the boundary of the top level dialog
+    const mouseDownOutsideDialog = !target.closest(`#${topLevelDialog.getAttribute('id')}`);
+    // Only close dialog if it's a click outside the dialog and the dialog has a button?
+    if (mouseDownOutsideDialog) {
+        target.ownerDocument.addEventListener('mouseup', (upEvent) => {
+            if (upEvent.target === target) {
+                overlayStack.pop();
+                topLevelDialog.close();
+            }
+        }, { once: true });
+    }
+}
 export class ModalDialogElement extends HTMLElement {
     constructor() {
         super(...arguments);
@@ -109,6 +120,7 @@ export class ModalDialogElement extends HTMLElement {
         if (!this.hasAttribute('role'))
             this.setAttribute('role', 'dialog');
         document.addEventListener('click', clickHandler);
+        document.addEventListener('mousedown', mousedownHandler);
         this.addEventListener('keydown', e => __classPrivateFieldGet(this, _ModalDialogElement_instances, "m", _ModalDialogElement_keydown).call(this, e));
     }
     show() {

data/app/components/primer/alpha/modal_dialog.ts

@@ -12,10 +12,11 @@ const overlayStack: ModalDialogElement[] = []
 function clickHandler(event: Event) {
   const target = event.target as HTMLElement
   const button = target?.closest('button')
+  if (!button) return
 
   // If the user is clicking a valid dialog trigger
   let dialogId = button?.getAttribute('data-show-dialog-id')
-  if (button && dialogId) {
+  if (dialogId) {
     event.stopPropagation()
     const dialog = document.getElementById(dialogId)
     if (dialog instanceof ModalDialogElement) {
@@ -24,24 +25,10 @@ function clickHandler(event: Event) {
       return
     }
   }
-
   // Find the top level dialog that is open.
   const topLevelDialog = overlayStack[overlayStack.length - 1]
   if (!topLevelDialog) return
 
-  // Check if the click happened outside the boundary of the top level dialog
-  const clickOutsideDialog = !target.closest(`#${topLevelDialog.getAttribute('id')}`)
-
-  // Only close dialog if it's a click outside the dialog and the dialog has a
-  // button?
-  if (!button) {
-    if (clickOutsideDialog) {
-      overlayStack.pop()
-      topLevelDialog.close()
-    }
-    return
-  }
-
   dialogId = button.getAttribute('data-close-dialog-id')
   if (dialogId === topLevelDialog.id) {
     overlayStack.pop()
@@ -55,6 +42,32 @@ function clickHandler(event: Event) {
   }
 }
 
+function mousedownHandler(event: Event) {
+  const target = event.target as HTMLElement
+  if (target?.closest('button')) return
+
+  // Find the top level dialog that is open.
+  const topLevelDialog = overlayStack[overlayStack.length - 1]
+  if (!topLevelDialog) return
+
+  // Check if the mousedown happened outside the boundary of the top level dialog
+  const mouseDownOutsideDialog = !target.closest(`#${topLevelDialog.getAttribute('id')}`)
+
+  // Only close dialog if it's a click outside the dialog and the dialog has a button?
+  if (mouseDownOutsideDialog) {
+    target.ownerDocument.addEventListener(
+      'mouseup',
+      (upEvent: Event) => {
+        if (upEvent.target === target) {
+          overlayStack.pop()
+          topLevelDialog.close()
+        }
+      },
+      {once: true}
+    )
+  }
+}
+
 export class ModalDialogElement extends HTMLElement {
   //TODO: Do we remove the abortController from focusTrap?
   #focusAbortController = new AbortController()
@@ -109,6 +122,7 @@ export class ModalDialogElement extends HTMLElement {
     if (!this.hasAttribute('role')) this.setAttribute('role', 'dialog')
 
     document.addEventListener('click', clickHandler)
+    document.addEventListener('mousedown', mousedownHandler)
 
     this.addEventListener('keydown', e => this.#keydown(e))
   }

data/app/components/primer/alpha/segmented_control.rb

@@ -26,39 +26,39 @@ module Primer
 
       # @example Basic usage
       #
-      #   <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |c| %>
-      #     <%= c.with_item(label: "Preview", selected: true) %>
-      #     <%= c.with_item(label: "Raw") %>
-      #     <%= c.with_item(label: "Blame") %>
+      #   <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |component| %>
+      #     <%= component.with_item(label: "Preview", selected: true) %>
+      #     <%= component.with_item(label: "Raw") %>
+      #     <%= component.with_item(label: "Blame") %>
       #   <% end %>
       #
       # @example Small
       #
-      #   <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :small)) do |c| %>
-      #     <%= c.with_item(label: "Preview", selected: true) %>
-      #     <%= c.with_item(label: "Raw") %>
-      #     <%= c.with_item(label: "Blame") %>
+      #   <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :small)) do |component| %>
+      #     <%= component.with_item(label: "Preview", selected: true) %>
+      #     <%= component.with_item(label: "Raw") %>
+      #     <%= component.with_item(label: "Blame") %>
       #   <% end %>
       #
       # @example With icons
-      #   <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |c| %>
-      #     <%= c.with_item(label: "Preview", icon: :eye, selected: true) %>
-      #     <%= c.with_item(label: "Raw", icon: :"file-code") %>
-      #     <%= c.with_item(label: "Blame", icon: :people) %>
+      #   <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |component| %>
+      #     <%= component.with_item(label: "Preview", icon: :eye, selected: true) %>
+      #     <%= component.with_item(label: "Raw", icon: :"file-code") %>
+      #     <%= component.with_item(label: "Blame", icon: :people) %>
       #   <% end %>
       #
       # @example With icons only
-      #   <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true)) do |c| %>
-      #     <%= c.with_item(label: "Preview", icon: :eye, selected: true) %>
-      #     <%= c.with_item(label: "Raw", icon: :"file-code") %>
-      #     <%= c.with_item(label: "Blame", icon: :people) %>
+      #   <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true)) do |component| %>
+      #     <%= component.with_item(label: "Preview", icon: :eye, selected: true) %>
+      #     <%= component.with_item(label: "Raw", icon: :"file-code") %>
+      #     <%= component.with_item(label: "Blame", icon: :people) %>
       #   <% end %>
       #
       # @example Fill width of parent
-      #   <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true)) do |c| %>
-      #     <%= c.with_item(label: "Preview", icon: :eye, selected: true) %>
-      #     <%= c.with_item(label: "Raw", icon: :"file-code") %>
-      #     <%= c.with_item(label: "Blame", icon: :people) %>
+      #   <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true)) do |component| %>
+      #     <%= component.with_item(label: "Preview", icon: :eye, selected: true) %>
+      #     <%= component.with_item(label: "Raw", icon: :"file-code") %>
+      #     <%= component.with_item(label: "Blame", icon: :people) %>
       #   <% end %>
       #
       # @param hide_labels [Boolean] Whether to hide the labels and only show the icons

data/app/components/primer/alpha/tab_container.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `TabContainer` to create tabbed content with keyboard support. This component does not add any styles.
+    # It only provides the tab functionality. If you want styled Tabs you can look at <%= link_to_component(Primer::Alpha::TabNav) %>.
+    #
+    # This component requires javascript.
+    class TabContainer < Primer::Component
+      # @example Default
+      #   <%= render(Primer::Alpha::TabContainer.new)  do %>
+      #     <div role="tablist">
+      #       <button type="button" role="tab" aria-selected="true">Tab one</button>
+      #       <button type="button" role="tab" tabindex="-1">Tab two</button>
+      #       <button type="button" role="tab" tabindex="-1">Tab three</button>
+      #     </div>
+      #     <div role="tabpanel">
+      #       Panel 1
+      #     </div>
+      #     <div role="tabpanel" hidden>
+      #       Panel 2
+      #     </div>
+      #     <div role="tabpanel" hidden>
+      #       Panel 3
+      #     </div>
+      #   <% end %>
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = "tab-container"
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) { content }
+      end
+
+      def render?
+        content.present?
+      end
+    end
+  end
+end

data/app/components/primer/alpha/tab_nav.css

@@ -1 +1 @@
-.tabnav{border-bottom:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);margin-bottom:var(--primer-stack-gap-normal,16px);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--primer-borderWidth-thin, 1px)*-1);overflow:auto}.tabnav-tab{background-color:initial;border:var(--primer-borderWidth-thin,1px) solid #0000;border-bottom:0;color:var(--color-fg-muted);display:inline-block;flex-shrink:0;font-size:var(--primer-text-body-size-medium,14px);line-height:23px;padding:var(--base-size-8,8px) var(--primer-control-medium-paddingInline-spacious,16px);text-decoration:none;transition:color .2s cubic-bezier(.3,0,.5,1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--color-canvas-default);border-color:var(--color-border-default);border-radius:var(--primer-borderRadius-medium,6px) var(--primer-borderRadius-medium,6px) 0 0;color:var(--color-fg-default)}:is(.tabnav-tab.selected,.tabnav-tab[aria-selected=true],.tabnav-tab[aria-current]:not([aria-current=false])) .octicon{color:inherit}.tabnav-tab:hover{color:var(--color-fg-default);text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--primer-borderRadius-medium,6px) var(--primer-borderRadius-medium,6px) 0 0!important}.tabnav-tab:focus,.tabnav-tab:focus-visible{outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--color-fg-muted)}.tabnav-tab .octicon{margin-right:var(--primer-control-small-gap,4px)}.tabnav-tab .Counter{color:inherit;margin-left:var(--primer-control-small-gap,4px)}.tabnav-extra{color:var(--color-fg-muted);display:inline-block;font-size:var(--primer-text-body-size-small,12px);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:2px}a.tabnav-extra:hover{color:var(--color-accent-fg);text-decoration:none}.tabnav-btn{margin-left:var(--primer-controlStack-medium-gap-condensed,8px)}
+.tabnav{border-bottom:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);margin-bottom:var(--primer-stack-gap-normal,16px);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--primer-borderWidth-thin, 1px)*-1);overflow:auto}.tabnav-tab{background-color:initial;border:var(--primer-borderWidth-thin,1px) solid #0000;border-bottom:0;color:var(--color-fg-muted);display:inline-block;flex-shrink:0;font-size:var(--primer-text-body-size-medium,14px);line-height:23px;padding:var(--base-size-8,8px) var(--primer-control-medium-paddingInline-spacious,16px);text-decoration:none;transition:color .2s cubic-bezier(.3,0,.5,1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--color-canvas-default);border-color:var(--color-border-default);border-radius:var(--primer-borderRadius-medium,6px) var(--primer-borderRadius-medium,6px) 0 0;color:var(--color-fg-default)}.tabnav-tab.selected .octicon,.tabnav-tab[aria-current]:not([aria-current=false]) .octicon,.tabnav-tab[aria-selected=true] .octicon{color:inherit}.tabnav-tab:hover{color:var(--color-fg-default);text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--primer-borderRadius-medium,6px) var(--primer-borderRadius-medium,6px) 0 0!important}.tabnav-tab:focus,.tabnav-tab:focus-visible{outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--color-fg-muted)}.tabnav-tab .octicon{margin-right:var(--primer-control-small-gap,4px)}.tabnav-tab .Counter{color:inherit;margin-left:var(--primer-control-small-gap,4px)}.tabnav-extra{color:var(--color-fg-muted);display:inline-block;font-size:var(--primer-text-body-size-small,12px);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:2px}a.tabnav-extra:hover{color:var(--color-accent-fg);text-decoration:none}.tabnav-btn{margin-left:var(--primer-controlStack-medium-gap-condensed,8px)}

data/app/components/primer/alpha/tab_nav.css.json

@@ -1 +1 @@
-{"name":"alpha/tab_nav","selectors":[".tabnav",".tabnav-tabs",".tabnav-tab",".tabnav-tab.selected",".tabnav-tab[aria-current]:not([aria-current=false])",".tabnav-tab[aria-selected=true]",":is(.tabnav-tab.selected",".tabnav-tab[aria-current]:not([aria-current=false])) .octicon",".tabnav-tab:hover",".tabnav-tab:focus",".tabnav-tab:focus-visible",".tabnav-tab .octicon",".tabnav-tab:active",".tabnav-tab .Counter",".tabnav-extra",".tabnav-extra>.octicon","a.tabnav-extra:hover",".tabnav-btn"]}
+{"name":"alpha/tab_nav","selectors":[".tabnav",".tabnav-tabs",".tabnav-tab",".tabnav-tab.selected",".tabnav-tab[aria-current]:not([aria-current=false])",".tabnav-tab[aria-selected=true]",".tabnav-tab.selected .octicon",".tabnav-tab[aria-current]:not([aria-current=false]) .octicon",".tabnav-tab[aria-selected=true] .octicon",".tabnav-tab:hover",".tabnav-tab:focus",".tabnav-tab:focus-visible",".tabnav-tab .octicon",".tabnav-tab:active",".tabnav-tab .Counter",".tabnav-extra",".tabnav-extra>.octicon","a.tabnav-extra:hover",".tabnav-btn"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["tab_nav.pcss"],"names":[],"mappings":"AAGA,QAGE,kFAAoF,CADpF,iDAAmD,CADnD,YAGF,CAEA,aACE,YAAa,CACb,0DAA6D,CAC7D,aACF,CAEA,YAQE,wBAA6B,CAE7B,qDAAgB,CAAhB,eAAgB,CAJhB,2BAA4B,CAL5B,oBAAqB,CACrB,aAAc,CAEd,kDAAoD,CACpD,gBAAiB,CAFjB,uFAA0F,CAI1F,oBAAqB,CAIrB,4CAwCF,CAtCE,yGAIE,4CAA6C,CAC7C,wCAAyC,CACzC,6FAAgG,CAHhG,6BAQF,CAHE,uHACE,aACF,CAGF,kBACE,6BAA8B,CAC9B,oBAAqB,CACrB,uBACF,CAEA,4CAEE,uGAEF,CAJA,4CAGE,mBACF,CAMA,wCAHE,2BAMF,CAHA,qBACE,gDAEF,CAEA,qBAEE,aAAc,CADd,+CAEF,CAQF,cAKE,2BAA4B,CAJ5B,oBAAqB,CAGrB,iDAAmD,CADnD,gBAAiB,CADjB,gBAQF,CAHE,uBACE,gBACF,CAKF,qBACE,4BAA6B,CAC7B,oBACF,CAOA,YACE,+DACF","file":"tab_nav.css","sourcesContent":["/* tabnav */\n\n/* Outer wrapper */\n.tabnav {\n  margin-top: 0;\n  margin-bottom: var(--primer-stack-gap-normal, 16px);\n  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n}\n\n.tabnav-tabs {\n  display: flex;\n  margin-bottom: calc(var(--primer-borderWidth-thin, 1px) * -1);\n  overflow: auto;\n}\n\n.tabnav-tab {\n  display: inline-block;\n  flex-shrink: 0;\n  padding: var(--base-size-8, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);\n  font-size: var(--primer-text-body-size-medium, 14px);\n  line-height: 23px;\n  color: var(--color-fg-muted);\n  text-decoration: none;\n  background-color: transparent;\n  border: var(--primer-borderWidth-thin, 1px) solid transparent;\n  border-bottom: 0;\n  transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n\n  &.selected,\n  &[aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    color: var(--color-fg-default);\n    background-color: var(--color-canvas-default); /* cover bottom border */\n    border-color: var(--color-border-default);\n    border-radius: var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px) 0 0;\n\n    & .octicon {\n      color: inherit;\n    }\n  }\n\n  &:hover {\n    color: var(--color-fg-default);\n    text-decoration: none;\n    transition-duration: 0.1s;\n  }\n\n  &:focus,\n  &:focus-visible {\n    border-radius: var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px) 0 0 !important;\n    outline-offset: -6px;\n  }\n\n  &:active {\n    color: var(--color-fg-muted);\n  }\n\n  & .octicon {\n    margin-right: var(--primer-control-small-gap, 4px);\n    color: var(--color-fg-muted);\n  }\n\n  & .Counter {\n    margin-left: var(--primer-control-small-gap, 4px);\n    color: inherit;\n  }\n}\n\n/* Tabnav extras\n**\n** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're\n** inline text or links. */\n\n.tabnav-extra {\n  display: inline-block;\n  padding-top: 10px;\n  margin-left: 10px;\n  font-size: var(--primer-text-body-size-small, 12px);\n  color: var(--color-fg-muted);\n\n  & > .octicon {\n    margin-right: 2px;\n  }\n}\n\n/* When tabnav-extra are anchors\n** stylelint-disable-next-line selector-no-qualifying-type */\na.tabnav-extra:hover {\n  color: var(--color-accent-fg);\n  text-decoration: none;\n}\n\n/* Tabnav buttons\n**\n** For when there are multiple buttons, space them out appropriately. Requires\n** the buttons to be floated or inline-block. */\n\n.tabnav-btn {\n  margin-left: var(--primer-controlStack-medium-gap-condensed, 8px);\n}\n"]}
+{"version":3,"sources":["tab_nav.pcss"],"names":[],"mappings":"AAGA,QAGE,kFAAoF,CADpF,iDAAmD,CADnD,YAGF,CAEA,aACE,YAAa,CACb,0DAA6D,CAC7D,aACF,CAEA,YAQE,wBAA6B,CAE7B,qDAAgB,CAAhB,eAAgB,CAJhB,2BAA4B,CAL5B,oBAAqB,CACrB,aAAc,CAEd,kDAAoD,CACpD,gBAAiB,CAFjB,uFAA0F,CAI1F,oBAAqB,CAIrB,4CAwCF,CAtCE,yGAIE,4CAA6C,CAC7C,wCAAyC,CACzC,6FAAgG,CAHhG,6BAQF,CAHE,oIACE,aACF,CAGF,kBACE,6BAA8B,CAC9B,oBAAqB,CACrB,uBACF,CAEA,4CAEE,uGAEF,CAJA,4CAGE,mBACF,CAMA,wCAHE,2BAMF,CAHA,qBACE,gDAEF,CAEA,qBAEE,aAAc,CADd,+CAEF,CAQF,cAKE,2BAA4B,CAJ5B,oBAAqB,CAGrB,iDAAmD,CADnD,gBAAiB,CADjB,gBAQF,CAHE,uBACE,gBACF,CAKF,qBACE,4BAA6B,CAC7B,oBACF,CAOA,YACE,+DACF","file":"tab_nav.css","sourcesContent":["/* tabnav */\n\n/* Outer wrapper */\n.tabnav {\n  margin-top: 0;\n  margin-bottom: var(--primer-stack-gap-normal, 16px);\n  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n}\n\n.tabnav-tabs {\n  display: flex;\n  margin-bottom: calc(var(--primer-borderWidth-thin, 1px) * -1);\n  overflow: auto;\n}\n\n.tabnav-tab {\n  display: inline-block;\n  flex-shrink: 0;\n  padding: var(--base-size-8, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);\n  font-size: var(--primer-text-body-size-medium, 14px);\n  line-height: 23px;\n  color: var(--color-fg-muted);\n  text-decoration: none;\n  background-color: transparent;\n  border: var(--primer-borderWidth-thin, 1px) solid transparent;\n  border-bottom: 0;\n  transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n\n  &.selected,\n  &[aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    color: var(--color-fg-default);\n    background-color: var(--color-canvas-default); /* cover bottom border */\n    border-color: var(--color-border-default);\n    border-radius: var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px) 0 0;\n\n    & .octicon {\n      color: inherit;\n    }\n  }\n\n  &:hover {\n    color: var(--color-fg-default);\n    text-decoration: none;\n    transition-duration: 0.1s;\n  }\n\n  &:focus,\n  &:focus-visible {\n    border-radius: var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px) 0 0 !important;\n    outline-offset: -6px;\n  }\n\n  &:active {\n    color: var(--color-fg-muted);\n  }\n\n  & .octicon {\n    margin-right: var(--primer-control-small-gap, 4px);\n    color: var(--color-fg-muted);\n  }\n\n  & .Counter {\n    margin-left: var(--primer-control-small-gap, 4px);\n    color: inherit;\n  }\n}\n\n/* Tabnav extras\n**\n** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're\n** inline text or links. */\n\n.tabnav-extra {\n  display: inline-block;\n  padding-top: 10px;\n  margin-left: 10px;\n  font-size: var(--primer-text-body-size-small, 12px);\n  color: var(--color-fg-muted);\n\n  & > .octicon {\n    margin-right: 2px;\n  }\n}\n\n/* When tabnav-extra are anchors\n** stylelint-disable-next-line selector-no-qualifying-type */\na.tabnav-extra:hover {\n  color: var(--color-accent-fg);\n  text-decoration: none;\n}\n\n/* Tabnav buttons\n**\n** For when there are multiple buttons, space them out appropriately. Requires\n** the buttons to be floated or inline-block. */\n\n.tabnav-btn {\n  margin-left: var(--primer-controlStack-medium-gap-condensed, 8px);\n}\n"]}

data/app/components/primer/alpha/tab_nav.rb

@@ -48,52 +48,52 @@ module Primer
       #   @description
       #     `<nav>` is a landmark and should be reserved for main navigation links. See <%= link_to_accessibility %>.
       #   @code
-      #     <%= render(Primer::Alpha::TabNav.new(label: "Default")) do |c| %>
-      #       <% c.with_tab(selected: true, href: "#") { "Tab 1" } %>
-      #       <% c.with_tab(href: "#") { "Tab 2" } %>
-      #       <% c.with_tab(href: "#") { "Tab 3" } %>
+      #     <%= render(Primer::Alpha::TabNav.new(label: "Default")) do |component| %>
+      #       <% component.with_tab(selected: true, href: "#") { "Tab 1" } %>
+      #       <% component.with_tab(href: "#") { "Tab 2" } %>
+      #       <% component.with_tab(href: "#") { "Tab 3" } %>
       #     <% end %>
       #
       # @example Default with `<div>`
-      #   <%= render(Primer::Alpha::TabNav.new(label: "Default")) do |c| %>
-      #     <% c.with_tab(selected: true, href: "#") { "Tab 1" } %>
-      #     <% c.with_tab(href: "#") { "Tab 2" } %>
-      #     <% c.with_tab(href: "#") { "Tab 3" } %>
+      #   <%= render(Primer::Alpha::TabNav.new(label: "Default")) do |component| %>
+      #     <% component.with_tab(selected: true, href: "#") { "Tab 1" } %>
+      #     <% component.with_tab(href: "#") { "Tab 2" } %>
+      #     <% component.with_tab(href: "#") { "Tab 3" } %>
       #   <% end %>
       #
       # @example With icons and counters
       #   <%= render(Primer::Alpha::TabNav.new(label: "With icons and counters")) do |component| %>
-      #     <% component.with_tab(href: "#", selected: true) do |t| %>
-      #       <% t.icon(icon: :star) %>
-      #       <% t.text { "Item 1" } %>
+      #     <% component.with_tab(href: "#", selected: true) do |tab| %>
+      #       <% tab.with_icon(icon: :star) %>
+      #       <% tab.with_text { "Item 1" } %>
       #     <% end %>
-      #     <% component.with_tab(href: "#") do |t| %>
-      #       <% t.icon(icon: :star) %>
-      #       <% t.text { "Item 2" } %>
-      #       <% t.counter(count: 10) %>
+      #     <% component.with_tab(href: "#") do |tab| %>
+      #       <% tab.with_icon(icon: :star) %>
+      #       <% tab.with_text { "Item 2" } %>
+      #       <% tab.with_counter(count: 10) %>
       #     <% end %>
-      #     <% component.with_tab(href: "#") do |t| %>
-      #       <% t.text { "Item 3" } %>
-      #       <% t.counter(count: 10) %>
+      #     <% component.with_tab(href: "#") do |tab| %>
+      #       <% tab.with_text { "Item 3" } %>
+      #       <% tab.with_counter(count: 10) %>
       #     <% end %>
       #   <% end %>
       #
       # @example With extra content
-      #   <%= render(Primer::Alpha::TabNav.new(label: "With extra content")) do |c| %>
-      #     <% c.with_tab(selected: true, href: "#") { "Tab 1" }%>
-      #     <% c.with_tab(href: "#") { "Tab 2" } %>
-      #     <% c.with_tab(href: "#") { "Tab 3" } %>
-      #     <% c.with_extra do %>
+      #   <%= render(Primer::Alpha::TabNav.new(label: "With extra content")) do |component| %>
+      #     <% component.with_tab(selected: true, href: "#") { "Tab 1" }%>
+      #     <% component.with_tab(href: "#") { "Tab 2" } %>
+      #     <% component.with_tab(href: "#") { "Tab 3" } %>
+      #     <% component.with_extra do %>
       #       <%= render(Primer::ButtonComponent.new(float: :right)) { "Button" } %>
       #     <% end %>
       #   <% end %>
       #
       # @example Adding extra content after the tabs
-      #   <%= render(Primer::Alpha::TabNav.new(label: "Adding extra content after the tabs", display: :flex, body_arguments: { flex: 1 })) do |c| %>
-      #     <% c.with_tab(selected: true, href: "#") { "Tab 1" }%>
-      #     <% c.with_tab(href: "#") { "Tab 2" } %>
-      #     <% c.with_tab(href: "#") { "Tab 3" } %>
-      #     <% c.with_extra(align: :right) do %>
+      #   <%= render(Primer::Alpha::TabNav.new(label: "Adding extra content after the tabs", display: :flex, body_arguments: { flex: 1 })) do |component| %>
+      #     <% component.with_tab(selected: true, href: "#") { "Tab 1" }%>
+      #     <% component.with_tab(href: "#") { "Tab 2" } %>
+      #     <% component.with_tab(href: "#") { "Tab 3" } %>
+      #     <% component.with_extra(align: :right) do %>
       #       <div>
       #         <%= render(Primer::ButtonComponent.new) { "Button" } %>
       #       </div>
@@ -101,10 +101,10 @@ module Primer
       #   <% end %>
       #
       # @example Customizing the body
-      #   <%= render(Primer::Alpha::TabNav.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :accent_emphasis })) do |c| %>
-      #     <% c.with_tab(selected: true, href: "#") { "Tab 1" }%>
-      #     <% c.with_tab(href: "#") { "Tab 2" } %>
-      #     <% c.with_tab(href: "#") { "Tab 3" } %>
+      #   <%= render(Primer::Alpha::TabNav.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :accent_emphasis })) do |component| %>
+      #     <% component.with_tab(selected: true, href: "#") { "Tab 1" }%>
+      #     <% component.with_tab(href: "#") { "Tab 2" } %>
+      #     <% component.with_tab(href: "#") { "Tab 3" } %>
       #   <% end %>
       #
       # @param tag [Symbol] <%= one_of(Primer::Alpha::TabNav::TAG_OPTIONS) %>

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

@@ -191,13 +191,9 @@ class ToolTipElement extends HTMLElement {
         __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateDirection).call(this);
         if (!this.shadowRoot) {
             const shadow = this.attachShadow({ mode: 'open' });
-            // eslint-disable-next-line github/no-inner-html
-            shadow.innerHTML = `
-        <style>
-          ${this.styles()}
-        </style>
-        <slot></slot>
-      `;
+            const style = shadow.appendChild(document.createElement('style'));
+            style.textContent = this.styles();
+            shadow.appendChild(document.createElement('slot'));
         }
         this.hiddenFromView = true;
         __classPrivateFieldSet(this, _ToolTipElement_allowUpdatePosition, true, "f");