jekyll-v4-theme-primer 0.12.0 → 0.14.0

data/_sass/@primer/view-components/app/components/primer/alpha/toggle_switch.js

@@ -5,8 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { controller, target } from '@github/catalyst';
-import { debounce } from '@github/mini-throttle/decorators';
 let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.toggling = false;
+    }
     get src() {
         const src = this.getAttribute('src');
         if (!src)
@@ -26,46 +29,66 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
     isRemote() {
         return this.src != null;
     }
-    toggle() {
+    async toggle() {
+        if (this.toggling)
+            return;
+        this.toggling = true;
         if (this.isDisabled()) {
             return;
         }
-        if (this.isRemote()) {
-            this.setLoadingState();
-            this.submitForm();
-        }
-        else {
+        if (!this.isRemote()) {
             this.performToggle();
+            this.toggling = false;
+            return;
+        }
+        // toggle immediately to tell screen readers the switch was clicked
+        this.performToggle();
+        this.setLoadingState();
+        try {
+            await this.submitForm();
+        }
+        catch (error) {
+            if (error instanceof Error) {
+                // because we toggle immediately when the switch is clicked, toggle back to the
+                // old state on failure
+                this.setErrorState(error.message || 'An error occurred, please try again.');
+                this.performToggle();
+            }
+            return;
+        }
+        finally {
+            this.toggling = false;
         }
+        this.setSuccessState();
     }
     turnOn() {
         if (this.isDisabled()) {
             return;
         }
-        this.switch.setAttribute('aria-checked', 'true');
+        this.switch.setAttribute('aria-pressed', 'true');
         this.classList.add('ToggleSwitch--checked');
     }
     turnOff() {
         if (this.isDisabled()) {
             return;
         }
-        this.switch.setAttribute('aria-checked', 'false');
+        this.switch.setAttribute('aria-pressed', 'false');
         this.classList.remove('ToggleSwitch--checked');
     }
     isOn() {
-        return this.switch.getAttribute('aria-checked') === 'true';
+        return this.switch.getAttribute('aria-pressed') === 'true';
     }
     isOff() {
         return !this.isOn();
     }
     isDisabled() {
-        return this.switch.getAttribute('aria-disabled') === 'true';
+        return this.switch.getAttribute('disabled') != null;
     }
     disable() {
-        this.switch.setAttribute('aria-disabled', 'true');
+        this.switch.setAttribute('disabled', 'disabled');
     }
     enable() {
-        this.switch.setAttribute('aria-disabled', 'false');
+        this.switch.removeAttribute('disabled');
     }
     performToggle() {
         if (this.isOn()) {
@@ -76,9 +99,10 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
         }
     }
     setLoadingState() {
-        this.disable();
         this.errorIcon.setAttribute('hidden', 'hidden');
         this.loadingSpinner.removeAttribute('hidden');
+        const event = new CustomEvent('toggleSwitchLoading', { bubbles: true });
+        this.dispatchEvent(event);
     }
     setSuccessState() {
         const event = new CustomEvent('toggleSwitchSuccess', { bubbles: true });
@@ -95,43 +119,31 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
             this.errorIcon.removeAttribute('hidden');
         }
         this.loadingSpinner.setAttribute('hidden', 'hidden');
-        this.enable();
     }
     async submitForm() {
         const body = new FormData();
         if (this.csrf) {
             body.append(this.csrfField, this.csrf);
         }
-        body.append('value', this.isOn() ? '0' : '1');
+        body.append('value', this.isOn() ? '1' : '0');
+        if (!this.src)
+            throw new Error('invalid src');
+        let response;
         try {
-            if (!this.src)
-                throw new Error('invalid src');
-            let response;
-            try {
-                response = await fetch(this.src, {
-                    credentials: 'same-origin',
-                    method: 'POST',
-                    headers: {
-                        'Requested-With': 'XMLHttpRequest'
-                    },
-                    body
-                });
-            }
-            catch (error) {
-                throw new Error('A network error occurred, please try again.');
-            }
-            if (response.ok) {
-                this.setSuccessState();
-                this.performToggle();
-            }
-            else {
-                throw new Error(await response.text());
-            }
+            response = await fetch(this.src, {
+                credentials: 'same-origin',
+                method: 'POST',
+                headers: {
+                    'Requested-With': 'XMLHttpRequest',
+                },
+                body,
+            });
         }
         catch (error) {
-            if (error instanceof Error) {
-                this.setErrorState(error.message || 'An error occurred, please try again.');
-            }
+            throw new Error('A network error occurred, please try again.');
+        }
+        if (!response.ok) {
+            throw new Error(await response.text());
         }
     }
 };
@@ -144,9 +156,6 @@ __decorate([
 __decorate([
     target
 ], ToggleSwitchElement.prototype, "errorIcon", void 0);
-__decorate([
-    debounce(300)
-], ToggleSwitchElement.prototype, "submitForm", null);
 ToggleSwitchElement = __decorate([
     controller
 ], ToggleSwitchElement);

data/_sass/@primer/view-components/app/components/primer/alpha/tool_tip.d.ts

@@ -1,7 +1,9 @@
-declare type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw';
+import '@oddbird/popover-polyfill';
+type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw';
 declare class ToolTipElement extends HTMLElement {
     #private;
     styles(): string;
+    get showReason(): "focus" | "mouse";
     get htmlFor(): string;
     set htmlFor(value: string);
     get type(): 'description' | 'label';
@@ -13,7 +15,7 @@ declare class ToolTipElement extends HTMLElement {
     get hiddenFromView(): true | false;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    handleEvent(event: Event): void;
+    handleEvent(event: Event): Promise<void>;
     static observedAttributes: string[];
     attributeChangedCallback(name: string): void;
 }

data/_sass/@primer/view-components/app/components/primer/alpha/tool_tip.js

@@ -9,11 +9,32 @@ 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 _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_update, _ToolTipElement_updateControlReference, _ToolTipElement_updateDirection, _ToolTipElement_updatePosition;
+var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_showReason, _ToolTipElement_update, _ToolTipElement_updateControlReference, _ToolTipElement_updateDirection, _ToolTipElement_updatePosition;
+import '@oddbird/popover-polyfill';
 import { getAnchoredPosition } from '@primer/behaviors';
-const TOOLTIP_OPEN_CLASS = 'tooltip-open';
+const isPopoverOpen = (() => {
+    let selector;
+    function setSelector(el) {
+        try {
+            selector = ':popover-open';
+            return el.matches(selector);
+        }
+        catch {
+            try {
+                selector = ':open';
+                return el.matches(':open');
+            }
+            catch {
+                selector = '.\\:popover-open';
+                return el.matches('.\\:popover-open');
+            }
+        }
+    }
+    return (el) => (selector ? el.matches(selector) : setSelector(el));
+})();
 const TOOLTIP_ARROW_EDGE_OFFSET = 6;
 const TOOLTIP_SR_ONLY_CLASS = 'sr-only';
+const TOOLTIP_OFFSET = 10;
 const DIRECTION_CLASSES = [
     'tooltip-n',
     'tooltip-s',
@@ -22,8 +43,34 @@ const DIRECTION_CLASSES = [
     'tooltip-ne',
     'tooltip-se',
     'tooltip-nw',
-    'tooltip-sw'
+    'tooltip-sw',
 ];
+function closeOpenTooltips(except) {
+    for (const tooltip of openTooltips) {
+        if (tooltip === except)
+            continue;
+        if (isPopoverOpen(tooltip)) {
+            tooltip.hidePopover();
+        }
+        else {
+            openTooltips.delete(tooltip);
+        }
+    }
+}
+function focusOutListener() {
+    closeOpenTooltips();
+}
+function focusInListener(event) {
+    setTimeout(() => {
+        for (const tooltip of openTooltips) {
+            if (isPopoverOpen(tooltip) && tooltip.showReason === 'focus' && tooltip.control !== event.target) {
+                tooltip.hidePopover();
+            }
+        }
+    }, 0);
+}
+const tooltips = new Set();
+const openTooltips = new Set();
 class ToolTipElement extends HTMLElement {
     constructor() {
         super(...arguments);
@@ -32,16 +79,14 @@ class ToolTipElement extends HTMLElement {
         _ToolTipElement_align.set(this, 'center');
         _ToolTipElement_side.set(this, 'outside-bottom');
         _ToolTipElement_allowUpdatePosition.set(this, false);
+        _ToolTipElement_showReason.set(this, 'mouse');
     }
     styles() {
         return `
       :host {
-        position: absolute;
-        z-index: 1000000;
-        padding: .5em .75em;
-        font: normal normal 11px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-        -webkit-font-smoothing: subpixel-antialiased;
-        color: var(--color-fg-on-emphasis);
+        padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed) !important;
+        font: var(--text-body-shorthand-small);
+        color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)) !important;
         text-align: center;
         text-decoration: none;
         text-shadow: none;
@@ -49,30 +94,34 @@ class ToolTipElement extends HTMLElement {
         letter-spacing: normal;
         word-wrap: break-word;
         white-space: pre;
-        background: var(--color-neutral-emphasis-plus);
-        border-radius: 6px;
+        background: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)) !important;
+        border-radius: var(--borderRadius-medium);
+        border: 0 !important;
         opacity: 0;
-        max-width: 250px;
+        max-width: var(--overlay-width-small);
         word-wrap: break-word;
         white-space: normal;
-        width: max-content;
+        width: max-content !important;
+        inset: var(--tool-tip-position-top, 0) auto auto var(--tool-tip-position-left, 0) !important;
+        overflow: visible !important;
+        text-wrap: balance;
       }
 
       :host:before{
         position: absolute;
         z-index: 1000001;
-        color: var(--color-neutral-emphasis-plus);
+        color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
         content: "";
         border: 6px solid transparent;
-        opacity: 0
+        opacity: 0;
       }
 
       @keyframes tooltip-appear {
         from {
-          opacity: 0
+          opacity: 0;
         }
         to {
-          opacity: 1
+          opacity: 1;
         }
       }
 
@@ -82,16 +131,24 @@ class ToolTipElement extends HTMLElement {
         right: 0;
         left: 0;
         height: 12px;
-        content: ""
+        content: "";
+      }
+
+      :host(:popover-open),
+      :host(:popover-open):before {
+        animation-name: tooltip-appear;
+        animation-duration: .1s;
+        animation-fill-mode: forwards;
+        animation-timing-function: ease-in;
       }
 
-      :host(.${TOOLTIP_OPEN_CLASS}),
-      :host(.${TOOLTIP_OPEN_CLASS}):before {
+      :host(.\\:popover-open),
+      :host(.\\:popover-open):before {
         animation-name: tooltip-appear;
         animation-duration: .1s;
         animation-fill-mode: forwards;
         animation-timing-function: ease-in;
-        animation-delay: .4s
+        animation-delay: .4s;
       }
 
       :host(.tooltip-s):before,
@@ -99,62 +156,67 @@ class ToolTipElement extends HTMLElement {
         right: 50%;
         margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
       }
-
       :host(.tooltip-s):before,
       :host(.tooltip-se):before,
       :host(.tooltip-sw):before {
         bottom: 100%;
-        border-bottom-color: var(--color-neutral-emphasis-plus)
+        border-bottom-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
       }
-
       :host(.tooltip-s):after,
       :host(.tooltip-se):after,
       :host(.tooltip-sw):after {
         bottom: 100%
       }
-
       :host(.tooltip-n):before,
       :host(.tooltip-ne):before,
       :host(.tooltip-nw):before {
         top: 100%;
-        border-top-color: var(--color-neutral-emphasis-plus)
+        border-top-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
       }
-
       :host(.tooltip-n):after,
       :host(.tooltip-ne):after,
       :host(.tooltip-nw):after {
-        top: 100%
+        top: 100%;
       }
-
       :host(.tooltip-se):before,
       :host(.tooltip-ne):before {
         left: 0;
         margin-left: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
       }
-
       :host(.tooltip-sw):before,
       :host(.tooltip-nw):before {
         right: 0;
         margin-right: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
       }
-
       :host(.tooltip-w):before {
         top: 50%;
         bottom: 50%;
         left: 100%;
         margin-top: -6px;
-        border-left-color: var(--color-neutral-emphasis-plus)
+        border-left-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
       }
-
       :host(.tooltip-e):before {
         top: 50%;
         right: 100%;
         bottom: 50%;
         margin-top: -6px;
-        border-right-color: var(--color-neutral-emphasis-plus)
+        border-right-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+      }
+
+      @media (forced-colors: active) {
+        :host {
+          outline: solid 1px transparent;
+        }
+
+        :host:before {
+          display: none;
+        }
       }
     `;
     }
+    get showReason() {
+        return __classPrivateFieldGet(this, _ToolTipElement_showReason, "f");
+    }
     get htmlFor() {
         return this.getAttribute('for') || '';
     }
@@ -177,16 +239,21 @@ class ToolTipElement extends HTMLElement {
     get control() {
         return this.ownerDocument.getElementById(this.htmlFor);
     }
+    /* @deprecated */
     set hiddenFromView(value) {
-        this.classList.toggle(TOOLTIP_SR_ONLY_CLASS, value);
-        if (this.isConnected)
-            __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this);
+        if (value && isPopoverOpen(this)) {
+            this.hidePopover();
+        }
+        else if (!value && !isPopoverOpen(this)) {
+            this.showPopover();
+        }
     }
+    /* @deprecated */
     get hiddenFromView() {
-        return this.classList.contains(TOOLTIP_SR_ONLY_CLASS);
+        return !isPopoverOpen(this);
     }
     connectedCallback() {
-        var _a;
+        tooltips.add(this);
         __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateControlReference).call(this);
         __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateDirection).call(this);
         if (!this.shadowRoot) {
@@ -195,44 +262,66 @@ class ToolTipElement extends HTMLElement {
             style.textContent = this.styles();
             shadow.appendChild(document.createElement('slot'));
         }
-        this.hiddenFromView = true;
+        __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this, false);
         __classPrivateFieldSet(this, _ToolTipElement_allowUpdatePosition, true, "f");
         if (!this.control)
             return;
         this.setAttribute('role', 'tooltip');
-        (_a = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")?.abort();
         __classPrivateFieldSet(this, _ToolTipElement_abortController, new AbortController(), "f");
         const { signal } = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f");
         this.addEventListener('mouseleave', this, { signal });
+        this.addEventListener('toggle', this, { signal });
         this.control.addEventListener('mouseenter', this, { signal });
         this.control.addEventListener('mouseleave', this, { signal });
         this.control.addEventListener('focus', this, { signal });
-        this.control.addEventListener('blur', this, { signal });
-        this.ownerDocument.addEventListener('keydown', this, { signal });
-        __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this);
+        this.control.addEventListener('mousedown', this, { signal });
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore popoverTargetElement is not in the type definition
+        this.control.popoverTargetElement?.addEventListener('beforetoggle', this, {
+            signal,
+        });
+        this.ownerDocument.addEventListener('focusout', focusOutListener);
+        this.ownerDocument.addEventListener('focusin', focusInListener);
+        this.ownerDocument.addEventListener('keydown', this, { signal, capture: true });
     }
     disconnectedCallback() {
-        var _a;
-        (_a = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        tooltips.delete(this);
+        openTooltips.delete(this);
+        __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")?.abort();
     }
-    handleEvent(event) {
+    async handleEvent(event) {
         if (!this.control)
             return;
+        const showing = isPopoverOpen(this);
         // Ensures that tooltip stays open when hovering between tooltip and element
         // WCAG Success Criterion 1.4.13 Hoverable
-        if ((event.type === 'mouseenter' || event.type === 'focus') && this.hiddenFromView) {
-            this.hiddenFromView = false;
+        const shouldShow = event.type === 'mouseenter' ||
+            // Only show tooltip on focus if running in headless browser (for tests) or if focus ring
+            // is visible (i.e. if user is using keyboard navigation)
+            (event.type === 'focus' && (navigator.webdriver || this.control.matches(':focus-visible')));
+        const isMouseLeaveFromButton = event.type === 'mouseleave' &&
+            event.relatedTarget !== this.control &&
+            event.relatedTarget !== this;
+        const isEscapeKeydown = event.type === 'keydown' && event.key === 'Escape';
+        const isMouseDownOnButton = event.type === 'mousedown' && event.currentTarget === this.control;
+        const isOpeningOtherPopover = event.type === 'beforetoggle' && event.currentTarget !== this;
+        const shouldHide = isMouseLeaveFromButton || isEscapeKeydown || isMouseDownOnButton || isOpeningOtherPopover;
+        if (showing && isEscapeKeydown) {
+            /* eslint-disable-next-line no-restricted-syntax */
+            event.stopImmediatePropagation();
+            event.preventDefault();
         }
-        else if (event.type === 'blur') {
-            this.hiddenFromView = true;
+        await Promise.resolve();
+        if (!showing && shouldShow && !isPopoverOpen(this)) {
+            __classPrivateFieldSet(this, _ToolTipElement_showReason, event.type === 'mouseenter' ? 'mouse' : 'focus', "f");
+            this.showPopover();
         }
-        else if (event.type === 'mouseleave' &&
-            event.relatedTarget !== this.control &&
-            event.relatedTarget !== this) {
-            this.hiddenFromView = true;
+        else if (showing && shouldHide && isPopoverOpen(this)) {
+            this.hidePopover();
         }
-        else if (event.type === 'keydown' && event.key === 'Escape' && !this.hiddenFromView) {
-            this.hiddenFromView = true;
+        if (event.type === 'toggle') {
+            __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this, event.newState === 'open');
         }
     }
     attributeChangedCallback(name) {
@@ -246,17 +335,17 @@ class ToolTipElement extends HTMLElement {
         }
     }
 }
-_ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new WeakMap(), _ToolTipElement_side = new WeakMap(), _ToolTipElement_allowUpdatePosition = new WeakMap(), _ToolTipElement_instances = new WeakSet(), _ToolTipElement_update = function _ToolTipElement_update() {
-    if (this.hiddenFromView) {
-        this.classList.remove(TOOLTIP_OPEN_CLASS, ...DIRECTION_CLASSES);
+_ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new WeakMap(), _ToolTipElement_side = new WeakMap(), _ToolTipElement_allowUpdatePosition = new WeakMap(), _ToolTipElement_showReason = new WeakMap(), _ToolTipElement_instances = new WeakSet(), _ToolTipElement_update = function _ToolTipElement_update(isOpen) {
+    if (isOpen) {
+        openTooltips.add(this);
+        this.classList.remove(TOOLTIP_SR_ONLY_CLASS);
+        closeOpenTooltips(this);
+        __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updatePosition).call(this);
     }
     else {
-        this.classList.add(TOOLTIP_OPEN_CLASS);
-        for (const tooltip of this.ownerDocument.querySelectorAll(this.tagName)) {
-            if (tooltip !== this)
-                tooltip.hiddenFromView = true;
-        }
-        __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updatePosition).call(this);
+        openTooltips.delete(this);
+        this.classList.remove(...DIRECTION_CLASSES);
+        this.classList.add(TOOLTIP_SR_ONLY_CLASS);
     }
 }, _ToolTipElement_updateControlReference = function _ToolTipElement_updateControlReference() {
     if (!this.id || !this.control)
@@ -331,19 +420,17 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
 }, _ToolTipElement_updatePosition = function _ToolTipElement_updatePosition() {
     if (!this.control)
         return;
-    if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || this.hiddenFromView)
+    if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || !isPopoverOpen(this))
         return;
-    const TOOLTIP_OFFSET = 10;
-    this.style.left = `0px`; // Ensures we have reliable tooltip width in `getAnchoredPosition`
     const position = getAnchoredPosition(this, this.control, {
         side: __classPrivateFieldGet(this, _ToolTipElement_side, "f"),
         align: __classPrivateFieldGet(this, _ToolTipElement_align, "f"),
-        anchorOffset: TOOLTIP_OFFSET
+        anchorOffset: TOOLTIP_OFFSET,
     });
     const anchorSide = position.anchorSide;
     const align = position.anchorAlign;
-    this.style.top = `${position.top}px`;
-    this.style.left = `${position.left}px`;
+    this.style.setProperty('--tool-tip-position-top', `${position.top}px`);
+    this.style.setProperty('--tool-tip-position-left', `${position.left}px`);
     let direction = 's';
     if (anchorSide === 'outside-left') {
         direction = 'w';

data/_sass/@primer/view-components/app/components/primer/alpha/underline_nav.css

@@ -1 +1 @@
-.UnderlineNav{-webkit-overflow-scrolling:auto;box-shadow:inset 0 -1px 0 var(--color-border-muted);display:flex;justify-content:space-between;min-height:var(--base-size-48,48px);overflow-x:auto;overflow-y:hidden}.UnderlineNav .Counter{background-color:var(--color-neutral-muted);color:var(--color-fg-default);margin-left:var(--control-medium-gap,8px)}.UnderlineNav .Counter--primary{background-color:var(--color-neutral-emphasis);color:var(--color-fg-on-emphasis)}.UnderlineNav-body{align-items:center;display:flex;gap:var(--control-medium-gap,8px);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--borderRadius-medium,6px);color:var(--color-fg-default);cursor:pointer;display:flex;font-size:var(--text-body-size-medium,14px);line-height:30px;padding:0 var(--control-medium-paddingInline-condensed,8px);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--color-neutral-muted);color:var(--color-fg-default);outline-offset:-2px;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,600);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(--color-action-list-item-default-hover-bg);color:var(--color-fg-default);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(--color-primer-border-active);color:var(--color-fg-default);font-weight:var(--base-text-weight-semibold,600)}.UnderlineNav-item.selected:after,.UnderlineNav-item[aria-current]:not([aria-current=false]):after,.UnderlineNav-item[role=tab][aria-selected=true]:after{background:var(--color-primer-border-active);border-radius:var(--borderRadius-medium,6px);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,48px)}.UnderlineNav-octicon{fill:var(--color-fg-muted);color:var(--color-fg-muted);display:inline!important;margin-right:var(--control-medium-gap,8px)}.UnderlineNav-container{display:flex;justify-content:space-between}
+.UnderlineNav{box-shadow:inset 0 -1px 0 var(--borderColor-muted,var(--color-border-muted));display:flex;min-height:var(--base-size-48,3rem);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,var(--color-fg-default));margin-left:var(--control-medium-gap,.5rem)}.UnderlineNav .Counter--primary{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.UnderlineNav-body{align-items:center;display:flex;gap:var(--control-medium-gap,.5rem);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;display:flex;font-size:var(--text-body-size-medium,.875rem);line-height:30px;padding:0 var(--control-medium-paddingInline-condensed,.5rem);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,var(--color-neutral-muted));color:var(--fgColor-default,var(--color-fg-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,600);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,var(--color-action-list-item-default-hover-bg));color:var(--fgColor-default,var(--color-fg-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,var(--color-primer-border-active));color:var(--fgColor-default,var(--color-fg-default));font-weight:var(--base-text-weight-semibold,600)}.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,var(--color-primer-border-active));border-radius:var(--borderRadius-medium,.375rem);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,3rem)}.UnderlineNav-octicon{color:var(--fgColor-muted,var(--color-fg-muted));display:inline!important;margin-right:var(--control-medium-gap,.5rem);fill:var(--fgColor-muted,var(--color-fg-muted))}.UnderlineNav-container{display:flex;justify-content:space-between}

data/_sass/@primer/view-components/app/components/primer/alpha/x_banner.d.ts

@@ -1,7 +1,9 @@
 declare class XBannerElement extends HTMLElement {
+    #private;
     titleText: HTMLElement;
     dismiss(): void;
-    private shouldReappear;
+    show(): void;
+    hide(): void;
 }
 declare global {
     interface Window {