@primer/view-components 0.50.0 → 0.50.1-rc.2a07ad50

package/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;

package/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 };

package/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')) {

package/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;

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

@@ -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')) {

package/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;

package/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')) {

package/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')) {

package/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')) {

package/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')) {

package/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;

package/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;

package/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 };

package/app/components/primer/beta/nav_list_group_element.js

@@ -105,7 +105,7 @@ __decorate([
     targets
 ], NavListGroupElement.prototype, "focusMarkers", void 0);
 NavListGroupElement = __decorate([
-    controller
+    controller('nav-list-group')
 ], NavListGroupElement);
 export { NavListGroupElement };
 window.NavListGroupElement = NavListGroupElement;

package/app/components/primer/scrollable_region.js

@@ -46,7 +46,7 @@ __decorate([
     attr
 ], ScrollableRegionElement.prototype, "labelledBy", void 0);
 ScrollableRegionElement = __decorate([
-    controller
+    controller('scrollable-region')
 ], ScrollableRegionElement);
 export { ScrollableRegionElement };
 window.ScrollableRegionElement = ScrollableRegionElement;

package/app/lib/primer/forms/primer_multi_input.js

@@ -35,7 +35,7 @@ __decorate([
     targets
 ], PrimerMultiInputElement.prototype, "fields", void 0);
 PrimerMultiInputElement = __decorate([
-    controller
+    controller('primer-multi-input')
 ], PrimerMultiInputElement);
 export { PrimerMultiInputElement };
 if (!window.customElements.get('primer-multi-input')) {

package/app/lib/primer/forms/primer_text_area.js

@@ -44,7 +44,7 @@ __decorate([
     target
 ], PrimerTextAreaElement.prototype, "characterLimitSrElement", void 0);
 PrimerTextAreaElement = __decorate([
-    controller
+    controller('primer-text-area')
 ], PrimerTextAreaElement);
 export { PrimerTextAreaElement };
 if (!window.customElements.get('primer-text-area')) {

package/app/lib/primer/forms/primer_text_field.js

@@ -128,6 +128,6 @@ __decorate([
     target
 ], PrimerTextFieldElement.prototype, "characterLimitSrElement", void 0);
 PrimerTextFieldElement = __decorate([
-    controller
+    controller('primer-text-field')
 ], PrimerTextFieldElement);
 export { PrimerTextFieldElement };

package/app/lib/primer/forms/toggle_switch_input.js

@@ -29,6 +29,6 @@ __decorate([
     target
 ], ToggleSwitchInputElement.prototype, "validationMessageElement", void 0);
 ToggleSwitchInputElement = __decorate([
-    controller
+    controller('toggle-switch-input')
 ], ToggleSwitchInputElement);
 export { ToggleSwitchInputElement };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.50.0",
+  "version": "0.50.1-rc.2a07ad50",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -45,7 +45,7 @@
   "dependencies": {
     "@github/auto-check-element": "^6.0.0",
     "@github/auto-complete-element": "^3.8.0",
-    "@github/catalyst": "^1.6.0",
+    "@github/catalyst": "^1.8.0",
     "@github/clipboard-copy-element": "^1.3.0",
     "@github/details-menu-element": "^1.0.12",
     "@github/image-crop-element": "^5.0.0",
@@ -78,14 +78,14 @@
     "eslint": "^9.10.0",
     "eslint-plugin-github": "^6.0.0",
     "glob": "^11.0.2",
-    "markdownlint-cli2": "^0.19.1",
+    "markdownlint-cli2": "^0.20.0",
     "mocha": "^11.0.1",
     "playwright": "^1.57.0",
     "postcss": "^8.4.16",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.0.0",
     "postcss-mixins": "^12.1.2",
-    "postcss-preset-env": "^10.0.2",
+    "postcss-preset-env": "^11.1.2",
     "prettier": "^3.3.2",
     "rollup": "^2.79.1",
     "rollup-plugin-terser": "^7.0.2",

package/static/info_arch.json

@@ -4629,7 +4629,7 @@
   {
     "fully_qualified_name": "Primer::Alpha::Layout",
     "description": "`Layout` provides foundational patterns for responsive pages.\n`Layout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences.\n On smaller screens, `Layout` uses vertically stacked rows to display content.\n\n`Layout` flows as both column, when there's enough horizontal space to render both `Main` and `Sidebar`side-by-side (on a desktop of tablet device, per instance);\nor it flows as a row, when `Main` and `Sidebar` are stacked vertically (e.g. on a mobile device).\n`Layout` should always work in any screen size.",
-    "accessibility_docs": "Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether\n`main` or `sidebar` comes first in code. The code order won’t affect the visual position.",
+    "accessibility_docs": "Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether\n`main` or `sidebar` comes first in code. The code order won't affect the visual position.\n\nWhen using `row_placement: :none` on the sidebar, the sidebar content will be hidden at narrow viewports.\nThis may cause WCAG 1.4.10 Reflow failures if the sidebar contains essential content. Only use `:none`\nwhen the sidebar content is non-essential or available elsewhere on the page.",
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -4704,7 +4704,7 @@
             "name": "row_placement",
             "type": "Symbol",
             "default": "N/A",
-            "description": "Sidebar placement when `Layout` is in row mode. One of `:end`, `:none`, or `:start`."
+            "description": "Sidebar placement when `Layout` is in row mode. One of `:end`, `:none`, or `:start`. **Note:** Using `:none` hides the sidebar at narrow viewports, which may cause WCAG 1.4.10 Reflow issues if the sidebar contains essential content."
           },
           {
             "name": "system_arguments",