primer_view_components 0.49.0 → 0.51.0

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

@@ -165,6 +165,6 @@ __decorate([
     target
 ], ActionBarElement.prototype, "moreMenu", void 0);
 ActionBarElement = __decorate([
-    controller
+    controller('action-bar')
 ], ActionBarElement);
 window.ActionBarElement = ActionBarElement;

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

@@ -27,7 +27,7 @@ enum ItemType {
   Divider,
 }
 
-@controller
+@controller('action-bar')
 class ActionBarElement extends HTMLElement {
   @targets items: HTMLElement[]
   @target itemContainer: HTMLElement

data/app/components/primer/alpha/action_list/item.rb

@@ -302,7 +302,8 @@ module Primer
           if @list.allows_selection?
             @content_arguments[:aria] = merge_aria(
               @content_arguments,
-              { aria: @list.aria_selection_variant == :selected ? { selected: active? } : { checked: active? } }
+              # Always use aria-selected for listbox (role="option" requires aria-selected per WAI-ARIA 1.2)
+              { aria: @list.acts_as_listbox? || @list.aria_selection_variant == :selected ? { selected: active? } : { checked: active? } }
             )
           end
 

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

@@ -65,6 +65,6 @@ let ActionListElement = class ActionListElement extends HTMLElement {
 };
 _ActionListElement_truncationObserver = new WeakMap();
 ActionListElement = __decorate([
-    controller
+    controller('action-list')
 ], ActionListElement);
 export { ActionListElement };

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

@@ -39,7 +39,7 @@ export class ActionListTruncationObserver {
   }
 }
 
-@controller
+@controller('action-list')
 export class ActionListElement extends HTMLElement {
   #truncationObserver: ActionListTruncationObserver
 

data/app/components/primer/alpha/action_menu/action_menu_element.js

@@ -485,7 +485,7 @@ __decorate([
     target
 ], ActionMenuElement.prototype, "overlay", void 0);
 ActionMenuElement = __decorate([
-    controller
+    controller('action-menu')
 ], ActionMenuElement);
 export { ActionMenuElement };
 if (!window.customElements.get('action-menu')) {

data/app/components/primer/alpha/action_menu/action_menu_element.ts

@@ -14,7 +14,7 @@ type SelectedItem = {
 const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]']
 const menuItemSelectors = validSelectors.map(selector => `:not([hidden]) > ${selector}`)
 
-@controller
+@controller('action-menu')
 export class ActionMenuElement extends HTMLElement {
   @target
   includeFragment: IncludeFragmentElement

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

@@ -12,7 +12,11 @@ module Primer
     #
     # @accessibility
     #   Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether
-    #   `main` or `sidebar` comes first in code. The code order won’t affect the visual position.
+    #   `main` or `sidebar` comes first in code. The code order won't affect the visual position.
+    #
+    #   When using `row_placement: :none` on the sidebar, the sidebar content will be hidden at narrow viewports.
+    #   This may cause WCAG 1.4.10 Reflow failures if the sidebar contains essential content. Only use `:none`
+    #   when the sidebar content is non-essential or available elsewhere on the page.
     class Layout < Primer::Component
       status :alpha
 
@@ -60,7 +64,7 @@ module Primer
       #
       # @param width [Symbol] <%= one_of(Primer::Alpha::Layout::SIDEBAR_WIDTH_OPTIONS) %>
       # @param col_placement [Symbol] Sidebar placement when `Layout` is in column modes. <%= one_of(Primer::Alpha::Layout::SIDEBAR_COL_PLACEMENT_OPTIONS) %>
-      # @param row_placement [Symbol] Sidebar placement when `Layout` is in row mode. <%= one_of(Primer::Alpha::Layout::SIDEBAR_ROW_PLACEMENT_OPTIONS) %>
+      # @param row_placement [Symbol] Sidebar placement when `Layout` is in row mode. <%= one_of(Primer::Alpha::Layout::SIDEBAR_ROW_PLACEMENT_OPTIONS) %> **Note:** Using `:none` hides the sidebar at narrow viewports, which may cause WCAG 1.4.10 Reflow issues if the sidebar contains essential content.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :sidebar, lambda { |
         width: SIDEBAR_WIDTH_DEFAULT,

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

@@ -39,7 +39,7 @@ __decorate([
     targets
 ], SegmentedControlElement.prototype, "items", void 0);
 SegmentedControlElement = __decorate([
-    controller
+    controller('segmented-control')
 ], SegmentedControlElement);
 if (!window.customElements.get('segmented-control')) {
     window.SegmentedControlElement = SegmentedControlElement;

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

@@ -1,6 +1,6 @@
 import {controller, targets} from '@github/catalyst'
 
-@controller
+@controller('segmented-control')
 class SegmentedControlElement extends HTMLElement {
   @targets items: HTMLElement[]
 

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

@@ -256,7 +256,7 @@ module Primer
           super(
             p: 2,
             role: "listbox",
-            aria_selection_variant: select_variant == :single ? :selected : :checked,
+            aria_selection_variant: :selected,
             select_variant: select_variant == :multiple ? :multiple_checkbox : :single,
             **system_arguments
           )

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

@@ -84,7 +84,7 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
         return this.getAttribute('data-select-variant');
     }
     get ariaSelectionType() {
-        return this.selectVariant === 'multiple' ? 'aria-checked' : 'aria-selected';
+        return 'aria-selected';
     }
     set selectVariant(variant) {
         if (variant) {
@@ -775,6 +775,8 @@ _SelectPanelElement_performFilteringLocally = function _SelectPanelElement_perfo
     return __classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_fetchStrategy_get) === FetchStrategy.LOCAL || __classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_fetchStrategy_get) === FetchStrategy.EVENTUALLY_LOCAL;
 };
 _SelectPanelElement_handleInvokerActivated = function _SelectPanelElement_handleInvokerActivated(event) {
+    // Let listeners observe the invoker was clicked
+    this.invokerElement?.dispatchEvent(new CustomEvent('invokerClicked', { bubbles: true }));
     event.preventDefault();
     // eslint-disable-next-line no-restricted-syntax
     event.stopPropagation();
@@ -987,7 +989,7 @@ __decorate([
     target
 ], SelectPanelElement.prototype, "liveRegion", void 0);
 SelectPanelElement = __decorate([
-    controller
+    controller('select-panel')
 ], SelectPanelElement);
 export { SelectPanelElement };
 if (!window.customElements.get('select-panel')) {

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

@@ -64,7 +64,7 @@ const updateWhenVisible = (() => {
   }
 })()
 
-@controller
+@controller('select-panel')
 export class SelectPanelElement extends HTMLElement {
   @target includeFragment: IncludeFragmentElement
   @target dialog: HTMLDialogElement
@@ -97,7 +97,7 @@ export class SelectPanelElement extends HTMLElement {
   }
 
   get ariaSelectionType(): string {
-    return this.selectVariant === 'multiple' ? 'aria-checked' : 'aria-selected'
+    return 'aria-selected'
   }
 
   set selectVariant(variant: SelectVariant) {
@@ -813,6 +813,9 @@ export class SelectPanelElement extends HTMLElement {
   }
 
   #handleInvokerActivated(event: Event) {
+    // Let listeners observe the invoker was clicked
+    this.invokerElement?.dispatchEvent(new CustomEvent('invokerClicked', {bubbles: true}))
+
     event.preventDefault()
 
     // eslint-disable-next-line no-restricted-syntax

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

@@ -117,6 +117,7 @@ module Primer
         DEFAULT = nil
         OPTIONS = [
           DEFAULT,
+          :none,
           :condensed,
           :normal,
           :spacious

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

@@ -1 +1 @@
-.tabnav{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);margin-bottom:var(--stack-gap-normal);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin)*-1);overflow:hidden}.tabnav-tab{background-color:initial;border:var(--borderWidth-thin) solid #0000;border-bottom:0;color:var(--fgColor-muted);display:inline-block;flex-shrink:0;font-size:var(--text-body-size-medium);line-height:23px;padding:var(--base-size-8) var(--control-medium-paddingInline-spacious);-webkit-text-decoration:none;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(--bgColor-default);border-color:var(--borderColor-default);border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0;color:var(--fgColor-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(--fgColor-default);-webkit-text-decoration:none;text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0!important;outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--fgColor-muted)}.tabnav-tab .octicon{margin-right:var(--control-small-gap)}.tabnav-tab .Counter{color:inherit;margin-left:var(--control-small-gap)}.tabnav-extra{color:var(--fgColor-muted);display:inline-block;font-size:var(--text-body-size-small);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:var(--base-size-2)}a.tabnav-extra:hover{color:var(--fgColor-accent);-webkit-text-decoration:none;text-decoration:none}.tabnav-btn{margin-left:var(--controlStack-medium-gap-condensed)}
+.tabnav{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);margin-bottom:var(--stack-gap-normal);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin)*-1);overflow-x:auto;overflow-y:hidden}.tabnav-tab,.tabnav-tabs>li{flex-shrink:0}.tabnav-tab{background-color:initial;border:var(--borderWidth-thin) solid #0000;border-bottom:0;color:var(--fgColor-muted);display:inline-block;font-size:var(--text-body-size-medium);line-height:23px;padding:var(--base-size-8) var(--control-medium-paddingInline-spacious);-webkit-text-decoration:none;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(--bgColor-default);border-color:var(--borderColor-default);border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0;color:var(--fgColor-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(--fgColor-default);-webkit-text-decoration:none;text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0!important;outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--fgColor-muted)}.tabnav-tab .octicon{margin-right:var(--control-small-gap)}.tabnav-tab .Counter{color:inherit;margin-left:var(--control-small-gap)}.tabnav-extra{color:var(--fgColor-muted);display:inline-block;font-size:var(--text-body-size-small);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:var(--base-size-2)}a.tabnav-extra:hover{color:var(--fgColor-accent);-webkit-text-decoration:none;text-decoration:none}.tabnav-btn{margin-left:var(--controlStack-medium-gap-condensed)}

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

@@ -4,6 +4,7 @@
     ".tabnav",
     ".tabnav-tabs",
     ".tabnav-tab",
+    ".tabnav-tabs>li",
     ".tabnav-tab.selected",
     ".tabnav-tab[aria-current]:not([aria-current=false])",
     ".tabnav-tab[aria-selected=true]",

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

@@ -1 +1 @@
-{"version":3,"sources":["tab_nav.pcss"],"names":[],"mappings":"AAGA,QAIE,sEAAuE,CADvE,qCAAsC,CAFtC,YAIF,CAEA,aACE,YAAa,CAEb,8CAAiD,CACjD,eACF,CAEA,YAUE,wBAA6B,CAE7B,0CAAgB,CAAhB,eAAgB,CAJhB,0BAA2B,CAP3B,oBAAqB,CACrB,aAAc,CAGd,sCAAuC,CAEvC,gBAAiB,CAHjB,uEAAwE,CAKxE,4BAAqB,CAArB,oBAAqB,CAIrB,4CA0CF,CAxCE,yGAIE,uCAAwC,CACxC,uCAAwC,CACxC,uEAAwE,CAHxE,4BAQF,CAHE,uHACE,aACF,CAGF,kBACE,4BAA6B,CAC7B,4BAAqB,CAArB,oBAAqB,CACrB,uBACF,CAEA,4CAEE,iFAAmF,CACnF,mBACF,CAMA,wCAHE,0BAOF,CAJA,qBAEE,qCAEF,CAEA,qBAGE,aAAc,CADd,oCAEF,CAQF,cAOE,0BAA2B,CAN3B,oBAAqB,CAKrB,qCAAsC,CADtC,gBAAiB,CAFjB,gBASF,CAHE,uBACE,+BACF,CAKF,qBACE,2BAA4B,CAC5B,4BAAqB,CAArB,oBACF,CAOA,YAEE,oDACF","file":"tab_nav.css","sourcesContent":["/* tabnav */\n\n/* Outer wrapper */\n.tabnav {\n  margin-top: 0;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.tabnav-tabs {\n  display: flex;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: calc(var(--borderWidth-thin) * -1);\n  overflow: hidden;\n}\n\n.tabnav-tab {\n  display: inline-block;\n  flex-shrink: 0;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);\n  font-size: var(--text-body-size-medium);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 23px;\n  color: var(--fgColor-muted);\n  text-decoration: none;\n  background-color: transparent;\n  border: var(--borderWidth-thin) 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(--fgColor-default);\n    background-color: var(--bgColor-default); /* cover bottom border */\n    border-color: var(--borderColor-default);\n    border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;\n\n    & .octicon {\n      color: inherit;\n    }\n  }\n\n  &:hover {\n    color: var(--fgColor-default);\n    text-decoration: none;\n    transition-duration: 0.1s;\n  }\n\n  &:focus,\n  &:focus-visible {\n    border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0 !important;\n    outline-offset: -6px;\n  }\n\n  &:active {\n    color: var(--fgColor-muted);\n  }\n\n  & .octicon {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-right: var(--control-small-gap);\n    color: var(--fgColor-muted);\n  }\n\n  & .Counter {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-left: var(--control-small-gap);\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  /* stylelint-disable-next-line primer/spacing */\n  padding-top: 10px;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: 10px;\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-muted);\n\n  & > .octicon {\n    margin-right: var(--base-size-2);\n  }\n}\n\n/* When tabnav-extra are anchors */\n/* stylelint-disable-next-line selector-no-qualifying-type, selector-max-type */\na.tabnav-extra:hover {\n  color: var(--fgColor-accent);\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  /* stylelint-disable-next-line primer/spacing */\n  margin-left: var(--controlStack-medium-gap-condensed);\n}\n"]}
+{"version":3,"sources":["tab_nav.pcss"],"names":[],"mappings":"AAGA,QAIE,sEAAuE,CADvE,qCAAsC,CAFtC,YAIF,CAEA,aACE,YAAa,CAEb,8CAAiD,CACjD,eAAgB,CAChB,iBAMF,CAEA,4BAJI,aA2DJ,CAvDA,YAUE,wBAA6B,CAE7B,0CAAgB,CAAhB,eAAgB,CAJhB,0BAA2B,CAP3B,oBAAqB,CAIrB,sCAAuC,CAEvC,gBAAiB,CAHjB,uEAAwE,CAKxE,4BAAqB,CAArB,oBAAqB,CAIrB,4CA0CF,CAxCE,yGAIE,uCAAwC,CACxC,uCAAwC,CACxC,uEAAwE,CAHxE,4BAQF,CAHE,uHACE,aACF,CAGF,kBACE,4BAA6B,CAC7B,4BAAqB,CAArB,oBAAqB,CACrB,uBACF,CAEA,4CAEE,iFAAmF,CACnF,mBACF,CAMA,wCAHE,0BAOF,CAJA,qBAEE,qCAEF,CAEA,qBAGE,aAAc,CADd,oCAEF,CAQF,cAOE,0BAA2B,CAN3B,oBAAqB,CAKrB,qCAAsC,CADtC,gBAAiB,CAFjB,gBASF,CAHE,uBACE,+BACF,CAKF,qBACE,2BAA4B,CAC5B,4BAAqB,CAArB,oBACF,CAOA,YAEE,oDACF","file":"tab_nav.css","sourcesContent":["/* tabnav */\n\n/* Outer wrapper */\n.tabnav {\n  margin-top: 0;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.tabnav-tabs {\n  display: flex;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: calc(var(--borderWidth-thin) * -1);\n  overflow-x: auto;\n  overflow-y: hidden;\n\n  /* stylelint-disable-next-line selector-max-type */\n  & > li {\n    flex-shrink: 0;\n  }\n}\n\n.tabnav-tab {\n  display: inline-block;\n  flex-shrink: 0;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);\n  font-size: var(--text-body-size-medium);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 23px;\n  color: var(--fgColor-muted);\n  text-decoration: none;\n  background-color: transparent;\n  border: var(--borderWidth-thin) 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(--fgColor-default);\n    background-color: var(--bgColor-default); /* cover bottom border */\n    border-color: var(--borderColor-default);\n    border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;\n\n    & .octicon {\n      color: inherit;\n    }\n  }\n\n  &:hover {\n    color: var(--fgColor-default);\n    text-decoration: none;\n    transition-duration: 0.1s;\n  }\n\n  &:focus,\n  &:focus-visible {\n    border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0 !important;\n    outline-offset: -6px;\n  }\n\n  &:active {\n    color: var(--fgColor-muted);\n  }\n\n  & .octicon {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-right: var(--control-small-gap);\n    color: var(--fgColor-muted);\n  }\n\n  & .Counter {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-left: var(--control-small-gap);\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  /* stylelint-disable-next-line primer/spacing */\n  padding-top: 10px;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: 10px;\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-muted);\n\n  & > .octicon {\n    margin-right: var(--base-size-2);\n  }\n}\n\n/* When tabnav-extra are anchors */\n/* stylelint-disable-next-line selector-no-qualifying-type, selector-max-type */\na.tabnav-extra:hover {\n  color: var(--fgColor-accent);\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  /* stylelint-disable-next-line primer/spacing */\n  margin-left: var(--controlStack-medium-gap-condensed);\n}\n"]}

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

@@ -12,7 +12,13 @@
   display: flex;
   /* stylelint-disable-next-line primer/spacing */
   margin-bottom: calc(var(--borderWidth-thin) * -1);
-  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  /* stylelint-disable-next-line selector-max-type */
+  & > li {
+    flex-shrink: 0;
+  }
 }
 
 .tabnav-tab {

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

@@ -171,7 +171,7 @@ __decorate([
     attr
 ], ToggleSwitchElement.prototype, "turbo", void 0);
 ToggleSwitchElement = __decorate([
-    controller
+    controller('toggle-switch')
 ], ToggleSwitchElement);
 if (!window.customElements.get('toggle-switch')) {
     window.ToggleSwitchElement = ToggleSwitchElement;

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

@@ -39,6 +39,7 @@ module Primer
       #   Only customize this label if it makes the toggle’s state more meaningful
       #   in its specific context. For example, for a "Show images" setting,
       #   you might use "Show" when the switch is OFF.
+      # @param button_type [Symbol] The type attribute for the underlying button element. If `nil`, the button will not have a type attribute, which means it will default to "submit" if it's inside a form and "button" otherwise.
 
       def initialize(
         src: nil,
@@ -51,6 +52,7 @@ module Primer
         autofocus: nil,
         on_label: nil,
         off_label: nil,
+        button_type: nil,
         **system_arguments
       )
         @src = src
@@ -75,6 +77,7 @@ module Primer
         )
 
         @button_arguments = {
+          type: button_type,
           aria: merge_aria(
             @system_arguments,
             aria: { pressed: on? }

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

@@ -1,6 +1,6 @@
 import {controller, target, attr} from '@github/catalyst'
 
-@controller
+@controller('toggle-switch')
 class ToggleSwitchElement extends HTMLElement {
   @target switch: HTMLElement
   @target loadingSpinner: HTMLElement

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

@@ -354,7 +354,7 @@ __decorate([
     target
 ], TreeViewElement.prototype, "formInputPrototype", void 0);
 TreeViewElement = __decorate([
-    controller
+    controller('tree-view')
 ], TreeViewElement);
 export { TreeViewElement };
 if (!window.customElements.get('tree-view')) {

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

@@ -3,7 +3,7 @@ import {TreeViewSubTreeNodeElement} from './tree_view_sub_tree_node_element'
 import {useRovingTabIndex} from './tree_view_roving_tab_index'
 import type {TreeViewNodeType, TreeViewCheckedValue, TreeViewNodeInfo} from '../../shared_events'
 
-@controller
+@controller('tree-view')
 export class TreeViewElement extends HTMLElement {
   @target formInputContainer: HTMLElement
   @target formInputPrototype: HTMLInputElement

data/app/components/primer/alpha/tree_view/tree_view_icon_pair_element.js

@@ -53,7 +53,7 @@ __decorate([
     target
 ], TreeViewIconPairElement.prototype, "collapsedIcon", void 0);
 TreeViewIconPairElement = __decorate([
-    controller
+    controller('tree-view-icon-pair')
 ], TreeViewIconPairElement);
 export { TreeViewIconPairElement };
 if (!window.customElements.get('tree-view-icon-pair')) {

data/app/components/primer/alpha/tree_view/tree_view_icon_pair_element.ts

@@ -1,7 +1,7 @@
 import {controller, target} from '@github/catalyst'
 import {observeMutationsUntilConditionMet} from '../../utils'
 
-@controller
+@controller('tree-view-icon-pair')
 export class TreeViewIconPairElement extends HTMLElement {
   @target expandedIcon: HTMLElement
   @target collapsedIcon: HTMLElement

data/app/components/primer/alpha/tree_view/tree_view_include_fragment_element.js

@@ -19,7 +19,7 @@ let TreeViewIncludeFragmentElement = class TreeViewIncludeFragmentElement extend
     }
 };
 TreeViewIncludeFragmentElement = __decorate([
-    controller
+    controller('tree-view-include-fragment')
 ], TreeViewIncludeFragmentElement);
 export { TreeViewIncludeFragmentElement };
 if (!window.customElements.get('tree-view-include-fragment')) {

data/app/components/primer/alpha/tree_view/tree_view_include_fragment_element.ts

@@ -1,7 +1,7 @@
 import {controller} from '@github/catalyst'
 import {IncludeFragmentElement} from '@github/include-fragment-element'
 
-@controller
+@controller('tree-view-include-fragment')
 export class TreeViewIncludeFragmentElement extends IncludeFragmentElement {
   request(): Request {
     const originalRequest = super.request()

data/app/components/primer/alpha/tree_view/tree_view_sub_tree_node_element.js

@@ -15,7 +15,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _TreeViewSubTreeNodeElement_instances, _TreeViewSubTreeNodeElement_expanded, _TreeViewSubTreeNodeElement_loadingState, _TreeViewSubTreeNodeElement_abortController, _TreeViewSubTreeNodeElement_activeElementIsLoader, _TreeViewSubTreeNodeElement_handleToggleEvent, _TreeViewSubTreeNodeElement_handleIncludeFragmentEvent, _TreeViewSubTreeNodeElement_handleRetryButtonEvent, _TreeViewSubTreeNodeElement_handleKeyboardEvent, _TreeViewSubTreeNodeElement_handleCheckboxEvent, _TreeViewSubTreeNodeElement_update, _TreeViewSubTreeNodeElement_checkboxElement_get;
+var _TreeViewSubTreeNodeElement_instances, _TreeViewSubTreeNodeElement_expanded, _TreeViewSubTreeNodeElement_loadingState, _TreeViewSubTreeNodeElement_abortController, _TreeViewSubTreeNodeElement_activeElementIsLoader, _TreeViewSubTreeNodeElement_handleToggleEvent, _TreeViewSubTreeNodeElement_handleIncludeFragmentEvent, _TreeViewSubTreeNodeElement_handleRetryButtonEvent, _TreeViewSubTreeNodeElement_handleKeyboardEvent, _TreeViewSubTreeNodeElement_handleCheckboxEvent, _TreeViewSubTreeNodeElement_update, _TreeViewSubTreeNodeElement_isIncludeFragment, _TreeViewSubTreeNodeElement_checkboxElement_get;
 import { controller, target } from '@github/catalyst';
 import { observeMutationsUntilConditionMet } from '../../utils';
 let TreeViewSubTreeNodeElement = class TreeViewSubTreeNodeElement extends HTMLElement {
@@ -134,6 +134,10 @@ let TreeViewSubTreeNodeElement = class TreeViewSubTreeNodeElement extends HTMLEl
             // sub-tree and no node in the entire tree can be focused
             const previousNode = this.subTree.querySelector("[tabindex='0']");
             previousNode?.setAttribute('tabindex', '-1');
+            // Also check if the subtree element itself is an include-fragment with role="treeitem" and has focus
+            if (__classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_isIncludeFragment).call(this) && this.subTree.getAttribute('tabindex') === '0') {
+                this.subTree.setAttribute('tabindex', '-1');
+            }
             this.node.setAttribute('tabindex', '0');
             this.treeView.dispatchEvent(new CustomEvent('treeViewNodeCollapsed', {
                 bubbles: true,
@@ -237,6 +241,10 @@ _TreeViewSubTreeNodeElement_handleIncludeFragmentEvent = function _TreeViewSubTr
         // request succeeded but element has not yet been replaced
         case 'include-fragment-replace':
             __classPrivateFieldSet(this, _TreeViewSubTreeNodeElement_activeElementIsLoader, document.activeElement === this.loadingIndicator.closest('[role=treeitem]'), "f");
+            // Also check if the include-fragment itself has focus (when it has role="treeitem")
+            if (!__classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_activeElementIsLoader, "f") && document.activeElement === this.subTree && __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_isIncludeFragment).call(this)) {
+                __classPrivateFieldSet(this, _TreeViewSubTreeNodeElement_activeElementIsLoader, true, "f");
+            }
             this.loadingState = 'success';
             break;
         case 'include-fragment-replaced':
@@ -332,6 +340,13 @@ _TreeViewSubTreeNodeElement_update = function _TreeViewSubTreeNodeElement_update
     if (this.expanded) {
         if (this.subTree)
             this.subTree.hidden = false;
+        if (__classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_isIncludeFragment).call(this)) {
+            this.subTree.setAttribute('role', 'treeitem');
+            // Ensure the include-fragment can participate in roving tab index
+            if (!this.subTree.hasAttribute('tabindex')) {
+                this.subTree.setAttribute('tabindex', '-1');
+            }
+        }
         this.node.setAttribute('aria-expanded', 'true');
         this.treeView?.expandAncestorsForNode(this);
         if (this.iconPair) {
@@ -345,6 +360,11 @@ _TreeViewSubTreeNodeElement_update = function _TreeViewSubTreeNodeElement_update
     else {
         if (this.subTree)
             this.subTree.hidden = true;
+        if (__classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_isIncludeFragment).call(this)) {
+            this.subTree.removeAttribute('role');
+            // Remove tabindex when role is removed
+            this.subTree.removeAttribute('tabindex');
+        }
         this.node.setAttribute('aria-expanded', 'false');
         if (this.iconPair) {
             this.iconPair.showCollapsed();
@@ -375,6 +395,9 @@ _TreeViewSubTreeNodeElement_update = function _TreeViewSubTreeNodeElement_update
                 this.loadingFailureMessage.hidden = true;
     }
 };
+_TreeViewSubTreeNodeElement_isIncludeFragment = function _TreeViewSubTreeNodeElement_isIncludeFragment() {
+    return this.subTree?.getAttribute('data-target')?.includes('tree-view-sub-tree-node.includeFragment') ?? false;
+};
 _TreeViewSubTreeNodeElement_checkboxElement_get = function _TreeViewSubTreeNodeElement_checkboxElement_get() {
     return this.querySelector('.TreeViewItemCheckbox');
 };
@@ -409,7 +432,7 @@ __decorate([
     target
 ], TreeViewSubTreeNodeElement.prototype, "retryButton", void 0);
 TreeViewSubTreeNodeElement = __decorate([
-    controller
+    controller('tree-view-sub-tree-node')
 ], TreeViewSubTreeNodeElement);
 export { TreeViewSubTreeNodeElement };
 if (!window.customElements.get('tree-view-sub-tree-node')) {

data/app/components/primer/alpha/tree_view/tree_view_sub_tree_node_element.ts

@@ -9,7 +9,7 @@ type LoadingState = 'loading' | 'error' | 'success'
 
 export type SelectStrategy = 'self' | 'descendants' | 'mixed_descendants'
 
-@controller
+@controller('tree-view-sub-tree-node')
 export class TreeViewSubTreeNodeElement extends HTMLElement {
   @target node: HTMLElement
   @target subTree: HTMLElement
@@ -178,6 +178,12 @@ export class TreeViewSubTreeNodeElement extends HTMLElement {
       // sub-tree and no node in the entire tree can be focused
       const previousNode = this.subTree.querySelector("[tabindex='0']")
       previousNode?.setAttribute('tabindex', '-1')
+
+      // Also check if the subtree element itself is an include-fragment with role="treeitem" and has focus
+      if (this.#isIncludeFragment() && this.subTree.getAttribute('tabindex') === '0') {
+        this.subTree.setAttribute('tabindex', '-1')
+      }
+
       this.node.setAttribute('tabindex', '0')
 
       this.treeView.dispatchEvent(
@@ -263,6 +269,10 @@ export class TreeViewSubTreeNodeElement extends HTMLElement {
       // request succeeded but element has not yet been replaced
       case 'include-fragment-replace':
         this.#activeElementIsLoader = document.activeElement === this.loadingIndicator.closest('[role=treeitem]')
+        // Also check if the include-fragment itself has focus (when it has role="treeitem")
+        if (!this.#activeElementIsLoader && document.activeElement === this.subTree && this.#isIncludeFragment()) {
+          this.#activeElementIsLoader = true
+        }
         this.loadingState = 'success'
         break
 
@@ -410,6 +420,13 @@ export class TreeViewSubTreeNodeElement extends HTMLElement {
   #update() {
     if (this.expanded) {
       if (this.subTree) this.subTree.hidden = false
+      if (this.#isIncludeFragment()) {
+        this.subTree.setAttribute('role', 'treeitem')
+        // Ensure the include-fragment can participate in roving tab index
+        if (!this.subTree.hasAttribute('tabindex')) {
+          this.subTree.setAttribute('tabindex', '-1')
+        }
+      }
       this.node.setAttribute('aria-expanded', 'true')
       this.treeView?.expandAncestorsForNode(this)
 
@@ -423,6 +440,11 @@ export class TreeViewSubTreeNodeElement extends HTMLElement {
       }
     } else {
       if (this.subTree) this.subTree.hidden = true
+      if (this.#isIncludeFragment()) {
+        this.subTree.removeAttribute('role')
+        // Remove tabindex when role is removed
+        this.subTree.removeAttribute('tabindex')
+      }
       this.node.setAttribute('aria-expanded', 'false')
 
       if (this.iconPair) {
@@ -453,6 +475,10 @@ export class TreeViewSubTreeNodeElement extends HTMLElement {
     }
   }
 
+  #isIncludeFragment(): boolean {
+    return this.subTree?.getAttribute('data-target')?.includes('tree-view-sub-tree-node.includeFragment') ?? false
+  }
+
   get #checkboxElement(): HTMLElement | null {
     return this.querySelector('.TreeViewItemCheckbox')
   }

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

@@ -43,7 +43,7 @@ __decorate([
     target
 ], XBannerElement.prototype, "titleText", void 0);
 XBannerElement = __decorate([
-    controller
+    controller('x-banner')
 ], XBannerElement);
 if (!window.customElements.get('x-banner')) {
     window.XBannerElement = XBannerElement;

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

@@ -6,7 +6,7 @@ declare global {
   }
 }
 
-@controller
+@controller('x-banner')
 class XBannerElement extends HTMLElement {
   @target titleText: HTMLElement
 

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

@@ -1 +1 @@
-.blankslate-container{container-type:inline-size;width:100%}.blankslate{--blankslate-outer-padding-block:var(--base-size-32);--blankslate-outer-padding-inline:var(--base-size-32);padding:var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);position:relative;text-align:center}.blankslate p{color:var(--fgColor-muted);font-size:var(--text-body-size-large)}.blankslate code{background:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--borderColor-muted);border-radius:var(--borderRadius-medium);font-size:var(--text-body-size-medium);padding:var(--base-size-2) var(--base-size-4) var(--base-size-4)}.blankslate img{height:56px;width:56px}.blankslate-icon{color:var(--fgColor-muted);margin-bottom:var(--stack-gap-condensed);margin-left:var(--control-small-gap);margin-right:var(--control-small-gap)}.blankslate-image{margin-bottom:var(--stack-gap-normal)}.blankslate-heading{font-size:var(--text-title-size-medium);font-weight:var(--text-title-weight-medium);margin-bottom:var(--base-size-4)}.blankslate-action{margin-top:var(--stack-gap-normal)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-spacious)}.blankslate-action:last-of-type{margin-bottom:var(--stack-gap-condensed)}.blankslate-capped{border-radius:0 0 var(--borderRadius-medium) var(--borderRadius-medium)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-80);--blankslate-outer-padding-inline:var(--base-size-40)}.blankslate-narrow{margin:0 auto;max-width:485px}.blankslate-large img{height:80px;width:80px}.blankslate-large h3{font-size:24px;margin:var(--stack-gap-normal) 0}.blankslate-large p{font-size:var(--text-body-size-large)}.blankslate-clean-background{border:0}@container (max-width: 34rem){.blankslate{--blankslate-outer-padding-block:var(--base-size-20);--blankslate-outer-padding-inline:var(--base-size-20)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-44);--blankslate-outer-padding-inline:var(--base-size-28)}.blankslate-icon{margin-bottom:var(--stack-gap-condensed)}.blankslate-heading{font-size:var(--text-title-size-small)}.blankslate p{font-size:var(--text-body-size-medium)}.blankslate-action{margin-top:var(--stack-gap-condensed)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-normal)}.blankslate-action:last-of-type{margin-bottom:calc(var(--stack-gap-condensed)/2)}}
+.blankslate-container{container-type:inline-size;width:100%}.blankslate{--blankslate-outer-padding-block:var(--base-size-32);--blankslate-outer-padding-inline:var(--base-size-32);padding:var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);position:relative;text-align:center}.blankslate p{color:var(--fgColor-muted);font-size:var(--text-body-size-large)}.blankslate code{background:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--borderColor-muted);border-radius:var(--borderRadius-medium);font-size:var(--text-body-size-medium);padding:var(--base-size-2) var(--base-size-4) var(--base-size-4)}.blankslate img{height:56px;width:56px}.blankslate-icon{color:var(--fgColor-muted);margin-bottom:var(--stack-gap-condensed);margin-left:var(--control-small-gap);margin-right:var(--control-small-gap)}.blankslate-image{margin-bottom:var(--stack-gap-normal)}.blankslate-heading{font-size:var(--text-title-size-medium);font-weight:var(--text-title-weight-medium);margin-bottom:var(--base-size-4);text-wrap:balance}.blankslate-description{text-wrap:balance}.blankslate-action{margin-top:var(--stack-gap-normal)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-spacious)}.blankslate-action:last-of-type{margin-bottom:var(--stack-gap-condensed)}.blankslate-capped{border-radius:0 0 var(--borderRadius-medium) var(--borderRadius-medium)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-80);--blankslate-outer-padding-inline:var(--base-size-40)}.blankslate-narrow{margin:0 auto;max-width:485px}.blankslate-large img{height:80px;width:80px}.blankslate-large h3{font-size:24px;margin:var(--stack-gap-normal) 0}.blankslate-large p{font-size:var(--text-body-size-large)}.blankslate-clean-background{border:0}@container (max-width: 34rem){.blankslate{--blankslate-outer-padding-block:var(--base-size-20);--blankslate-outer-padding-inline:var(--base-size-20)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-44);--blankslate-outer-padding-inline:var(--base-size-28)}.blankslate-icon{margin-bottom:var(--stack-gap-condensed)}.blankslate-heading{font-size:var(--text-title-size-small)}.blankslate p{font-size:var(--text-body-size-medium)}.blankslate-action{margin-top:var(--stack-gap-condensed)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-normal)}.blankslate-action:last-of-type{margin-bottom:calc(var(--stack-gap-condensed)/2)}}

data/app/components/primer/beta/blankslate.css.json

@@ -9,6 +9,7 @@
     ".blankslate-icon",
     ".blankslate-image",
     ".blankslate-heading",
+    ".blankslate-description",
     ".blankslate-action",
     ".blankslate-action:first-of-type",
     ".blankslate-action:last-of-type",

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

@@ -1 +1 @@
-{"version":3,"sources":["blankslate.pcss"],"names":[],"mappings":"AAEA,sBACE,0BAA2B,CAC3B,UACF,CAEA,YACE,oDAAqD,CACrD,qDAAsD,CAItD,oFAAqF,CAFrF,iBAAkB,CAGlB,iBAsBF,CAnBE,cAEE,0BAA2B,CAD3B,qCAEF,CAGA,iBAGE,iCAAkC,CAClC,6DAA8D,CAC9D,wCAAyC,CAHzC,sCAAuC,CADvC,gEAKF,CAGA,gBAEE,WAAY,CADZ,UAEF,CAGF,iBAOE,0BAA2B,CAH3B,wCAAyC,CAEzC,oCAAqC,CAJrC,qCAMF,CAEA,kBAEE,qCACF,CAEA,oBAEE,uCAAwC,CACxC,2CAA4C,CAF5C,gCAGF,CAEA,mBAEE,kCAWF,CATE,iCAEE,oCACF,CAEA,gCAEE,wCACF,CAGF,mBACE,uEACF,CAEA,qBACE,oDAAqD,CACrD,qDACF,CAEA,mBAEE,aAAc,CADd,eAEF,CAME,sBAEE,WAAY,CADZ,UAEF,CAGA,qBAME,cAAe,CAJf,gCAKF,CAGA,oBACE,qCACF,CAKF,6BACE,QACF,CAIA,8BACE,YACE,oDAAqD,CACrD,qDACF,CAEA,qBACE,oDAAqD,CACrD,qDACF,CAEA,iBAEE,wCACF,CAEA,oBACE,sCACF,CAGA,cACE,sCACF,CAEA,mBAEE,qCAWF,CATE,iCAEE,kCACF,CAEA,gCAEE,gDACF,CAEJ","file":"blankslate.css","sourcesContent":["/* blankslate */\n\n.blankslate-container {\n  container-type: inline-size;\n  width: 100%;\n}\n\n.blankslate {\n  --blankslate-outer-padding-block: var(--base-size-32);\n  --blankslate-outer-padding-inline: var(--base-size-32);\n\n  position: relative;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);\n  text-align: center;\n\n  /* stylelint-disable-next-line selector-max-type */\n  & p {\n    font-size: var(--text-body-size-large);\n    color: var(--fgColor-muted);\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & code {\n    padding: var(--base-size-2) var(--base-size-4) var(--base-size-4);\n    font-size: var(--text-body-size-medium);\n    background: var(--bgColor-default);\n    border: var(--borderWidth-thin) solid var(--borderColor-muted);\n    border-radius: var(--borderRadius-medium);\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & img {\n    width: 56px;\n    height: 56px;\n  }\n}\n\n.blankslate-icon {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-right: var(--control-small-gap);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: var(--stack-gap-condensed);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: var(--control-small-gap);\n  color: var(--fgColor-muted);\n}\n\n.blankslate-image {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: var(--stack-gap-normal);\n}\n\n.blankslate-heading {\n  margin-bottom: var(--base-size-4);\n  font-size: var(--text-title-size-medium);\n  font-weight: var(--text-title-weight-medium);\n}\n\n.blankslate-action {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-top: var(--stack-gap-normal);\n\n  &:first-of-type {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: var(--stack-gap-spacious);\n  }\n\n  &:last-of-type {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-bottom: var(--stack-gap-condensed);\n  }\n}\n\n.blankslate-capped {\n  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);\n}\n\n.blankslate-spacious {\n  --blankslate-outer-padding-block: var(--base-size-80);\n  --blankslate-outer-padding-inline: var(--base-size-40);\n}\n\n.blankslate-narrow {\n  max-width: 485px;\n  margin: 0 auto;\n}\n\n/* was .large-format\n** QUESTION: should we deprecate this? */\n.blankslate-large {\n  /* stylelint-disable-next-line selector-max-type */\n  & img {\n    width: 80px;\n    height: 80px;\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & h3 {\n    /* stylelint-disable-next-line primer/spacing */\n    margin: var(--stack-gap-normal) 0;\n\n    /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */\n    /* stylelint-disable-next-line primer/typography */\n    font-size: 24px;\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & p {\n    font-size: var(--text-body-size-large);\n  }\n}\n\n/* was .clean-background\n** TO DO: deprecate this and use utility instead */\n.blankslate-clean-background {\n  border: 0;\n}\n\n/* At the time these styles were written,\n   `34rem` was our \"small\" breakpoint width */\n@container (max-width: 34rem) {\n  .blankslate {\n    --blankslate-outer-padding-block: var(--base-size-20);\n    --blankslate-outer-padding-inline: var(--base-size-20);\n  }\n\n  .blankslate-spacious {\n    --blankslate-outer-padding-block: var(--base-size-44);\n    --blankslate-outer-padding-inline: var(--base-size-28);\n  }\n\n  .blankslate-icon {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-bottom: var(--stack-gap-condensed);\n  }\n\n  .blankslate-heading {\n    font-size: var(--text-title-size-small);\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  .blankslate p {\n    font-size: var(--text-body-size-medium);\n  }\n\n  .blankslate-action {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: var(--stack-gap-condensed);\n\n    &:first-of-type {\n      /* stylelint-disable-next-line primer/spacing */\n      margin-top: var(--stack-gap-normal);\n    }\n\n    &:last-of-type {\n      /* stylelint-disable-next-line primer/spacing */\n      margin-bottom: calc(var(--stack-gap-condensed) / 2);\n    }\n  }\n}\n"]}
+{"version":3,"sources":["blankslate.pcss"],"names":[],"mappings":"AAEA,sBACE,0BAA2B,CAC3B,UACF,CAEA,YACE,oDAAqD,CACrD,qDAAsD,CAItD,oFAAqF,CAFrF,iBAAkB,CAGlB,iBAsBF,CAnBE,cAEE,0BAA2B,CAD3B,qCAEF,CAGA,iBAGE,iCAAkC,CAClC,6DAA8D,CAC9D,wCAAyC,CAHzC,sCAAuC,CADvC,gEAKF,CAGA,gBAEE,WAAY,CADZ,UAEF,CAGF,iBAOE,0BAA2B,CAH3B,wCAAyC,CAEzC,oCAAqC,CAJrC,qCAMF,CAEA,kBAEE,qCACF,CAEA,oBAEE,uCAAwC,CACxC,2CAA4C,CAF5C,gCAAiC,CAGjC,iBACF,CAEA,wBACE,iBACF,CAEA,mBAEE,kCAWF,CATE,iCAEE,oCACF,CAEA,gCAEE,wCACF,CAGF,mBACE,uEACF,CAEA,qBACE,oDAAqD,CACrD,qDACF,CAEA,mBAEE,aAAc,CADd,eAEF,CAME,sBAEE,WAAY,CADZ,UAEF,CAGA,qBAME,cAAe,CAJf,gCAKF,CAGA,oBACE,qCACF,CAKF,6BACE,QACF,CAIA,8BACE,YACE,oDAAqD,CACrD,qDACF,CAEA,qBACE,oDAAqD,CACrD,qDACF,CAEA,iBAEE,wCACF,CAEA,oBACE,sCACF,CAGA,cACE,sCACF,CAEA,mBAEE,qCAWF,CATE,iCAEE,kCACF,CAEA,gCAEE,gDACF,CAEJ","file":"blankslate.css","sourcesContent":["/* blankslate */\n\n.blankslate-container {\n  container-type: inline-size;\n  width: 100%;\n}\n\n.blankslate {\n  --blankslate-outer-padding-block: var(--base-size-32);\n  --blankslate-outer-padding-inline: var(--base-size-32);\n\n  position: relative;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);\n  text-align: center;\n\n  /* stylelint-disable-next-line selector-max-type */\n  & p {\n    font-size: var(--text-body-size-large);\n    color: var(--fgColor-muted);\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & code {\n    padding: var(--base-size-2) var(--base-size-4) var(--base-size-4);\n    font-size: var(--text-body-size-medium);\n    background: var(--bgColor-default);\n    border: var(--borderWidth-thin) solid var(--borderColor-muted);\n    border-radius: var(--borderRadius-medium);\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & img {\n    width: 56px;\n    height: 56px;\n  }\n}\n\n.blankslate-icon {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-right: var(--control-small-gap);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: var(--stack-gap-condensed);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: var(--control-small-gap);\n  color: var(--fgColor-muted);\n}\n\n.blankslate-image {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: var(--stack-gap-normal);\n}\n\n.blankslate-heading {\n  margin-bottom: var(--base-size-4);\n  font-size: var(--text-title-size-medium);\n  font-weight: var(--text-title-weight-medium);\n  text-wrap: balance;\n}\n\n.blankslate-description {\n  text-wrap: balance;\n}\n\n.blankslate-action {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-top: var(--stack-gap-normal);\n\n  &:first-of-type {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: var(--stack-gap-spacious);\n  }\n\n  &:last-of-type {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-bottom: var(--stack-gap-condensed);\n  }\n}\n\n.blankslate-capped {\n  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);\n}\n\n.blankslate-spacious {\n  --blankslate-outer-padding-block: var(--base-size-80);\n  --blankslate-outer-padding-inline: var(--base-size-40);\n}\n\n.blankslate-narrow {\n  max-width: 485px;\n  margin: 0 auto;\n}\n\n/* was .large-format\n** QUESTION: should we deprecate this? */\n.blankslate-large {\n  /* stylelint-disable-next-line selector-max-type */\n  & img {\n    width: 80px;\n    height: 80px;\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & h3 {\n    /* stylelint-disable-next-line primer/spacing */\n    margin: var(--stack-gap-normal) 0;\n\n    /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */\n    /* stylelint-disable-next-line primer/typography */\n    font-size: 24px;\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & p {\n    font-size: var(--text-body-size-large);\n  }\n}\n\n/* was .clean-background\n** TO DO: deprecate this and use utility instead */\n.blankslate-clean-background {\n  border: 0;\n}\n\n/* At the time these styles were written,\n   `34rem` was our \"small\" breakpoint width */\n@container (max-width: 34rem) {\n  .blankslate {\n    --blankslate-outer-padding-block: var(--base-size-20);\n    --blankslate-outer-padding-inline: var(--base-size-20);\n  }\n\n  .blankslate-spacious {\n    --blankslate-outer-padding-block: var(--base-size-44);\n    --blankslate-outer-padding-inline: var(--base-size-28);\n  }\n\n  .blankslate-icon {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-bottom: var(--stack-gap-condensed);\n  }\n\n  .blankslate-heading {\n    font-size: var(--text-title-size-small);\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  .blankslate p {\n    font-size: var(--text-body-size-medium);\n  }\n\n  .blankslate-action {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: var(--stack-gap-condensed);\n\n    &:first-of-type {\n      /* stylelint-disable-next-line primer/spacing */\n      margin-top: var(--stack-gap-normal);\n    }\n\n    &:last-of-type {\n      /* stylelint-disable-next-line primer/spacing */\n      margin-bottom: calc(var(--stack-gap-condensed) / 2);\n    }\n  }\n}\n"]}

data/app/components/primer/beta/blankslate.pcss

@@ -55,6 +55,11 @@
   margin-bottom: var(--base-size-4);
   font-size: var(--text-title-size-medium);
   font-weight: var(--text-title-weight-medium);
+  text-wrap: balance;
+}
+
+.blankslate-description {
+  text-wrap: balance;
 }
 
 .blankslate-action {

data/app/components/primer/beta/blankslate.rb

@@ -65,6 +65,7 @@ module Primer
       renders_one :description, lambda { |**system_arguments|
         deny_tag_argument(**system_arguments)
         system_arguments[:tag] = :p
+        system_arguments[:classes] = class_names("blankslate-description", system_arguments[:classes])
 
         Primer::BaseComponent.new(**system_arguments)
       }

data/app/components/primer/beta/details_toggle_element.js

@@ -60,6 +60,6 @@ __decorate([
     target
 ], DetailsToggleElement.prototype, "summaryTarget", void 0);
 DetailsToggleElement = __decorate([
-    controller
+    controller('details-toggle')
 ], DetailsToggleElement);
 window.DetailsToggleElement = DetailsToggleElement;

data/app/components/primer/beta/details_toggle_element.ts

@@ -30,7 +30,7 @@ import {controller, target} from '@github/catalyst'
  * ```
  */
 
-@controller
+@controller('details-toggle')
 class DetailsToggleElement extends HTMLElement {
   @target detailsTarget!: HTMLDetailsElement
   @target summaryTarget!: HTMLElement

data/app/components/primer/beta/nav_list.js

@@ -187,6 +187,6 @@ __decorate([
     target
 ], NavListElement.prototype, "topLevelList", void 0);
 NavListElement = __decorate([
-    controller
+    controller('nav-list')
 ], NavListElement);
 export { NavListElement };

data/app/components/primer/beta/nav_list.ts

@@ -1,7 +1,7 @@
 import {controller, target, targets} from '@github/catalyst'
 import {ActionListTruncationObserver} from '../alpha/action_list'
 
-@controller
+@controller('nav-list')
 export class NavListElement extends HTMLElement {
   @targets items: HTMLElement[]
   @target topLevelList: HTMLElement