@openproject/primer-view-components 0.34.0 → 0.35.0

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

@@ -15,7 +15,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_inputName, _ActionMenuElement_invokerBeingClicked, _ActionMenuElement_softDisableItems, _ActionMenuElement_potentiallyDisallowActivation, _ActionMenuElement_isKeyboardActivation, _ActionMenuElement_isKeyboardActivationViaEnter, _ActionMenuElement_isKeyboardActivationViaSpace, _ActionMenuElement_isMouseActivation, _ActionMenuElement_isActivation, _ActionMenuElement_handleInvokerActivated, _ActionMenuElement_handleDialogItemActivated, _ActionMenuElement_handleItemActivated, _ActionMenuElement_activateItem, _ActionMenuElement_handleIncludeFragmentReplaced, _ActionMenuElement_handleFocusOut, _ActionMenuElement_show, _ActionMenuElement_hide, _ActionMenuElement_isOpen, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_firstItem_get;
+var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_inputName, _ActionMenuElement_invokerBeingClicked, _ActionMenuElement_softDisableItems, _ActionMenuElement_potentiallyDisallowActivation, _ActionMenuElement_isAnchorActivationViaSpace, _ActionMenuElement_isActivation, _ActionMenuElement_handleInvokerActivated, _ActionMenuElement_handleDialogItemActivated, _ActionMenuElement_handleItemActivated, _ActionMenuElement_handleIncludeFragmentReplaced, _ActionMenuElement_handleFocusOut, _ActionMenuElement_show, _ActionMenuElement_hide, _ActionMenuElement_isOpen, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_firstItem_get;
 import { controller, target } from '@github/catalyst';
 import '@oddbird/popover-polyfill';
 const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
@@ -152,18 +152,13 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
                     return;
                 }
             }
-            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_activateItem).call(this, event, item);
-            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleItemActivated).call(this, item);
-            // Pressing the space key on a button or link will cause the page to scroll unless preventDefault()
-            // is called. While calling preventDefault() appears to have no effect on link navigation, it skips
-            // form submission. The code below therefore only calls preventDefault() if the button has been
-            // activated by the space key, and manually submits the form if the button is a submit button.
-            if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isKeyboardActivationViaSpace).call(this, event)) {
+            // Pressing the space key on a link will cause the page to scroll unless preventDefault() is called.
+            // We then click it manually to navigate.
+            if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isAnchorActivationViaSpace).call(this, event)) {
                 event.preventDefault();
-                if (item.getAttribute('type') === 'submit') {
-                    item.closest('form')?.submit();
-                }
+                item.click();
             }
+            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleItemActivated).call(this, item);
             return;
         }
         if (event.type === 'include-fragment-replaced') {
@@ -269,26 +264,18 @@ _ActionMenuElement_potentiallyDisallowActivation = function _ActionMenuElement_p
     }
     return false;
 };
-_ActionMenuElement_isKeyboardActivation = function _ActionMenuElement_isKeyboardActivation(event) {
-    return __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isKeyboardActivationViaEnter).call(this, event) || __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isKeyboardActivationViaSpace).call(this, event);
-};
-_ActionMenuElement_isKeyboardActivationViaEnter = function _ActionMenuElement_isKeyboardActivationViaEnter(event) {
-    return (event instanceof KeyboardEvent &&
-        event.type === 'keydown' &&
-        !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
-        event.key === 'Enter');
-};
-_ActionMenuElement_isKeyboardActivationViaSpace = function _ActionMenuElement_isKeyboardActivationViaSpace(event) {
-    return (event instanceof KeyboardEvent &&
+_ActionMenuElement_isAnchorActivationViaSpace = function _ActionMenuElement_isAnchorActivationViaSpace(event) {
+    return (event.target instanceof HTMLAnchorElement &&
+        event instanceof KeyboardEvent &&
         event.type === 'keydown' &&
         !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
         event.key === ' ');
 };
-_ActionMenuElement_isMouseActivation = function _ActionMenuElement_isMouseActivation(event) {
-    return event instanceof MouseEvent && event.type === 'click';
-};
 _ActionMenuElement_isActivation = function _ActionMenuElement_isActivation(event) {
-    return __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isMouseActivation).call(this, event) || __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isKeyboardActivation).call(this, event);
+    // Some browsers fire MouseEvents (Firefox) and others fire PointerEvents (Chrome). Activating an item via
+    // enter or space counterintuitively fires one of these rather than a KeyboardEvent. Since PointerEvent
+    // inherits from MouseEvent, it is enough to check for MouseEvent here.
+    return (event instanceof MouseEvent && event.type === 'click') || __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isAnchorActivationViaSpace).call(this, event);
 };
 _ActionMenuElement_handleInvokerActivated = function _ActionMenuElement_handleInvokerActivated(event) {
     event.preventDefault();
@@ -363,23 +350,6 @@ _ActionMenuElement_handleItemActivated = function _ActionMenuElement_handleItemA
         detail: { item: item.parentElement, checked: this.isItemChecked(item.parentElement) },
     }));
 };
-_ActionMenuElement_activateItem = function _ActionMenuElement_activateItem(event, item) {
-    const eventWillActivateByDefault = (event instanceof MouseEvent && event.type === 'click') ||
-        (event instanceof KeyboardEvent &&
-            event.type === 'keydown' &&
-            !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
-            event.key === 'Enter');
-    // if the event will result in activating the current item by default, i.e. is a
-    // mouse click or keyboard enter, bail out
-    if (eventWillActivateByDefault)
-        return;
-    // otherwise, event will not result in activation by default, so we stop it and
-    // simulate a click
-    /* eslint-disable-next-line no-restricted-syntax */
-    event.stopPropagation();
-    const elem = item;
-    elem.click();
-};
 _ActionMenuElement_handleIncludeFragmentReplaced = function _ActionMenuElement_handleIncludeFragmentReplaced() {
     if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get))
         __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get).focus();

package/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:auto}.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)}.tabnav-tab.selected .octicon,.tabnav-tab[aria-current]:not([aria-current=false]) .octicon,.tabnav-tab[aria-selected=true] .octicon{color:inherit}.tabnav-tab:hover{color:var(--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:2px}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:hidden}.tabnav::part(tablist-wrapper){border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);margin-bottom:var(--stack-gap-normal)}.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)}.tabnav-tab.selected .octicon,.tabnav-tab[aria-current]:not([aria-current=false]) .octicon,.tabnav-tab[aria-selected=true] .octicon{color:inherit}.tabnav-tab:hover{color:var(--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)}tab-container .tabnav-tab{margin-bottom:-1px}.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:2px}a.tabnav-extra:hover{color:var(--fgColor-accent);-webkit-text-decoration:none;text-decoration:none}.tabnav-btn{margin-left:var(--controlStack-medium-gap-condensed)}

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

@@ -3,6 +3,7 @@
   "selectors": [
     ".tabnav",
     ".tabnav-tabs",
+    ".tabnav::part(tablist-wrapper)",
     ".tabnav-tab",
     ".tabnav-tab.selected",
     ".tabnav-tab[aria-current]:not([aria-current=false])",
@@ -16,6 +17,7 @@
     ".tabnav-tab .octicon",
     ".tabnav-tab:active",
     ".tabnav-tab .Counter",
+    "tab-container .tabnav-tab",
     ".tabnav-extra",
     ".tabnav-extra>.octicon",
     "a.tabnav-extra:hover",

package/app/components/primer/alpha/underline_nav.css

@@ -1 +1 @@
-.UnderlineNav{box-shadow:inset 0 -1px 0 var(--borderColor-muted);display:flex;min-height:var(--base-size-48);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:auto;justify-content:space-between}.UnderlineNav .Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-default);margin-left:var(--control-medium-gap)}.UnderlineNav .Counter--primary{background-color:var(--bgColor-neutral-emphasis);color:var(--fgColor-onEmphasis)}.UnderlineNav-body{align-items:center;display:flex;gap:var(--control-medium-gap);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--borderRadius-medium);color:var(--fgColor-default);cursor:pointer;display:flex;font-size:var(--text-body-size-medium);line-height:30px;padding:0 var(--control-medium-paddingInline-condensed);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--borderColor-neutral-muted);color:var(--fgColor-default);outline-offset:-2px;-webkit-text-decoration:none;text-decoration:none;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold);height:0;visibility:hidden}.UnderlineNav-item:before{content:"";height:100%;left:50%;min-height:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:fine){.UnderlineNav-item:hover{background:var(--control-transparent-bgColor-hover);color:var(--fgColor-default);-webkit-text-decoration:none;text-decoration:none;transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{border-bottom-color:var(--underlineNav-borderColor-active);color:var(--fgColor-default);font-weight:var(--base-text-weight-semibold)}.UnderlineNav-item.selected:after,.UnderlineNav-item[aria-current]:not([aria-current=false]):after,.UnderlineNav-item[role=tab][aria-selected=true]:after{background:var(--underlineNav-borderColor-active);border-radius:var(--borderRadius-medium);bottom:calc(50% - 25px);content:"";height:2px;position:absolute;right:50%;transform:translate(50%,-50%);width:100%;z-index:1}.UnderlineNav--right{justify-content:flex-end}.UnderlineNav--right .UnderlineNav-actions{flex:1 1 auto}.UnderlineNav-actions{align-self:center}.UnderlineNav--full{display:block}.UnderlineNav--full .UnderlineNav-body{min-height:var(--base-size-48)}.UnderlineNav-octicon{color:var(--fgColor-muted);display:inline!important;margin-right:var(--control-medium-gap);fill:var(--fgColor-muted)}.UnderlineNav-container{display:flex;justify-content:space-between}
+.UnderlineNav{box-shadow:inset 0 -1px 0 var(--borderColor-muted);display:flex;min-height:var(--base-size-48);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:auto;justify-content:space-between}.UnderlineNav .Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-default);margin-left:var(--control-medium-gap)}.UnderlineNav .Counter--primary{background-color:var(--bgColor-neutral-emphasis);color:var(--fgColor-onEmphasis)}.UnderlineNav::part(tablist-wrapper){box-shadow:inset 0 -1px 0 var(--borderColor-muted);padding:var(--control-medium-gap) 0;width:100%}.UnderlineNav-body,.UnderlineNav::part(tablist){align-items:center;display:flex;gap:var(--control-medium-gap);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--borderRadius-medium);color:var(--fgColor-default);cursor:pointer;display:flex;font-size:var(--text-body-size-medium);line-height:30px;padding:0 var(--control-medium-paddingInline-condensed);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--borderColor-neutral-muted);color:var(--fgColor-default);outline-offset:-2px;-webkit-text-decoration:none;text-decoration:none;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold);height:0;visibility:hidden}.UnderlineNav-item:before{content:"";height:100%;left:50%;min-height:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:fine){.UnderlineNav-item:hover{background:var(--control-transparent-bgColor-hover);color:var(--fgColor-default);-webkit-text-decoration:none;text-decoration:none;transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{border-bottom-color:var(--underlineNav-borderColor-active);color:var(--fgColor-default);font-weight:var(--base-text-weight-semibold)}.UnderlineNav-item.selected:after,.UnderlineNav-item[aria-current]:not([aria-current=false]):after,.UnderlineNav-item[role=tab][aria-selected=true]:after{background:var(--underlineNav-borderColor-active);border-radius:var(--borderRadius-medium);bottom:calc(50% - 25px);content:"";height:2px;position:absolute;right:50%;transform:translate(50%,-50%);width:100%;z-index:1}.UnderlineNav--right{justify-content:flex-end}.UnderlineNav--right .UnderlineNav-actions{flex:1 1 auto}.UnderlineNav-actions{align-self:center}.UnderlineNav--full{display:block}.UnderlineNav--full .UnderlineNav-body{min-height:var(--base-size-48)}.UnderlineNav-octicon{color:var(--fgColor-muted);display:inline!important;margin-right:var(--control-medium-gap);fill:var(--fgColor-muted)}.UnderlineNav-container{display:flex;justify-content:space-between}

package/app/components/primer/alpha/underline_nav.css.json

@@ -4,7 +4,9 @@
     ".UnderlineNav",
     ".UnderlineNav .Counter",
     ".UnderlineNav .Counter--primary",
+    ".UnderlineNav::part(tablist-wrapper)",
     ".UnderlineNav-body",
+    ".UnderlineNav::part(tablist)",
     ".UnderlineNav-item",
     ".UnderlineNav-item:focus",
     ".UnderlineNav-item:focus-visible",

package/app/components/primer/alpha/underline_panels.css

@@ -0,0 +1 @@
+tab-container.UnderlineNav{box-shadow:none;flex-direction:column}

package/app/components/primer/alpha/underline_panels.css.json

@@ -0,0 +1,6 @@
+{
+  "name": "alpha/underline_panels",
+  "selectors": [
+    "tab-container.UnderlineNav"
+  ]
+}

package/lib/primer/forms/primer_text_field.d.ts

@@ -1 +1,28 @@
 import '@github/auto-check-element';
+import type { AutoCheckErrorEvent, AutoCheckSuccessEvent } from '@github/auto-check-element';
+declare global {
+    interface HTMLElementEventMap {
+        'auto-check-success': AutoCheckSuccessEvent;
+        'auto-check-error': AutoCheckErrorEvent;
+    }
+}
+export declare class PrimerTextFieldElement extends HTMLElement {
+    #private;
+    inputElement: HTMLInputElement;
+    validationElement: HTMLElement;
+    validationMessageElement: HTMLElement;
+    validationSuccessIcon: HTMLElement;
+    validationErrorIcon: HTMLElement;
+    leadingVisual: HTMLElement;
+    leadingSpinner: HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    clearContents(): void;
+    clearError(): void;
+    setValidationMessage(message: string): void;
+    toggleValidationStyling(isError: boolean): void;
+    setSuccess(message: string): void;
+    setError(message: string): void;
+    showLeadingSpinner(): void;
+    hideLeadingSpinner(): void;
+}

package/lib/primer/forms/primer_text_field.js

@@ -1,3 +1,4 @@
+/* eslint-disable custom-elements/expose-class-on-global */
 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);
@@ -18,10 +19,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
 var _PrimerTextFieldElement_abortController;
 import '@github/auto-check-element';
 import { controller, target } from '@github/catalyst';
-// eslint-disable-next-line custom-elements/expose-class-on-global
-let PrimerTextFieldElement = 
-// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-class PrimerTextFieldElement extends HTMLElement {
+let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _PrimerTextFieldElement_abortController.set(this, void 0);
@@ -83,6 +81,14 @@ class PrimerTextFieldElement extends HTMLElement {
         this.setValidationMessage(message);
         this.validationElement.hidden = false;
     }
+    showLeadingSpinner() {
+        this.leadingSpinner?.removeAttribute('hidden');
+        this.leadingVisual?.setAttribute('hidden', '');
+    }
+    hideLeadingSpinner() {
+        this.leadingSpinner?.setAttribute('hidden', '');
+        this.leadingVisual?.removeAttribute('hidden');
+    }
 };
 _PrimerTextFieldElement_abortController = new WeakMap();
 __decorate([
@@ -100,7 +106,13 @@ __decorate([
 __decorate([
     target
 ], PrimerTextFieldElement.prototype, "validationErrorIcon", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "leadingVisual", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "leadingSpinner", void 0);
 PrimerTextFieldElement = __decorate([
     controller
-    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
 ], PrimerTextFieldElement);
+export { PrimerTextFieldElement };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openproject/primer-view-components",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "description": "ViewComponents of the Primer Design System for OpenProject",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -50,7 +50,7 @@
     "@github/image-crop-element": "^5.0.0",
     "@github/include-fragment-element": "^6.1.1",
     "@github/relative-time-element": "^4.0.0",
-    "@github/tab-container-element": "^3.1.2",
+    "@github/tab-container-element": "^4.5.0",
     "@oddbird/popover-polyfill": "^0.4.0",
     "@primer/behaviors": "^1.3.4"
   },
@@ -67,14 +67,14 @@
     "@primer/stylelint-config": "^12.7.2",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^8.3.3",
-    "@typescript-eslint/eslint-plugin": "^7.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
     "axe-core": "^4.7.1",
     "chokidar-cli": "^3.0.0",
     "cssnano": "^7.0.1",
     "eslint": "^8.23.1",
     "eslint-plugin-custom-elements": "^0.0.8",
-    "eslint-plugin-github": "^4.9.2",
+    "eslint-plugin-github": "^5.0.1",
     "eslint-plugin-prettier": "^5.0.0",
     "markdownlint-cli2": "^0.13.0",
     "mocha": "^10.0.0",
@@ -84,7 +84,7 @@
     "postcss-import": "^16.0.0",
     "postcss-mixins": "^10.0.0",
     "postcss-preset-env": "^9.3.0",
-    "prettier": "3.2.5",
+    "prettier": "^3.3.2",
     "rollup": "^2.79.1",
     "rollup-plugin-terser": "^7.0.2",
     "stylelint": "^16.1.0",

package/static/arguments.json

@@ -2462,18 +2462,6 @@
         "default": "N/A",
         "description": "One of `:left` or `:right`. - Defaults to left"
       },
-      {
-        "name": "body_arguments",
-        "type": "Hash",
-        "default": "`{}`",
-        "description": "[System arguments](/system-arguments) for the body wrapper."
-      },
-      {
-        "name": "wrapper_arguments",
-        "type": "Hash",
-        "default": "`{}`",
-        "description": "[System arguments](/system-arguments) for the `TabContainer` wrapper."
-      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -2764,6 +2752,12 @@
         "default": "N/A",
         "description": "Renders a leading visual icon before the text field's cursor. The hash will be passed to Primer's [Octicon](/components/beta/octicon) component."
       },
+      {
+        "name": "leading_spinner",
+        "type": "Boolean",
+        "default": "N/A",
+        "description": "If `true`, a leading spinner will be included in the markup. The spinner can be shown via the `showLeadingSpinner()` JavaScript method, and hidden via `hideLeadingSpinner()`. If this argument is `true`, a leading visual must also be provided."
+      },
       {
         "name": "show_clear_button",
         "type": "Boolean",
@@ -4254,6 +4248,12 @@
         "default": "`nil`",
         "description": "Provide a custom title to the element."
       },
+      {
+        "name": "no_title",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Removes the `title` attribute provided on the element by default."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",

package/static/constants.json

@@ -1220,6 +1220,7 @@
   },
   "Primer::Beta::Spinner": {
     "DEFAULT_SIZE": "medium",
+    "DEFAULT_SR_TEXT": "Loading",
     "DEFAULT_STYLE": "box-sizing: content-box; color: var(--color-icon-primary);",
     "SIZE_MAPPINGS": {
       "small": 16,

package/static/info_arch.json

@@ -7628,18 +7628,6 @@
         "default": "N/A",
         "description": "One of `:left` or `:right`. - Defaults to left"
       },
-      {
-        "name": "body_arguments",
-        "type": "Hash",
-        "default": "`{}`",
-        "description": "{{link_to_system_arguments_docs}} for the body wrapper."
-      },
-      {
-        "name": "wrapper_arguments",
-        "type": "Hash",
-        "default": "`{}`",
-        "description": "{{link_to_system_arguments_docs}} for the `TabContainer` wrapper."
-      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -8155,6 +8143,12 @@
         "default": "N/A",
         "description": "Renders a leading visual icon before the text field's cursor. The hash will be passed to Primer's {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}} component."
       },
+      {
+        "name": "leading_spinner",
+        "type": "Boolean",
+        "default": "N/A",
+        "description": "If `true`, a leading spinner will be included in the markup. The spinner can be shown via the `showLeadingSpinner()` JavaScript method, and hidden via `hideLeadingSpinner()`. If this argument is `true`, a leading visual must also be provided."
+      },
       {
         "name": "show_clear_button",
         "type": "Boolean",
@@ -10947,6 +10941,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/beta/breadcrumbs/with_link_target",
+        "name": "with_link_target",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -12640,7 +12647,7 @@
   {
     "fully_qualified_name": "Primer::Beta::IconButton",
     "description": "Use `IconButton` to render Icon-only buttons without the default button styles.\n\n`IconButton` will always render with a tooltip unless the tag is `:summary`.",
-    "accessibility_docs": "`IconButton` requires an `aria-label`, which will provide assistive technologies with an accessible label.\nThe `aria-label` should describe the action to be invoked rather than the icon itself. For instance,\nif your `IconButton` renders a magnifying glass icon and invokes a search action, the `aria-label` should be\n`\"Search\"` instead of `\"Magnifying glass\"`.\nEither `aria-label` or `aria-description` will be used for the `Tooltip` text, depending on which one is present.\nEither `aria-label` or `aria-description` will be used for the `Tooltip` text, depending on which one is present.\n[Learn more about best functional image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/functional)",
+    "accessibility_docs": "`IconButton` requires an `aria-label`, which will provide assistive technologies with an accessible label.\nThe `aria-label` should describe the action to be invoked rather than the icon itself. For instance,\nif your `IconButton` renders a magnifying glass icon and invokes a search action, the `aria-label` should be\n`\"Search\"` instead of `\"Magnifying glass\"`.\nEither `aria-label` or `aria-description` will be used for the `Tooltip` text, depending on which one is present.\nEither `aria-label` or `aria-description` will be used for the `Tooltip` text, depending on which one is present.\n[Learn more about best functional image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/functional)\n\nAdditional markup is required if setting the `tag` argument to either `:a` or `:summary`.\n\n* `:a` requires you to pass in an `href` attribute\n* `:summary` requires you to wrap the component in a `<details>` element",
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -12789,6 +12796,32 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/beta/icon_button/link_as_button",
+        "name": "link_as_button",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/beta/icon_button/summary_as_button",
+        "name": "summary_as_button",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -14496,6 +14529,12 @@
         "default": "`nil`",
         "description": "Provide a custom title to the element."
       },
+      {
+        "name": "no_title",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Removes the `title` attribute provided on the element by default."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -14574,6 +14613,32 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/beta/relative_time/no_title_attribute",
+        "name": "no_title_attribute",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/beta/relative_time/link_with_tooltip",
+        "name": "link_with_tooltip",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [

package/static/previews.json

@@ -2084,6 +2084,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/beta/breadcrumbs/with_link_target",
+        "name": "with_link_target",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },
@@ -4111,6 +4124,32 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/beta/icon_button/link_as_button",
+        "name": "link_as_button",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/beta/icon_button/summary_as_button",
+        "name": "summary_as_button",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },
@@ -5885,6 +5924,32 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/beta/relative_time/no_title_attribute",
+        "name": "no_title_attribute",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/beta/relative_time/link_with_tooltip",
+        "name": "link_with_tooltip",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },