@openproject/primer-view-components 0.82.1 → 0.83.0-rc.ae05103d7

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

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

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

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

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

@@ -440,7 +440,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 {
@@ -140,6 +140,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,
@@ -251,6 +255,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':
@@ -354,6 +362,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) {
@@ -367,6 +382,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();
@@ -397,6 +417,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');
 };
@@ -431,7 +454,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/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);margin:auto;max-width:56rem}.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);margin:auto;max-width:56rem}.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)}}

package/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",

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/dialog_helper.js

@@ -25,20 +25,29 @@ function dialogInvokerButtonHandler(event) {
             // If the behaviour is allowed through the dialog will be shown but then
             // quickly hidden- as if it were never shown. This prevents that.
             event.preventDefault();
-            // In some older browsers, such as Chrome 122, when a top layer element (such as a dialog)
-            // opens from within a popover, the "hide all popovers" internal algorithm runs, hiding
-            // any popover that is currently open, regardless of whether or not another top layer element,
-            // such as a <dialog> is nested inside.
-            // See https://github.com/whatwg/html/issues/9998.
-            // This is fixed by https://github.com/whatwg/html/pull/10116, but while we still support browsers
-            // that present this bug, we must undo the work they did to hide ancestral popovers of the dialog:
+            // When a <dialog> is opened with showModal() from inside a popover with popover="auto",
+            // there are two related issues:
+            //
+            // 1. In older browsers (e.g. Chrome 122), the "hide all popovers" algorithm runs when a
+            //    top layer element opens, closing any ancestor popover. We must re-open those popovers.
+            //    See https://github.com/whatwg/html/issues/9998,
+            //    fixed by https://github.com/whatwg/html/pull/10116.
+            //
+            // 2. In newer browsers where the popover stays open, the popover="auto" behavior still
+            //    interferes with the native <dialog> focus trap, causing focus to escape the dialog
+            //    when tabbing past the last focusable element. Converting the popover to "manual"
+            //    prevents this interference.
+            //
+            // In both cases, the fix is the same: convert ancestor auto popovers to manual.
             let node = button;
             let fixed = false;
             while (node) {
-                node = node.parentElement?.closest('[popover]:not(:popover-open)');
+                node = node.parentElement?.closest('[popover]');
                 if (node && node.popover === 'auto') {
                     node.classList.add('dialog-inside-popover-fix');
                     node.popover = 'manual';
+                    // Changing popover from "auto" to "manual" closes the popover,
+                    // so we need to re-show it regardless of whether it was previously open.
                     node.showPopover();
                     fixed = true;
                 }

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": "@openproject/primer-view-components",
-  "version": "0.82.1",
+  "version": "0.83.0-rc.ae05103d7",
   "description": "ViewComponents of the Primer Design System for OpenProject",
   "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",
@@ -69,6 +69,7 @@
     "@github/prettier-config": "0.0.6",
     "@playwright/test": "^1.57.0",
     "@primer/css": "22.1.0",
+    "@primer/primitives": "^11.4.0",
     "@primer/stylelint-config": "^13.1.1",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^8.3.3",
@@ -78,14 +79,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/arguments.json

@@ -3336,6 +3336,12 @@
         "type": "String",
         "default": "`nil`",
         "description": "Custom label to show when the switch is OFF. Defaults to (\"Off\"). 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."
+      },
+      {
+        "name": "button_type",
+        "type": "Symbol",
+        "default": "`nil`",
+        "description": "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."
       }
     ]
   },

package/static/info_arch.json

@@ -5119,7 +5119,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,
@@ -5194,7 +5194,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",
@@ -10060,6 +10060,12 @@
         "type": "String",
         "default": "`nil`",
         "description": "Custom label to show when the switch is OFF. Defaults to (\"Off\"). 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."
+      },
+      {
+        "name": "button_type",
+        "type": "Symbol",
+        "default": "`nil`",
+        "description": "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."
       }
     ],
     "slots": [],