@primer/view-components 0.36.6-rc.eb5a847f → 0.37.0-rc.0bf6cc7a

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

@@ -129,6 +129,11 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
             }
         }), "f");
         observeMutationsUntilConditionMet(this, () => Boolean(this.invokerElement), () => __classPrivateFieldGet(this, _ActionMenuElement_intersectionObserver, "f").observe(this.invokerElement));
+        // If there's no include fragment, then no async fetching will occur and we can
+        // mark the component as ready.
+        if (!this.includeFragment) {
+            this.setAttribute('data-ready', 'true');
+        }
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f").abort();
@@ -395,6 +400,8 @@ _ActionMenuElement_handleIncludeFragmentReplaced = function _ActionMenuElement_h
     if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get))
         __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get).focus();
     __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_softDisableItems).call(this);
+    // async items have loaded, so component is ready
+    this.setAttribute('data-ready', 'true');
 };
 _ActionMenuElement_handleFocusOut = function _ActionMenuElement_handleFocusOut() {
     __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_hide).call(this);
@@ -409,6 +416,8 @@ _ActionMenuElement_isOpen = function _ActionMenuElement_isOpen() {
     return this.popoverElement?.matches(':popover-open');
 };
 _ActionMenuElement_setDynamicLabel = function _ActionMenuElement_setDynamicLabel() {
+    if (this.selectVariant !== 'single')
+        return;
     if (!this.dynamicLabel)
         return;
     const invokerLabel = this.invokerLabel;

package/app/components/primer/beta/details_toggle_element.d.ts

@@ -0,0 +1,39 @@
+/**
+ * A companion Catalyst element for the Details view component. This element
+ * ensures the <details> and <summary> elements markup is properly accessible by
+ * updating the aria-label and aria-expanded attributes on click.
+ *
+ * aria-label values default to "Expand" and "Collapse". To override those
+ * values, use the `data-aria-label-open` and `data-aria-label-closed`
+ * attributes on the summary target.
+ *
+ * @example
+ * ```html
+ * <details-toggle>
+ *   <details open=true data-target="details-toggle.detailsTarget">
+ *     <summary
+ *       aria-expanded="true"
+ *       aria-label="Collapse me"
+ *       data-target="details-toggle.summaryTarget"
+ *       data-action="click:details-toggle#toggle"
+ *       data-aria-label-closed="Expand me"
+ *       data-aria-label-open="Collapse me"
+ *     >
+ *       Click me
+ *     </summary>
+ *     <div>Contents</div>
+ *   </details>
+ * </details-toggle>
+ * ```
+ */
+declare class DetailsToggleElement extends HTMLElement {
+    detailsTarget: HTMLDetailsElement;
+    summaryTarget: HTMLElement;
+    toggle(): void;
+}
+declare global {
+    interface Window {
+        DetailsToggleElement: typeof DetailsToggleElement;
+    }
+}
+export {};

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

@@ -0,0 +1,60 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { controller, target } from '@github/catalyst';
+/**
+ * A companion Catalyst element for the Details view component. This element
+ * ensures the <details> and <summary> elements markup is properly accessible by
+ * updating the aria-label and aria-expanded attributes on click.
+ *
+ * aria-label values default to "Expand" and "Collapse". To override those
+ * values, use the `data-aria-label-open` and `data-aria-label-closed`
+ * attributes on the summary target.
+ *
+ * @example
+ * ```html
+ * <details-toggle>
+ *   <details open=true data-target="details-toggle.detailsTarget">
+ *     <summary
+ *       aria-expanded="true"
+ *       aria-label="Collapse me"
+ *       data-target="details-toggle.summaryTarget"
+ *       data-action="click:details-toggle#toggle"
+ *       data-aria-label-closed="Expand me"
+ *       data-aria-label-open="Collapse me"
+ *     >
+ *       Click me
+ *     </summary>
+ *     <div>Contents</div>
+ *   </details>
+ * </details-toggle>
+ * ```
+ */
+let DetailsToggleElement = class DetailsToggleElement extends HTMLElement {
+    toggle() {
+        const detailsIsOpen = this.detailsTarget.hasAttribute('open');
+        if (detailsIsOpen) {
+            const ariaLabelClosed = this.summaryTarget.getAttribute('data-aria-label-closed') || 'Expand';
+            this.summaryTarget.setAttribute('aria-label', ariaLabelClosed);
+            this.summaryTarget.setAttribute('aria-expanded', 'false');
+        }
+        else {
+            const ariaLabelOpen = this.summaryTarget.getAttribute('data-aria-label-open') || 'Collapse';
+            this.summaryTarget.setAttribute('aria-label', ariaLabelOpen);
+            this.summaryTarget.setAttribute('aria-expanded', 'true');
+        }
+    }
+};
+__decorate([
+    target
+], DetailsToggleElement.prototype, "detailsTarget", void 0);
+__decorate([
+    target
+], DetailsToggleElement.prototype, "summaryTarget", void 0);
+DetailsToggleElement = __decorate([
+    controller
+], DetailsToggleElement);
+window.DetailsToggleElement = DetailsToggleElement;

package/app/components/primer/primer.d.ts

@@ -25,3 +25,4 @@ import '../../lib/primer/forms/primer_text_field';
 import '../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
 import './alpha/select_panel_element';
+import './beta/details_toggle_element';

package/app/components/primer/primer.js

@@ -25,3 +25,4 @@ import '../../lib/primer/forms/primer_text_field';
 import '../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
 import './alpha/select_panel_element';
+import './beta/details_toggle_element';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.36.6-rc.eb5a847f",
+  "version": "0.37.0-rc.0bf6cc7a",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",

package/static/info_arch.json

@@ -3843,7 +3843,18 @@
         "name": "button",
         "description": "Required trigger for the dropdown. Has the same arguments as {{#link_to_component}}Primer::ButtonComponent{{/link_to_component}},\nbut it is locked as a `summary` tag.",
         "parameters": [
-
+          {
+            "name": "aria_label_open",
+            "type": "String",
+            "default": "N/A",
+            "description": "Defaults to \"Close\". Value to announce when menu is open."
+          },
+          {
+            "name": "aria_label_closed",
+            "type": "String",
+            "default": "N/A",
+            "description": "Defaults to \"Open\". Value to announce when menu is closed."
+          }
         ]
       },
       {
@@ -6178,58 +6189,6 @@
           ]
         }
       },
-      {
-        "preview_path": "primer/alpha/overlay/in_an_action_menu",
-        "name": "in_an_action_menu",
-        "snapshot": "false",
-        "skip_rules": {
-          "wont_fix": [
-            "region"
-          ],
-          "will_fix": [
-            "color-contrast"
-          ]
-        }
-      },
-      {
-        "preview_path": "primer/alpha/overlay/dialog_with_header_footer",
-        "name": "dialog_with_header_footer",
-        "snapshot": "false",
-        "skip_rules": {
-          "wont_fix": [
-            "region"
-          ],
-          "will_fix": [
-            "color-contrast"
-          ]
-        }
-      },
-      {
-        "preview_path": "primer/alpha/overlay/overlay_with_header_filter",
-        "name": "overlay_with_header_filter",
-        "snapshot": "false",
-        "skip_rules": {
-          "wont_fix": [
-            "region"
-          ],
-          "will_fix": [
-            "color-contrast"
-          ]
-        }
-      },
-      {
-        "preview_path": "primer/alpha/overlay/overlay_with_header_subtitle",
-        "name": "overlay_with_header_subtitle",
-        "snapshot": "false",
-        "skip_rules": {
-          "wont_fix": [
-            "region"
-          ],
-          "will_fix": [
-            "color-contrast"
-          ]
-        }
-      },
       {
         "preview_path": "primer/alpha/overlay/in_a_sticky_container",
         "name": "in_a_sticky_container",
@@ -13410,9 +13369,26 @@
     "slots": [
       {
         "name": "summary",
-        "description": null,
+        "description": "Use the Summary slot as the target for toggling the Details content open/closed.",
         "parameters": [
-
+          {
+            "name": "button",
+            "type": "Boolean",
+            "default": "N/A",
+            "description": "Whether or not to render the summary element as a button."
+          },
+          {
+            "name": "aria_label_open",
+            "type": "String",
+            "default": "N/A",
+            "description": "Defaults to \"Collapse\". Value to announce when details element is open."
+          },
+          {
+            "name": "aria_label_closed",
+            "type": "String",
+            "default": "N/A",
+            "description": "Defaults to \"Expand\". Value to announce when details element is closed."
+          }
         ]
       },
       {
@@ -13453,6 +13429,26 @@
         ],
         "return_types": [
 
+        ]
+      },
+      {
+        "name": "open",
+        "description": "Returns the value of attribute open.",
+        "parameters": [
+
+        ],
+        "return_types": [
+
+        ]
+      },
+      {
+        "name": "open?",
+        "description": "Returns the value of attribute open.",
+        "parameters": [
+
+        ],
+        "return_types": [
+
         ]
       }
     ],
@@ -13508,6 +13504,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/beta/details/open",
+        "name": "open",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [

package/static/previews.json

@@ -3118,6 +3118,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/beta/details/open",
+        "name": "open",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },
@@ -4997,58 +5010,6 @@
           ]
         }
       },
-      {
-        "preview_path": "primer/alpha/overlay/in_an_action_menu",
-        "name": "in_an_action_menu",
-        "snapshot": "false",
-        "skip_rules": {
-          "wont_fix": [
-            "region"
-          ],
-          "will_fix": [
-            "color-contrast"
-          ]
-        }
-      },
-      {
-        "preview_path": "primer/alpha/overlay/dialog_with_header_footer",
-        "name": "dialog_with_header_footer",
-        "snapshot": "false",
-        "skip_rules": {
-          "wont_fix": [
-            "region"
-          ],
-          "will_fix": [
-            "color-contrast"
-          ]
-        }
-      },
-      {
-        "preview_path": "primer/alpha/overlay/overlay_with_header_filter",
-        "name": "overlay_with_header_filter",
-        "snapshot": "false",
-        "skip_rules": {
-          "wont_fix": [
-            "region"
-          ],
-          "will_fix": [
-            "color-contrast"
-          ]
-        }
-      },
-      {
-        "preview_path": "primer/alpha/overlay/overlay_with_header_subtitle",
-        "name": "overlay_with_header_subtitle",
-        "snapshot": "false",
-        "skip_rules": {
-          "wont_fix": [
-            "region"
-          ],
-          "will_fix": [
-            "color-contrast"
-          ]
-        }
-      },
       {
         "preview_path": "primer/alpha/overlay/in_a_sticky_container",
         "name": "in_a_sticky_container",