primer_view_components 0.3.1 → 0.4.0

data/app/components/primer/alpha/tool_tip.js

@@ -10,10 +10,11 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     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;
+import '@oddbird/popover-polyfill';
 import { getAnchoredPosition } from '@primer/behaviors';
-const TOOLTIP_OPEN_CLASS = 'tooltip-open';
 const TOOLTIP_ARROW_EDGE_OFFSET = 6;
 const TOOLTIP_SR_ONLY_CLASS = 'sr-only';
+const TOOLTIP_OFFSET = 10;
 const DIRECTION_CLASSES = [
     'tooltip-n',
     'tooltip-s',
@@ -24,6 +25,23 @@ const DIRECTION_CLASSES = [
     'tooltip-nw',
     'tooltip-sw'
 ];
+function closeOpenTooltips(except) {
+    for (const tooltip of openTooltips) {
+        if (tooltip === except)
+            continue;
+        if (tooltip.matches(':popover-open')) {
+            tooltip.hidePopover();
+        }
+        else {
+            openTooltips.delete(tooltip);
+        }
+    }
+}
+function focusOutListener() {
+    closeOpenTooltips();
+}
+const tooltips = new Set();
+const openTooltips = new Set();
 class ToolTipElement extends HTMLElement {
     constructor() {
         super(...arguments);
@@ -36,12 +54,10 @@ class ToolTipElement extends HTMLElement {
     styles() {
         return `
       :host {
-        position: absolute;
-        z-index: 1000000;
-        padding: .5em .75em;
+        padding: .5em .75em !important;
         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);
+        color: var(--color-fg-on-emphasis) !important;
         text-align: center;
         text-decoration: none;
         text-shadow: none;
@@ -49,13 +65,16 @@ class ToolTipElement extends HTMLElement {
         letter-spacing: normal;
         word-wrap: break-word;
         white-space: pre;
-        background: var(--color-neutral-emphasis-plus);
+        background: var(--color-neutral-emphasis-plus) !important;
         border-radius: 6px;
+        border: 0 !important;
         opacity: 0;
         max-width: 250px;
         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;
       }
 
       :host:before{
@@ -69,7 +88,7 @@ class ToolTipElement extends HTMLElement {
 
       @keyframes tooltip-appear {
         from {
-          opacity: 0
+          opacity: 0;
         }
         to {
           opacity: 1
@@ -85,8 +104,17 @@ class ToolTipElement extends HTMLElement {
         content: ""
       }
 
-      :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
+      }
+
+      :host(.\\:popover-open),
+      :host(.\\:popover-open):before {
         animation-name: tooltip-appear;
         animation-duration: .1s;
         animation-fill-mode: forwards;
@@ -177,16 +205,22 @@ 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 && this.matches(':popover-open')) {
+            this.hidePopover();
+        }
+        else if (!value && !this.matches(':popover-open')) {
+            this.showPopover();
+        }
     }
+    /* @deprecated */
     get hiddenFromView() {
-        return this.classList.contains(TOOLTIP_SR_ONLY_CLASS);
+        return !this.matches(':popover-open');
     }
     connectedCallback() {
-        var _a;
+        var _a, _b;
+        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,7 +229,7 @@ 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;
@@ -204,35 +238,48 @@ class ToolTipElement extends HTMLElement {
         __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.control.addEventListener('mousedown', this, { signal });
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore popoverTargetElement is not in the type definition
+        (_b = this.control.popoverTargetElement) === null || _b === void 0 ? void 0 : _b.addEventListener('beforetoggle', this, {
+            signal
+        });
+        this.ownerDocument.addEventListener('focusout', focusOutListener);
         this.ownerDocument.addEventListener('keydown', this, { signal });
-        __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this);
     }
     disconnectedCallback() {
         var _a;
+        tooltips.delete(this);
+        openTooltips.delete(this);
         (_a = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
     }
-    handleEvent(event) {
+    async handleEvent(event) {
         if (!this.control)
             return;
+        const showing = this.matches(':popover-open');
         // 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;
-        }
-        else if (event.type === 'blur') {
-            this.hiddenFromView = true;
-        }
-        else if (event.type === 'mouseleave' &&
+        const shouldShow = event.type === 'mouseenter' || event.type === 'focus';
+        const isMouseLeaveFromButton = event.type === 'mouseleave' &&
             event.relatedTarget !== this.control &&
-            event.relatedTarget !== this) {
-            this.hiddenFromView = true;
+            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;
+        await Promise.resolve();
+        if (!showing && shouldShow) {
+            this.showPopover();
+        }
+        else if (showing && shouldHide) {
+            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 +293,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_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,10 +378,8 @@ _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") || !this.matches(':popover-open'))
         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"),
@@ -342,8 +387,8 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
     });
     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/app/components/primer/alpha/tool_tip.ts

@@ -1,9 +1,10 @@
 import type {AnchorAlignment, AnchorSide} from '@primer/behaviors'
+import '@oddbird/popover-polyfill'
 import {getAnchoredPosition} from '@primer/behaviors'
 
-const TOOLTIP_OPEN_CLASS = 'tooltip-open'
 const TOOLTIP_ARROW_EDGE_OFFSET = 6
 const TOOLTIP_SR_ONLY_CLASS = 'sr-only'
+const TOOLTIP_OFFSET = 10
 
 type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw'
 
@@ -18,16 +19,31 @@ const DIRECTION_CLASSES = [
   'tooltip-sw'
 ]
 
+function closeOpenTooltips(except?: Element) {
+  for (const tooltip of openTooltips) {
+    if (tooltip === except) continue
+    if (tooltip.matches(':popover-open')) {
+      tooltip.hidePopover()
+    } else {
+      openTooltips.delete(tooltip)
+    }
+  }
+}
+
+function focusOutListener() {
+  closeOpenTooltips()
+}
+
+const tooltips = new Set<ToolTipElement>()
+const openTooltips = new Set<ToolTipElement>()
 class ToolTipElement extends HTMLElement {
   styles() {
     return `
       :host {
-        position: absolute;
-        z-index: 1000000;
-        padding: .5em .75em;
+        padding: .5em .75em !important;
         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);
+        color: var(--color-fg-on-emphasis) !important;
         text-align: center;
         text-decoration: none;
         text-shadow: none;
@@ -35,13 +51,16 @@ class ToolTipElement extends HTMLElement {
         letter-spacing: normal;
         word-wrap: break-word;
         white-space: pre;
-        background: var(--color-neutral-emphasis-plus);
+        background: var(--color-neutral-emphasis-plus) !important;
         border-radius: 6px;
+        border: 0 !important;
         opacity: 0;
         max-width: 250px;
         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;
       }
 
       :host:before{
@@ -55,7 +74,7 @@ class ToolTipElement extends HTMLElement {
 
       @keyframes tooltip-appear {
         from {
-          opacity: 0
+          opacity: 0;
         }
         to {
           opacity: 1
@@ -71,8 +90,17 @@ class ToolTipElement extends HTMLElement {
         content: ""
       }
 
-      :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
+      }
+
+      :host(.\\:popover-open),
+      :host(.\\:popover-open):before {
         animation-name: tooltip-appear;
         animation-duration: .1s;
         animation-fill-mode: forwards;
@@ -176,16 +204,22 @@ class ToolTipElement extends HTMLElement {
     return this.ownerDocument.getElementById(this.htmlFor)
   }
 
+  /* @deprecated */
   set hiddenFromView(value: true | false) {
-    this.classList.toggle(TOOLTIP_SR_ONLY_CLASS, value)
-    if (this.isConnected) this.#update()
+    if (value && this.matches(':popover-open')) {
+      this.hidePopover()
+    } else if (!value && !this.matches(':popover-open')) {
+      this.showPopover()
+    }
   }
 
+  /* @deprecated */
   get hiddenFromView() {
-    return this.classList.contains(TOOLTIP_SR_ONLY_CLASS)
+    return !this.matches(':popover-open')
   }
 
   connectedCallback() {
+    tooltips.add(this)
     this.#updateControlReference()
     this.#updateDirection()
     if (!this.shadowRoot) {
@@ -194,7 +228,7 @@ class ToolTipElement extends HTMLElement {
       style.textContent = this.styles()
       shadow.appendChild(document.createElement('slot'))
     }
-    this.hiddenFromView = true
+    this.#update(false)
     this.#allowUpdatePosition = true
 
     if (!this.control) return
@@ -206,49 +240,66 @@ class ToolTipElement extends HTMLElement {
     const {signal} = this.#abortController
 
     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.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('keydown', this, {signal})
-    this.#update()
   }
 
   disconnectedCallback() {
+    tooltips.delete(this)
+    openTooltips.delete(this)
     this.#abortController?.abort()
   }
 
-  handleEvent(event: Event) {
+  async handleEvent(event: Event) {
     if (!this.control) return
+    const showing = this.matches(':popover-open')
 
     // 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
-    } else if (event.type === 'blur') {
-      this.hiddenFromView = true
-    } else if (
+    const shouldShow = event.type === 'mouseenter' || event.type === 'focus'
+    const isMouseLeaveFromButton =
       event.type === 'mouseleave' &&
       (event as MouseEvent).relatedTarget !== this.control &&
       (event as MouseEvent).relatedTarget !== this
-    ) {
-      this.hiddenFromView = true
-    } else if (event.type === 'keydown' && (event as KeyboardEvent).key === 'Escape' && !this.hiddenFromView) {
-      this.hiddenFromView = true
+    const isEscapeKeydown = event.type === 'keydown' && (event as KeyboardEvent).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
+
+    await Promise.resolve()
+    if (!showing && shouldShow) {
+      this.showPopover()
+    } else if (showing && shouldHide) {
+      this.hidePopover()
+    }
+
+    if (event.type === 'toggle') {
+      this.#update((event as ToggleEvent).newState === 'open')
     }
   }
 
   static observedAttributes = ['data-type', 'data-direction', 'id']
 
-  #update() {
-    if (this.hiddenFromView) {
-      this.classList.remove(TOOLTIP_OPEN_CLASS, ...DIRECTION_CLASSES)
-    } else {
-      this.classList.add(TOOLTIP_OPEN_CLASS)
-      for (const tooltip of this.ownerDocument.querySelectorAll<ToolTipElement>(this.tagName)) {
-        if (tooltip !== this) tooltip.hiddenFromView = true
-      }
+  #update(isOpen: boolean) {
+    if (isOpen) {
+      openTooltips.add(this)
+      this.classList.remove(TOOLTIP_SR_ONLY_CLASS)
+      closeOpenTooltips(this)
       this.#updatePosition()
+    } else {
+      openTooltips.delete(this)
+      this.classList.remove(...DIRECTION_CLASSES)
+      this.classList.add(TOOLTIP_SR_ONLY_CLASS)
     }
   }
 
@@ -326,11 +377,7 @@ class ToolTipElement extends HTMLElement {
 
   #updatePosition() {
     if (!this.control) return
-    if (!this.#allowUpdatePosition || this.hiddenFromView) return
-
-    const TOOLTIP_OFFSET = 10
-
-    this.style.left = `0px` // Ensures we have reliable tooltip width in `getAnchoredPosition`
+    if (!this.#allowUpdatePosition || !this.matches(':popover-open')) return
 
     const position = getAnchoredPosition(this, this.control, {
       side: this.#side,
@@ -340,8 +387,8 @@ class ToolTipElement extends HTMLElement {
     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: Direction = 's'
 

data/app/components/primer/alpha/tooltip.rb

@@ -110,6 +110,7 @@ module Primer
         @system_arguments[:id] ||= self.class.generate_id
         @system_arguments[:tag] = :"tool-tip"
         @system_arguments[:for] = for_id
+        @system_arguments[:popover] = "manual"
         @system_arguments[:classes] = class_names(
           @system_arguments[:classes],
           "sr-only"

data/app/components/primer/beta/link.css

@@ -1 +1 @@
-.Link{color:var(--color-accent-fg)}.Link:hover{cursor:pointer;text-decoration:underline}.Link:focus,.Link:focus-visible{outline-offset:0}.Link--primary{color:var(--color-fg-default)!important}.Link--primary:hover{color:var(--color-accent-fg)!important}.Link--secondary{color:var(--color-fg-muted)!important}.Link--secondary:hover{color:var(--color-accent-fg)!important}.Link--muted{color:var(--color-fg-muted)!important}.Link--muted:hover{text-decoration:none}.Link--muted:hover,.Link--onHover:hover{color:var(--color-accent-fg)!important}.Link--onHover:hover{cursor:pointer;text-decoration:underline}.Link--muted:hover [class*=color-fg],.Link--primary:hover [class*=color-fg],.Link--secondary:hover [class*=color-fg]{color:inherit!important}
+.Link{color:var(--color-accent-fg)}.Link:hover{cursor:pointer}.Link:focus,.Link:hover{text-decoration:underline}.Link:focus,.Link:focus-visible{outline-offset:0}.Link--primary{color:var(--color-fg-default)!important}.Link--primary:hover{color:var(--color-accent-fg)!important}.Link--secondary{color:var(--color-fg-muted)!important}.Link--secondary:hover{color:var(--color-accent-fg)!important}.Link--muted{color:var(--color-fg-muted)!important}.Link--muted:hover{text-decoration:none}.Link--muted:hover,.Link--onHover:hover{color:var(--color-accent-fg)!important}.Link--onHover:hover{cursor:pointer;text-decoration:underline}.Link--muted:hover [class*=color-fg],.Link--primary:hover [class*=color-fg],.Link--secondary:hover [class*=color-fg]{color:inherit!important}

data/app/components/primer/beta/link.css.map

@@ -1 +1 @@
-{"version":3,"sources":["link.pcss"],"names":[],"mappings":"AAEA,MACE,4BAWF,CATE,YAEE,cAAe,CADf,yBAEF,CAEA,gCAEE,gBACF,CAGF,eACE,uCAKF,CAHE,qBACE,sCACF,CAGF,iBACE,qCAKF,CAHE,uBACE,sCACF,CAGF,aACE,qCAMF,CAJE,mBAEE,oBACF,CAMA,wCARE,sCAYF,CAJA,qBAGE,cAAe,CADf,yBAEF,CAQA,qHACE,uBACF","file":"link.css","sourcesContent":["/* Links */\n\n.Link {\n  color: var(--color-accent-fg);\n\n  &:hover {\n    text-decoration: underline;\n    cursor: pointer;\n  }\n\n  &:focus,\n  &:focus-visible {\n    outline-offset: 0;\n  }\n}\n\n.Link--primary {\n  color: var(--color-fg-default) !important;\n\n  &:hover {\n    color: var(--color-accent-fg) !important;\n  }\n}\n\n.Link--secondary {\n  color: var(--color-fg-muted) !important;\n\n  &:hover {\n    color: var(--color-accent-fg) !important;\n  }\n}\n\n.Link--muted {\n  color: var(--color-fg-muted) !important;\n\n  &:hover {\n    color: var(--color-accent-fg) !important;\n    text-decoration: none;\n  }\n}\n\n/* Set the link color only on hover\n   Useful when you want only part of a link to turn blue on hover */\n.Link--onHover {\n  &:hover {\n    color: var(--color-accent-fg) !important;\n    text-decoration: underline;\n    cursor: pointer;\n  }\n}\n\n/* When using a color utility class inside of a link class\n   color should change with link on hover. */\n.Link--secondary,\n.Link--primary,\n.Link--muted {\n  &:hover [class*='color-fg'] {\n    color: inherit !important;\n  }\n}\n"]}
+{"version":3,"sources":["link.pcss"],"names":[],"mappings":"AAEA,MACE,4BAeF,CAbE,YAEE,cACF,CAEA,wBAJE,yBAMF,CAEA,gCAEE,gBACF,CAGF,eACE,uCAKF,CAHE,qBACE,sCACF,CAGF,iBACE,qCAKF,CAHE,uBACE,sCACF,CAGF,aACE,qCAMF,CAJE,mBAEE,oBACF,CAMA,wCARE,sCAYF,CAJA,qBAGE,cAAe,CADf,yBAEF,CAQA,qHACE,uBACF","file":"link.css","sourcesContent":["/* Links */\n\n.Link {\n  color: var(--color-accent-fg);\n\n  &:hover {\n    text-decoration: underline;\n    cursor: pointer;\n  }\n\n  &:focus {\n    text-decoration: underline;\n  }\n\n  &:focus,\n  &:focus-visible {\n    outline-offset: 0;\n  }\n}\n\n.Link--primary {\n  color: var(--color-fg-default) !important;\n\n  &:hover {\n    color: var(--color-accent-fg) !important;\n  }\n}\n\n.Link--secondary {\n  color: var(--color-fg-muted) !important;\n\n  &:hover {\n    color: var(--color-accent-fg) !important;\n  }\n}\n\n.Link--muted {\n  color: var(--color-fg-muted) !important;\n\n  &:hover {\n    color: var(--color-accent-fg) !important;\n    text-decoration: none;\n  }\n}\n\n/* Set the link color only on hover\n   Useful when you want only part of a link to turn blue on hover */\n.Link--onHover {\n  &:hover {\n    color: var(--color-accent-fg) !important;\n    text-decoration: underline;\n    cursor: pointer;\n  }\n}\n\n/* When using a color utility class inside of a link class\n   color should change with link on hover. */\n.Link--secondary,\n.Link--primary,\n.Link--muted {\n  &:hover [class*='color-fg'] {\n    color: inherit !important;\n  }\n}\n"]}

data/app/components/primer/beta/link.pcss

@@ -8,6 +8,10 @@
     cursor: pointer;
   }
 
+  &:focus {
+    text-decoration: underline;
+  }
+
   &:focus,
   &:focus-visible {
     outline-offset: 0;

data/app/components/primer/beta/link.rb

@@ -13,9 +13,6 @@ module Primer
         :secondary => "Link--secondary"
       }.freeze
 
-      DEFAULT_TAG = :a
-      TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
-
       # `Tooltip` that appears on mouse hover or keyboard focus over the link. Use tooltips sparingly and as a last resort.
       # **Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be more appropriate.
       # The tooltip will appear adjacent to the anchor element. Both the tooltip and the anchor will be nested
@@ -55,30 +52,29 @@ module Primer
       #       Link
       #     <% end %>
       #
-      # @param tag [String]  <%= one_of(Primer::Beta::Link::TAG_OPTIONS) %>
-      # @param href [String] URL to be used for the Link. Required if tag is `:a`. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered.
+      # @param href [String] URL to be used for the Link. Required. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered.
       # @param scheme [Symbol] <%= one_of(Primer::Beta::Link::SCHEME_MAPPINGS.keys) %>
       # @param muted [Boolean] Uses light gray for Link color, and blue on hover.
       # @param underline [Boolean] Whether or not to underline the link.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(href: nil, tag: DEFAULT_TAG, scheme: DEFAULT_SCHEME, muted: false, underline: true, **system_arguments)
-        @system_arguments = system_arguments
+      def initialize(href: nil, scheme: DEFAULT_SCHEME, muted: false, underline: true, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
 
         @id = @system_arguments[:id]
 
-        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
+        @system_arguments[:tag] = :a
         @system_arguments[:href] = href
         @system_arguments[:classes] = class_names(
           @system_arguments[:classes],
           SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)],
-          "Link" => tag == :span,
+          "Link",
           "Link--muted" => muted,
           "no-underline" => !underline
         )
       end
 
       def before_render
-        raise ArgumentError, "href is required when using <a> tag" if @system_arguments[:tag] == :a && @system_arguments[:href].nil? && !Rails.env.production?
+        raise ArgumentError, "href is required" if @system_arguments[:href].nil? && !Rails.env.production?
       end
 
       def call

data/app/components/primer/primer.d.ts

@@ -1,5 +1,6 @@
 import '@github/include-fragment-element';
 import '@oddbird/popover-polyfill';
+import './alpha/action_bar_element';
 import './alpha/dropdown';
 import './anchored_position';
 import './focus_group';

data/app/components/primer/primer.js

@@ -1,5 +1,6 @@
 import '@github/include-fragment-element';
 import '@oddbird/popover-polyfill';
+import './alpha/action_bar_element';
 import './alpha/dropdown';
 import './anchored_position';
 import './focus_group';

data/app/components/primer/primer.pcss

@@ -39,3 +39,4 @@
 /* to be renamed */
 @import "./beta/timeline_item.pcss";
 @import "./truncate.pcss";
+@import "./alpha/action_bar.pcss";

data/app/components/primer/primer.ts

@@ -1,5 +1,6 @@
 import '@github/include-fragment-element'
 import '@oddbird/popover-polyfill'
+import './alpha/action_bar_element'
 import './alpha/dropdown'
 import './anchored_position'
 import './focus_group'

data/lib/primer/static/generate_previews.rb

@@ -33,9 +33,18 @@ module Primer
                 scenarios = parent_scenario.type == :scenario_group ? parent_scenario.scenarios : [parent_scenario]
 
                 scenarios.map do |scenario|
+                  snapshot_tag = scenario.tags.find { |tag| tag.tag_name == "snapshot" }
+                  snapshot = if snapshot_tag.nil?
+                               "false"
+                             elsif snapshot_tag.text.blank?
+                               "true"
+                             else
+                               snapshot_tag.text
+                             end
                   {
                     preview_path: scenario.lookup_path,
                     name: scenario.name,
+                    snapshot: snapshot,
                     skip_rules: Primer::Accessibility.axe_rules_to_skip(
                       component: component,
                       scenario_name: scenario.name

data/lib/primer/view_components/linters/tooltipped_migration.rb

@@ -10,9 +10,7 @@ module ERBLint
           include LinterRegistry
           include Helpers::RuleHelpers
 
-          MIGRATE_TO_NEWER_TOOLTIP = ".tooltipped has been deprecated. Tooltip should never be set on a non-interactive element (e.g. <span>, <div>, <li>). " \
-            "Find alternatives in https://primer.style/design/guides/accessibility/tooltip-alternatives/. " \
-            "If you're setting a tooltip on an interactive element, use the latest tooltip in https://primer.style/view-components."
+          MIGRATE_TO_NEWER_TOOLTIP = ".tooltipped has been deprecated. There are major accessibility concerns with using this tooltip so please take action. See https://github.com/primer/view_components/blob/main/docs/content/guides/accessibility/tooltipped_migration.md."
           TOOLTIPPED_RUBY_PATTERN = /classes:.*tooltipped|class:.*tooltipped/.freeze
 
           def run(processed_source)

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 3
-      PATCH = 1
+      MINOR = 4
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end