primer_view_components 0.29.0 → 0.31.0

data/app/components/primer/alpha/select_panel_element.ts

@@ -11,7 +11,6 @@ type SelectedItem = {
   label: string | null | undefined
   value: string | null | undefined
   inputName: string | null | undefined
-  element: SelectPanelItem
 }
 
 const validSelectors = ['[role="option"]']
@@ -54,6 +53,7 @@ const updateWhenVisible = (() => {
     })
     resizeObserver.observe(el.ownerDocument.documentElement)
     el.addEventListener('dialog:close', () => {
+      el.invokerElement?.setAttribute('aria-expanded', 'false')
       anchors.delete(el)
     })
     el.addEventListener('dialog:open', () => {
@@ -84,6 +84,7 @@ export class SelectPanelElement extends HTMLElement {
   #selectedItems: Map<string, SelectedItem> = new Map()
   #loadingDelayTimeoutId: number | null = null
   #loadingAnnouncementTimeoutId: number | null = null
+  #hasLoadedData = false
 
   get open(): boolean {
     return this.dialog.open
@@ -215,6 +216,17 @@ export class SelectPanelElement extends HTMLElement {
       for (const entry of entries) {
         const elem = entry.target
         if (entry.isIntersecting && elem === this.dialog) {
+          // Focus on the filter input when the dialog opens to work around a Safari limitation
+          // that prevents the autofocus attribute from working as it does in other browsers
+          if (this.filterInputTextField) {
+            if (document.activeElement !== this.filterInputTextField) {
+              this.filterInputTextField.focus()
+            }
+          }
+
+          // signal that any focus hijinks are finished (thanks Safari)
+          this.dialog.setAttribute('data-ready', 'true')
+
           this.updateAnchorPosition()
 
           if (this.#fetchStrategy === FetchStrategy.LOCAL) {
@@ -227,12 +239,12 @@ export class SelectPanelElement extends HTMLElement {
     this.#waitForCondition(
       () => Boolean(this.dialog),
       () => {
+        this.#dialogIntersectionObserver.observe(this.dialog)
+        this.dialog.addEventListener('close', this, {signal})
+
         if (this.getAttribute('data-open-on-load') === 'true') {
           this.show()
         }
-
-        this.#dialogIntersectionObserver.observe(this.dialog)
-        this.dialog.addEventListener('close', this, {signal})
       },
     )
 
@@ -295,7 +307,7 @@ export class SelectPanelElement extends HTMLElement {
         }
 
         // <li> elements should not themselves be tabbable
-        item.setAttribute('tabindex', '-1')
+        item.removeAttribute('tabindex')
       }
     } else {
       for (const item of this.items) {
@@ -309,7 +321,7 @@ export class SelectPanelElement extends HTMLElement {
         }
 
         // <li> elements should not themselves be tabbable
-        item.setAttribute('tabindex', '-1')
+        item.removeAttribute('tabindex')
       }
     }
 
@@ -369,6 +381,7 @@ export class SelectPanelElement extends HTMLElement {
         }
       }
     }
+
     this.#updateInput()
   }
 
@@ -383,14 +396,15 @@ export class SelectPanelElement extends HTMLElement {
         value,
         label: itemContent.querySelector('.ActionListItem-label')?.textContent?.trim(),
         inputName: itemContent.getAttribute('data-input-name'),
-        element: item,
       })
     }
   }
 
-  #removeSelectedItem(item: Element) {
-    const value = item.getAttribute('data-value')
+  #removeSelectedItem(item: SelectPanelItem) {
+    const itemContent = this.#getItemContent(item)
+    if (!itemContent) return
 
+    const value = itemContent.getAttribute('data-value')
     if (value) {
       this.#selectedItems.delete(value)
     }
@@ -450,6 +464,10 @@ export class SelectPanelElement extends HTMLElement {
     }
 
     if (event.target === this.dialog && event.type === 'close') {
+      // Remove data-ready so it can be set the next time the panel is opened
+      this.dialog.removeAttribute('data-ready')
+      this.invokerElement?.setAttribute('aria-expanded', 'false')
+
       this.dispatchEvent(
         new CustomEvent('panelClosed', {
           detail: {panel: this},
@@ -606,12 +624,41 @@ export class SelectPanelElement extends HTMLElement {
   }
 
   #handleSearchFieldEvent(event: Event) {
-    if (event.type === 'keydown' && (event as KeyboardEvent).key === 'ArrowDown') {
-      if (this.focusableItem) {
-        this.focusableItem.focus()
-        event.preventDefault()
+    if (event.type === 'keydown') {
+      const key = (event as KeyboardEvent).key
+
+      if (key === 'Enter') {
+        const item = this.visibleItems[0] as HTMLLIElement | null
+
+        if (item) {
+          const itemContent = this.#getItemContent(item)
+          if (itemContent) itemContent.click()
+        }
+      } else if (key === 'ArrowDown') {
+        const item = (this.focusableItem || this.#getItemContent(this.visibleItems[0])) as HTMLLIElement
+
+        if (item) {
+          item.focus()
+          event.preventDefault()
+        }
+      } else if (key === 'Home') {
+        const item = this.visibleItems[0] as HTMLLIElement | null
+
+        if (item) {
+          const itemContent = this.#getItemContent(item)
+          if (itemContent) itemContent.focus()
+          event.preventDefault()
+        }
+      } else if (key === 'End') {
+        if (this.visibleItems.length > 0) {
+          const item = this.visibleItems[this.visibleItems.length - 1] as HTMLLIElement
+          const itemContent = this.#getItemContent(item)
+          if (itemContent) itemContent.focus()
+          event.preventDefault()
+        }
       }
     }
+
     if (event.type !== 'input') return
 
     // remote-input-element does not trigger another loadstart event if a request is
@@ -660,8 +707,12 @@ export class SelectPanelElement extends HTMLElement {
       if (!itemContent) continue
 
       const value = itemContent.getAttribute('data-value')
-
-      if (value && !this.#selectedItems.has(value) && this.isItemChecked(item)) {
+      if (this.#hasLoadedData) {
+        if (value && !this.#selectedItems.has(value)) {
+          itemContent.setAttribute(this.ariaSelectionType, 'false')
+        }
+      } else if (value && !this.#selectedItems.has(value) && this.isItemChecked(item)) {
+        this.#hasLoadedData = true
         this.#addSelectedItem(item)
       }
     }
@@ -823,19 +874,21 @@ export class SelectPanelElement extends HTMLElement {
     const itemContent = this.#getItemContent(item)
 
     if (this.selectVariant === 'single') {
+      const value = this.selectedItems[0]?.value
+      const element = this.visibleItems.find(el => this.#getItemContent(el)?.getAttribute('data-value') === value)
+
+      if (element) {
+        this.#getItemContent(element)?.setAttribute(this.ariaSelectionType, 'false')
+      }
+
+      this.#selectedItems.clear()
+
       // Only check, never uncheck here. Single-select mode does not allow unchecking a checked item.
       if (checked) {
         this.#addSelectedItem(item)
         itemContent?.setAttribute(this.ariaSelectionType, 'true')
       }
 
-      for (const checkedItem of this.querySelectorAll(`[${this.ariaSelectionType}]`)) {
-        if (checkedItem !== itemContent) {
-          this.#removeSelectedItem(checkedItem)
-          checkedItem.setAttribute(this.ariaSelectionType, 'false')
-        }
-      }
-
       this.#setDynamicLabel()
     } else {
       // multi-select mode allows unchecking a checked item
@@ -862,6 +915,7 @@ export class SelectPanelElement extends HTMLElement {
   show() {
     this.updateAnchorPosition()
     this.dialog.showModal()
+    this.invokerElement?.setAttribute('aria-expanded', 'true')
     const event = new CustomEvent('dialog:open', {
       detail: {dialog: this.dialog},
     })
@@ -952,6 +1006,7 @@ export class SelectPanelElement extends HTMLElement {
       element => element.parentElement! as SelectPanelItem,
     )
   }
+
   get focusableItem(): HTMLElement | undefined {
     for (const item of this.items) {
       const itemContent = this.#getItemContent(item)

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

@@ -2,6 +2,7 @@ declare class ToggleSwitchElement extends HTMLElement {
     switch: HTMLElement;
     loadingSpinner: HTMLElement;
     errorIcon: HTMLElement;
+    turbo: boolean;
     private toggling;
     get src(): string | null;
     get csrf(): string | null;
@@ -25,6 +26,9 @@ declare class ToggleSwitchElement extends HTMLElement {
 declare global {
     interface Window {
         ToggleSwitchElement: typeof ToggleSwitchElement;
+        Turbo: {
+            renderStreamMessage: (message: string) => void;
+        };
     }
 }
 export {};

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

@@ -4,10 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { controller, target } from '@github/catalyst';
+import { controller, target, attr } from '@github/catalyst';
 let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
     constructor() {
         super(...arguments);
+        this.turbo = false;
         this.toggling = false;
     }
     get src() {
@@ -129,13 +130,17 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
         if (!this.src)
             throw new Error('invalid src');
         let response;
+        const requestHeaders = {
+            'Requested-With': 'XMLHttpRequest',
+        };
+        if (this.turbo) {
+            requestHeaders['Accept'] = 'text/vnd.turbo-stream.html';
+        }
         try {
             response = await fetch(this.src, {
                 credentials: 'same-origin',
                 method: 'POST',
-                headers: {
-                    'Requested-With': 'XMLHttpRequest',
-                },
+                headers: requestHeaders,
                 body,
             });
         }
@@ -145,6 +150,10 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
         if (!response.ok) {
             throw new Error(await response.text());
         }
+        const contentType = response.headers.get('Content-Type');
+        if (window.Turbo && this.turbo && contentType?.startsWith('text/vnd.turbo-stream.html')) {
+            window.Turbo.renderStreamMessage(await response.text());
+        }
     }
 };
 __decorate([
@@ -156,6 +165,9 @@ __decorate([
 __decorate([
     target
 ], ToggleSwitchElement.prototype, "errorIcon", void 0);
+__decorate([
+    attr
+], ToggleSwitchElement.prototype, "turbo", void 0);
 ToggleSwitchElement = __decorate([
     controller
 ], ToggleSwitchElement);

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

@@ -26,12 +26,14 @@ module Primer
       # @param enabled [Boolean] Whether or not the toggle switch responds to user input.
       # @param size [Symbol] What size toggle switch to render. <%= one_of(Primer::Alpha::ToggleSwitch::SIZE_OPTIONS) %>
       # @param status_label_position [Symbol] Which side of the toggle switch to render the status label. <%= one_of(Primer::Alpha::ToggleSwitch::STATUS_LABEL_POSITION_OPTIONS) %>
+      # @param turbo [Boolean] Whether or not to request a turbo stream and render the response as such.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(src: nil, csrf_token: nil, checked: false, enabled: true, size: SIZE_DEFAULT, status_label_position: STATUS_LABEL_POSITION_DEFAULT, **system_arguments)
+      def initialize(src: nil, csrf_token: nil, checked: false, enabled: true, size: SIZE_DEFAULT, status_label_position: STATUS_LABEL_POSITION_DEFAULT, turbo: false, **system_arguments)
         @src = src
         @csrf_token = csrf_token
         @checked = checked
         @enabled = enabled
+        @turbo = turbo
         @system_arguments = system_arguments
 
         @size = fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)
@@ -82,7 +84,7 @@ module Primer
 
         @system_arguments[:data] = merge_data(
           @system_arguments,
-          { data: { csrf: @csrf_token } }
+          { data: { csrf: @csrf_token, turbo: @turbo } }
         )
       end
     end

data/app/components/primer/alpha/toggle_switch.ts

@@ -1,10 +1,11 @@
-import {controller, target} from '@github/catalyst'
+import {controller, target, attr} from '@github/catalyst'
 
 @controller
 class ToggleSwitchElement extends HTMLElement {
   @target switch: HTMLElement
   @target loadingSpinner: HTMLElement
   @target errorIcon: HTMLElement
+  @attr turbo = false
 
   private toggling = false
 
@@ -158,13 +159,19 @@ class ToggleSwitchElement extends HTMLElement {
 
     let response
 
+    const requestHeaders: {[key: string]: string} = {
+      'Requested-With': 'XMLHttpRequest',
+    }
+
+    if (this.turbo) {
+      requestHeaders['Accept'] = 'text/vnd.turbo-stream.html'
+    }
+
     try {
       response = await fetch(this.src, {
         credentials: 'same-origin',
         method: 'POST',
-        headers: {
-          'Requested-With': 'XMLHttpRequest',
-        },
+        headers: requestHeaders,
         body,
       })
     } catch (error) {
@@ -174,12 +181,20 @@ class ToggleSwitchElement extends HTMLElement {
     if (!response.ok) {
       throw new Error(await response.text())
     }
+
+    const contentType = response.headers.get('Content-Type')
+    if (window.Turbo && this.turbo && contentType?.startsWith('text/vnd.turbo-stream.html')) {
+      window.Turbo.renderStreamMessage(await response.text())
+    }
   }
 }
 
 declare global {
   interface Window {
     ToggleSwitchElement: typeof ToggleSwitchElement
+    Turbo: {
+      renderStreamMessage: (message: string) => void
+    }
   }
 }
 

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

@@ -86,7 +86,7 @@ class ToolTipElement extends HTMLElement {
         --tooltip-left: var(--tool-tip-position-left, 0);
         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;
+        color: var(--tooltip-fgColor, var(--fgColor-onEmphasis)) !important;
         text-align: center;
         text-decoration: none;
         text-shadow: none;
@@ -94,7 +94,7 @@ class ToolTipElement extends HTMLElement {
         letter-spacing: normal;
         word-wrap: break-word;
         white-space: pre;
-        background: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)) !important;
+        background: var(--tooltip-bgColor, var(--bgColor-emphasis)) !important;
         border-radius: var(--borderRadius-medium);
         border: 0 !important;
         opacity: 0;

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

@@ -71,7 +71,7 @@ class ToolTipElement extends HTMLElement {
         --tooltip-left: var(--tool-tip-position-left, 0);
         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;
+        color: var(--tooltip-fgColor, var(--fgColor-onEmphasis)) !important;
         text-align: center;
         text-decoration: none;
         text-shadow: none;
@@ -79,7 +79,7 @@ class ToolTipElement extends HTMLElement {
         letter-spacing: normal;
         word-wrap: break-word;
         white-space: pre;
-        background: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)) !important;
+        background: var(--tooltip-bgColor, var(--bgColor-emphasis)) !important;
         border-radius: var(--borderRadius-medium);
         border: 0 !important;
         opacity: 0;

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

@@ -86,7 +86,7 @@ module Primer
 
       # @param datetime [Time] The time to be formatted.
       # @param tense [Symbol] Which tense to use. <%= one_of(Primer::Beta::RelativeTime::TENSE_OPTIONS) %>
-      # @param prefix [sring] What to prefix the relative ime display with.
+      # @param prefix [String] What to prefix the relative time display with.
       # @param second [Symbol] What format seconds should take. <%= one_of(Primer::Beta::RelativeTime::SECOND_OPTIONS) %>
       # @param minute [Symbol] What format minues should take. <%= one_of(Primer::Beta::RelativeTime::MINUTE_OPTIONS) %>
       # @param hour [Symbol] What format hours should take. <%= one_of(Primer::Beta::RelativeTime::HOUR_OPTIONS) %>
@@ -95,12 +95,12 @@ module Primer
       # @param month [Symbol] What format months should take. <%= one_of(Primer::Beta::RelativeTime::MONTH_OPTIONS) %>
       # @param year [Symbol] What format years should take. <%= one_of(Primer::Beta::RelativeTime::YEAR_OPTIONS) %>
       # @param time_zone_name [Symbol] What format the time zone should take. <%= one_of(Primer::Beta::RelativeTime::TIMEZONENAME_OPTIONS) %>
-      # @param threshold [string] The threshold, in ISO-8601 'durations' format, at which relative time displays become absolute.
+      # @param threshold [String] The threshold, in ISO-8601 'durations' format, at which relative time displays become absolute.
       # @param precision [Symbol] The precision elapsed time should display. <%= one_of(Primer::Beta::RelativeTime::PRECISION_OPTIONS) %>
       # @param format [Symbol] The format the display should take. <%= one_of(Primer::Beta::RelativeTime::FORMAT_OPTIONS) %>
       # @param format_style [Symbol] The format the display should take. <%= one_of(Primer::Beta::RelativeTime::FORMAT_STYLE_OPTIONS) %>
-      # @param lang [string] The language to use.
-      # @param title [string] Provide a custom title to the element.
+      # @param lang [String] The language to use.
+      # @param title [String] Provide a custom title to the element.
       # @param no_title [Boolean] Removes the `title` attribute provided on the element by default.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(

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

@@ -1 +1 @@
-.State,.state{border-radius:2em;display:inline-block;font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-medium);line-height:var(--control-medium-lineBoxHeight);padding:5px var(--control-medium-paddingInline-normal);text-align:center;white-space:nowrap}.State,.State--draft,.state{background-color:var(--bgColor-neutral-emphasis);border:var(--borderWidth-thin) solid #0000;color:var(--fgColor-onEmphasis)}.State--open{background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis))}.State--merged,.State--open{color:var(--fgColor-onEmphasis)}.State--merged{background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis))}.State--closed{background-color:var(--bgColor-closed-emphasis,var(--color-closed-emphasis));color:var(--fgColor-onEmphasis)}.State--small{font-size:var(--text-body-size-small);line-height:var(--base-size-24);padding:0 10px}.State--small .octicon{width:1em}
+.State,.state{border-radius:2em;display:inline-block;font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-medium);line-height:var(--control-medium-lineBoxHeight);padding:5px var(--control-medium-paddingInline-normal);text-align:center;white-space:nowrap}.State,.State--draft,.state{background-color:var(--bgColor-neutral-emphasis);border:var(--borderWidth-thin) solid #0000;box-shadow:var(--boxShadow-thin) var(--borderColor-neutral-emphasis);color:var(--fgColor-onEmphasis)}.State--open{background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-open-emphasis)}.State--merged,.State--open{color:var(--fgColor-onEmphasis)}.State--merged{background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-done-emphasis)}.State--closed{background-color:var(--bgColor-closed-emphasis,var(--color-closed-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-closed-emphasis);color:var(--fgColor-onEmphasis)}.State--small{font-size:var(--text-body-size-small);line-height:var(--base-size-24);padding:0 10px}.State--small .octicon{width:1em}

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

@@ -1 +1 @@
-{"version":3,"sources":["state.pcss"],"names":[],"mappings":"AAIA,cASE,iBAAkB,CAPlB,oBAAqB,CAErB,sCAAuC,CACvC,0CAA2C,CAC3C,+CAAgD,CAHhD,sDAAuD,CAIvD,iBAAkB,CAClB,kBAEF,CAEA,4BAIE,gDAAiD,CACjD,0CAAiD,CAFjD,+BAGF,CAEA,aAEE,wEACF,CAEA,4BAJE,+BAOF,CAHA,eAEE,wEACF,CAEA,eAEE,4EAA8E,CAD9E,+BAEF,CAIA,cAEE,qCAAsC,CACtC,+BAAgC,CAFhC,cAOF,CAHE,uBACE,SACF","file":"state.css","sourcesContent":["/* State */\n\n/* Default 32px */\n\n.state, /* TODO: Deprecate */\n.State {\n  display: inline-block;\n  padding: 5px var(--control-medium-paddingInline-normal);\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-medium);\n  line-height: var(--control-medium-lineBoxHeight);\n  text-align: center;\n  white-space: nowrap;\n  border-radius: 2em;\n}\n\n.state, /* TODO: Deprecate */\n.State,\n.State--draft {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-neutral-emphasis);\n  border: var(--borderWidth-thin) solid transparent;\n}\n\n.State--open {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis));\n}\n\n.State--merged {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis));\n}\n\n.State--closed {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis));\n}\n\n/* Small 24px */\n\n.State--small {\n  padding: 0 10px;\n  font-size: var(--text-body-size-small);\n  line-height: var(--base-size-24);\n\n  & .octicon {\n    width: 1em; /* Ensures different icons don't change State indicator width */\n  }\n}\n"]}
+{"version":3,"sources":["state.pcss"],"names":[],"mappings":"AAIA,cASE,iBAAkB,CAPlB,oBAAqB,CAErB,sCAAuC,CACvC,0CAA2C,CAC3C,+CAAgD,CAHhD,sDAAuD,CAIvD,iBAAkB,CAClB,kBAEF,CAEA,4BAIE,gDAAiD,CACjD,0CAAiD,CACjD,oEAAqE,CAHrE,+BAIF,CAEA,aAEE,wEAA0E,CAC1E,iEACF,CAEA,4BALE,+BASF,CAJA,eAEE,wEAA0E,CAC1E,iEACF,CAEA,eAEE,4EAA8E,CAC9E,mEAAoE,CAFpE,+BAGF,CAIA,cAEE,qCAAsC,CACtC,+BAAgC,CAFhC,cAOF,CAHE,uBACE,SACF","file":"state.css","sourcesContent":["/* State */\n\n/* Default 32px */\n\n.state, /* TODO: Deprecate */\n.State {\n  display: inline-block;\n  padding: 5px var(--control-medium-paddingInline-normal);\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-medium);\n  line-height: var(--control-medium-lineBoxHeight);\n  text-align: center;\n  white-space: nowrap;\n  border-radius: 2em;\n}\n\n.state, /* TODO: Deprecate */\n.State,\n.State--draft {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-neutral-emphasis);\n  border: var(--borderWidth-thin) solid transparent;\n  box-shadow: var(--boxShadow-thin) var(--borderColor-neutral-emphasis);\n}\n\n.State--open {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis));\n  box-shadow: var(--boxShadow-thin) var(--borderColor-open-emphasis);\n}\n\n.State--merged {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis));\n  box-shadow: var(--boxShadow-thin) var(--borderColor-done-emphasis);\n}\n\n.State--closed {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis));\n  box-shadow: var(--boxShadow-thin) var(--borderColor-closed-emphasis);\n}\n\n/* Small 24px */\n\n.State--small {\n  padding: 0 10px;\n  font-size: var(--text-body-size-small);\n  line-height: var(--base-size-24);\n\n  & .octicon {\n    width: 1em; /* Ensures different icons don't change State indicator width */\n  }\n}\n"]}

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

@@ -20,21 +20,25 @@
   color: var(--fgColor-onEmphasis);
   background-color: var(--bgColor-neutral-emphasis);
   border: var(--borderWidth-thin) solid transparent;
+  box-shadow: var(--boxShadow-thin) var(--borderColor-neutral-emphasis);
 }
 
 .State--open {
   color: var(--fgColor-onEmphasis);
   background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis));
+  box-shadow: var(--boxShadow-thin) var(--borderColor-open-emphasis);
 }
 
 .State--merged {
   color: var(--fgColor-onEmphasis);
   background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis));
+  box-shadow: var(--boxShadow-thin) var(--borderColor-done-emphasis);
 }
 
 .State--closed {
   color: var(--fgColor-onEmphasis);
   background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis));
+  box-shadow: var(--boxShadow-thin) var(--borderColor-closed-emphasis);
 }
 
 /* Small 24px */

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

@@ -14,6 +14,13 @@ module ERBLint
             " https://primer.style/design/components/action-menu/rails/alpha"
           DETAILS_MENU_RUBY_PATTERN = /tag:?\s+:"details-menu"/.freeze
 
+          # Allow custom pattern matching for ERB nodes
+          class ConfigSchema < LinterConfig
+            property :custom_erb_pattern, accepts: array_of?(Regexp),
+              default: -> { [] }
+          end
+          self.config_schema = ConfigSchema
+
           def run(processed_source)
             # HTML tags
             tags(processed_source).each do |tag|
@@ -25,9 +32,31 @@ module ERBLint
             # ERB nodes
             erb_nodes(processed_source).each do |node|
               code = extract_ruby_from_erb_node(node)
-              generate_node_offense(self.class, processed_source, node, MIGRATE_FROM_DETAILS_MENU) if code.match?(DETAILS_MENU_RUBY_PATTERN)
+
+              if contains_offense?(code)
+                generate_node_offense(self.class, processed_source, node, MIGRATE_FROM_DETAILS_MENU)
+              end
             end
           end
+
+          def contains_offense?(code)
+            return true if code.match?(DETAILS_MENU_RUBY_PATTERN)
+            return code.match?(custom_erb_pattern) if custom_erb_pattern
+            false
+          end
+
+          def custom_erb_pattern
+            unless defined?(@custom_erb_pattern)
+              @custom_erb_pattern =
+                if @config.custom_erb_pattern.empty?
+                  nil
+                else
+                  Regexp.new(@config.custom_erb_pattern.join("|"), true)
+                end
+            end
+
+            @custom_erb_pattern
+          end
         end
       end
     end

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

@@ -10,7 +10,7 @@ module ERBLint
           include LinterRegistry
           include Helpers::RuleHelpers
 
-          MIGRATE_TO_NEWER_TOOLTIP = ".tooltipped has been deprecated. There are major accessibility concerns with using this tooltip so please take action. See https://primer.style/guides/rails/migration-guides/primer-css-tooltipped."
+          MIGRATE_TO_NEWER_TOOLTIP = ".tooltipped has been deprecated. Due to major accessibility concerns with using this tooltip, please migrate to a Primer Tooltip component or rework the design to eliminate the tooltip. See https://primer.style/guides/rails/migration-guides/primer-css-tooltipped."
           TOOLTIPPED_RUBY_PATTERN = /classes:.*tooltipped|class:.*tooltipped/.freeze
 
           def run(processed_source)

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 29
+      MINOR = 31
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

data/previews/primer/alpha/action_list_preview.rb

@@ -380,7 +380,7 @@ module Primer
                  aria: { label: "List heading" }
                )) do |component|
           component.with_item(label: "Default item", href: "/") do |item|
-            item.with_description.with_content("This is a description")
+            item.with_description(test_selector: "some-selector").with_content("This is a description")
           end
         end
       end

data/previews/primer/alpha/select_panel_preview/list_of_links.html.erb

@@ -0,0 +1,16 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  select_variant: :single,
+  fetch_strategy: :local,
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Panel" } %>
+  <% panel.with_item(label: "GitHub", href: "https://github.com") %>
+  <% panel.with_item(label: "Microsoft", href: "https://microsoft.com") %>
+  <% panel.with_item(label: "Primer", href: "https://primer.style") %>
+  <% panel.with_item(label: "Catalyst", href: "https://catalyst.rocks") %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/playground.html.erb

@@ -8,7 +8,8 @@
   src: select_panel_items_path(
     select_variant: :single,
     show_results: !simulate_no_results,
-    fail: simulate_failure
+    fail: simulate_failure,
+    select_items: select_items
   ),
   select_variant: :single,
   fetch_strategy: :remote,

data/previews/primer/alpha/select_panel_preview.rb

@@ -18,6 +18,7 @@ module Primer
       # @param open_on_load toggle
       # @param anchor_align [Symbol] select [start, center, end]
       # @param anchor_side [Symbol] select [outside_bottom, outside_top, outside_left, outside_right]
+      # @param select_items toggle
       def playground(
         title: "Sci-fi equipment",
         subtitle: "Various tools from your favorite shows",
@@ -31,10 +32,12 @@ module Primer
         show_filter: true,
         open_on_load: false,
         anchor_align: :start,
-        anchor_side: :outside_bottom
+        anchor_side: :outside_bottom,
+        select_items: true
       )
         render_with_template(locals: {
           subtitle: subtitle,
+          select_items: select_items,
           system_arguments: {
             title: title,
             size: size,
@@ -234,6 +237,14 @@ module Primer
       def multiselect_form(open_on_load: false, route_format: :html)
         render_with_template(locals: { open_on_load: open_on_load, route_format: route_format })
       end
+
+      # @label List of links
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      def list_of_links(open_on_load: false)
+        render_with_template(locals: { open_on_load: open_on_load })
+      end
     end
   end
 end

data/previews/primer/alpha/toggle_switch_preview.rb

@@ -58,6 +58,10 @@ module Primer
       def with_bad_csrf_token
         render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, csrf_token: "i_am_a_criminal"))
       end
+
+      def with_turbo
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, turbo: true))
+      end
     end
   end
 end