openproject-primer_view_components 0.49.0 → 0.49.2

data/app/components/primer/alpha/action_list/item.rb

@@ -302,7 +302,7 @@ module Primer
           if @list.allows_selection?
             @content_arguments[:aria] = merge_aria(
               @content_arguments,
-              { aria: @list.aria_selection_variant == :selected ? {selected: active?} : { checked: active? } }
+              { aria: @list.aria_selection_variant == :selected ? { selected: active? } : { checked: active? } }
             )
           end
 

data/app/components/primer/alpha/select_panel.html.erb

@@ -47,7 +47,7 @@
       <% end %>
       <%= render Primer::Alpha::Dialog::Body.new(mt: show_filter? ? 0 : 2, p: 0) do %>
         <focus-group direction="vertical" mnemonics retain>
-          <div class="sr-only" aria-live="polite" aria-atomic="true" data-target="select-panel.ariaLiveContainer"></div>
+          <live-region data-target="select-panel.liveRegion"></live-region>
           <%= render(Primer::BaseComponent.new(
             tag: :div,
             data: {

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

@@ -1,5 +1,7 @@
 import { IncludeFragmentElement } from '@github/include-fragment-element';
 import type { AnchorAlignment, AnchorSide } from '@primer/behaviors';
+import type { LiveRegionElement } from '@primer/live-region-element';
+import '@primer/live-region-element';
 import '@oddbird/popover-polyfill';
 type SelectVariant = 'none' | 'single' | 'multiple' | null;
 type SelectedItem = {
@@ -16,11 +18,11 @@ export declare class SelectPanelElement extends HTMLElement {
     filterInputTextField: HTMLInputElement;
     remoteInput: HTMLElement;
     list: HTMLElement;
-    ariaLiveContainer: HTMLElement;
     noResults: HTMLElement;
     fragmentErrorElement: HTMLElement;
     bannerErrorElement: HTMLElement;
     bodySpinner: HTMLElement;
+    liveRegion: LiveRegionElement;
     filterFn?: FilterFn;
     get open(): boolean;
     get selectVariant(): SelectVariant;

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

@@ -18,8 +18,8 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
 var _SelectPanelElement_instances, _SelectPanelElement_dialogIntersectionObserver, _SelectPanelElement_abortController, _SelectPanelElement_originalLabel, _SelectPanelElement_inputName, _SelectPanelElement_selectedItems, _SelectPanelElement_loadingDelayTimeoutId, _SelectPanelElement_loadingAnnouncementTimeoutId, _SelectPanelElement_hasLoadedData, _SelectPanelElement_waitForCondition, _SelectPanelElement_softDisableItems, _SelectPanelElement_updateTabIndices, _SelectPanelElement_potentiallyDisallowActivation, _SelectPanelElement_isAnchorActivationViaSpace, _SelectPanelElement_isActivation, _SelectPanelElement_checkSelectedItems, _SelectPanelElement_addSelectedItem, _SelectPanelElement_removeSelectedItem, _SelectPanelElement_setTextFieldLoadingSpinnerTimer, _SelectPanelElement_handleIncludeFragmentEvent, _SelectPanelElement_toggleIncludeFragmentElements, _SelectPanelElement_handleRemoteInputEvent, _SelectPanelElement_defaultFilterFn, _SelectPanelElement_handleSearchFieldEvent, _SelectPanelElement_updateItemVisibility, _SelectPanelElement_inErrorState, _SelectPanelElement_setErrorState, _SelectPanelElement_clearErrorState, _SelectPanelElement_maybeAnnounce, _SelectPanelElement_fetchStrategy_get, _SelectPanelElement_filterInputTextFieldElement_get, _SelectPanelElement_performFilteringLocally, _SelectPanelElement_handleInvokerActivated, _SelectPanelElement_handleDialogItemActivated, _SelectPanelElement_handleItemActivated, _SelectPanelElement_setDynamicLabel, _SelectPanelElement_updateInput, _SelectPanelElement_firstItem_get, _SelectPanelElement_hideItem, _SelectPanelElement_showItem, _SelectPanelElement_getItemContent;
 import { getAnchoredPosition } from '@primer/behaviors';
 import { controller, target } from '@github/catalyst';
-import { announceFromElement, announce } from '../aria_live';
 import { IncludeFragmentElement } from '@github/include-fragment-element';
+import '@primer/live-region-element';
 import '@oddbird/popover-polyfill';
 const validSelectors = ['[role="option"]'];
 const menuItemSelectors = validSelectors.join(',');
@@ -255,10 +255,12 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
             this.dialog.removeAttribute('data-ready');
             this.invokerElement?.setAttribute('aria-expanded', 'false');
             // When we close the dialog, clear the filter input
-            const fireSearchEvent = this.filterInputTextField.value.length > 0;
-            this.filterInputTextField.value = '';
-            if (fireSearchEvent) {
-                this.filterInputTextField.dispatchEvent(new Event('input'));
+            if (this.filterInputTextField) {
+                const fireSearchEvent = this.filterInputTextField.value.length > 0;
+                this.filterInputTextField.value = '';
+                if (fireSearchEvent) {
+                    this.filterInputTextField.dispatchEvent(new Event('input'));
+                }
             }
             this.dispatchEvent(new CustomEvent('panelClosed', {
                 detail: { panel: this },
@@ -523,7 +525,7 @@ _SelectPanelElement_setTextFieldLoadingSpinnerTimer = function _SelectPanelEleme
     if (__classPrivateFieldGet(this, _SelectPanelElement_loadingAnnouncementTimeoutId, "f"))
         clearTimeout(__classPrivateFieldGet(this, _SelectPanelElement_loadingAnnouncementTimeoutId, "f"));
     __classPrivateFieldSet(this, _SelectPanelElement_loadingAnnouncementTimeoutId, setTimeout(() => {
-        announce('Loading', { element: this.ariaLiveContainer });
+        this.liveRegion.announce('Loading');
     }, 2000), "f");
     __classPrivateFieldSet(this, _SelectPanelElement_loadingDelayTimeoutId, setTimeout(() => {
         __classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_filterInputTextFieldElement_get)?.showLeadingSpinner();
@@ -549,7 +551,7 @@ _SelectPanelElement_handleIncludeFragmentEvent = function _SelectPanelElement_ha
             const errorElement = this.fragmentErrorElement;
             // check if the errorElement is visible in the dom
             if (errorElement && !errorElement.hasAttribute('hidden')) {
-                announceFromElement(errorElement, { element: this.ariaLiveContainer, assertive: true });
+                this.liveRegion.announceFromElement(errorElement, { politeness: 'assertive' });
                 return;
             }
             break;
@@ -736,7 +738,7 @@ _SelectPanelElement_setErrorState = function _SelectPanelElement_setErrorState(t
     }
     // check if the errorElement is visible in the dom
     if (errorElement && !errorElement.hasAttribute('hidden')) {
-        announceFromElement(errorElement, { element: this.ariaLiveContainer, assertive: true });
+        this.liveRegion.announceFromElement(errorElement, { politeness: 'assertive' });
         return;
     }
 };
@@ -746,17 +748,15 @@ _SelectPanelElement_clearErrorState = function _SelectPanelElement_clearErrorSta
 };
 _SelectPanelElement_maybeAnnounce = function _SelectPanelElement_maybeAnnounce() {
     if (this.open && this.list) {
-        const items = this.items;
+        const items = this.visibleItems;
         if (items.length > 0) {
             const instructions = 'tab for results';
-            announce(`${items.length} result${items.length === 1 ? '' : 's'} ${instructions}`, {
-                element: this.ariaLiveContainer,
-            });
+            this.liveRegion.announce(`${items.length} result${items.length === 1 ? '' : 's'} ${instructions}`);
         }
         else {
             const noResultsEl = this.noResults;
             if (noResultsEl) {
-                announceFromElement(noResultsEl, { element: this.ariaLiveContainer });
+                this.liveRegion.announceFromElement(noResultsEl);
             }
         }
     }
@@ -974,9 +974,6 @@ __decorate([
 __decorate([
     target
 ], SelectPanelElement.prototype, "list", void 0);
-__decorate([
-    target
-], SelectPanelElement.prototype, "ariaLiveContainer", void 0);
 __decorate([
     target
 ], SelectPanelElement.prototype, "noResults", void 0);
@@ -989,6 +986,9 @@ __decorate([
 __decorate([
     target
 ], SelectPanelElement.prototype, "bodySpinner", void 0);
+__decorate([
+    target
+], SelectPanelElement.prototype, "liveRegion", void 0);
 SelectPanelElement = __decorate([
     controller
 ], SelectPanelElement);

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

@@ -1,9 +1,10 @@
 import {getAnchoredPosition} from '@primer/behaviors'
 import {controller, target} from '@github/catalyst'
-import {announceFromElement, announce} from '../aria_live'
 import {IncludeFragmentElement} from '@github/include-fragment-element'
 import type {PrimerTextFieldElement} from 'app/lib/primer/forms/primer_text_field'
 import type {AnchorAlignment, AnchorSide} from '@primer/behaviors'
+import type {LiveRegionElement} from '@primer/live-region-element'
+import '@primer/live-region-element'
 import '@oddbird/popover-polyfill'
 
 type SelectVariant = 'none' | 'single' | 'multiple' | null
@@ -69,11 +70,11 @@ export class SelectPanelElement extends HTMLElement {
   @target filterInputTextField: HTMLInputElement
   @target remoteInput: HTMLElement
   @target list: HTMLElement
-  @target ariaLiveContainer: HTMLElement
   @target noResults: HTMLElement
   @target fragmentErrorElement: HTMLElement
   @target bannerErrorElement: HTMLElement
   @target bodySpinner: HTMLElement
+  @target liveRegion: LiveRegionElement
 
   filterFn?: FilterFn
 
@@ -412,7 +413,7 @@ export class SelectPanelElement extends HTMLElement {
     if (this.#loadingAnnouncementTimeoutId) clearTimeout(this.#loadingAnnouncementTimeoutId)
 
     this.#loadingAnnouncementTimeoutId = setTimeout(() => {
-      announce('Loading', {element: this.ariaLiveContainer})
+      this.liveRegion.announce('Loading')
     }, 2000) as unknown as number
 
     this.#loadingDelayTimeoutId = setTimeout(() => {
@@ -465,10 +466,13 @@ export class SelectPanelElement extends HTMLElement {
       this.dialog.removeAttribute('data-ready')
       this.invokerElement?.setAttribute('aria-expanded', 'false')
       // When we close the dialog, clear the filter input
-      const fireSearchEvent = this.filterInputTextField.value.length > 0
-      this.filterInputTextField.value = ''
-      if (fireSearchEvent) {
-        this.filterInputTextField.dispatchEvent(new Event('input'))
+
+      if (this.filterInputTextField) {
+        const fireSearchEvent = this.filterInputTextField.value.length > 0
+        this.filterInputTextField.value = ''
+        if (fireSearchEvent) {
+          this.filterInputTextField.dispatchEvent(new Event('input'))
+        }
       }
 
       this.dispatchEvent(
@@ -561,7 +565,7 @@ export class SelectPanelElement extends HTMLElement {
         const errorElement = this.fragmentErrorElement
         // check if the errorElement is visible in the dom
         if (errorElement && !errorElement.hasAttribute('hidden')) {
-          announceFromElement(errorElement, {element: this.ariaLiveContainer, assertive: true})
+          this.liveRegion.announceFromElement(errorElement, {politeness: 'assertive'})
           return
         }
 
@@ -763,7 +767,7 @@ export class SelectPanelElement extends HTMLElement {
 
     // check if the errorElement is visible in the dom
     if (errorElement && !errorElement.hasAttribute('hidden')) {
-      announceFromElement(errorElement, {element: this.ariaLiveContainer, assertive: true})
+      this.liveRegion.announceFromElement(errorElement, {politeness: 'assertive'})
       return
     }
   }
@@ -775,17 +779,15 @@ export class SelectPanelElement extends HTMLElement {
 
   #maybeAnnounce() {
     if (this.open && this.list) {
-      const items = this.items
+      const items = this.visibleItems
 
       if (items.length > 0) {
         const instructions = 'tab for results'
-        announce(`${items.length} result${items.length === 1 ? '' : 's'} ${instructions}`, {
-          element: this.ariaLiveContainer,
-        })
+        this.liveRegion.announce(`${items.length} result${items.length === 1 ? '' : 's'} ${instructions}`)
       } else {
         const noResultsEl = this.noResults
         if (noResultsEl) {
-          announceFromElement(noResultsEl, {element: this.ariaLiveContainer})
+          this.liveRegion.announceFromElement(noResultsEl)
         }
       }
     }

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

@@ -1 +1 @@
-.Popover{position:absolute;z-index:100}.Popover-message{background-color:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-floating-legacy,var(--color-shadow-large))!important;margin-left:auto;margin-right:auto;position:relative;width:232px}.Popover-message:after,.Popover-message:before{content:"";display:inline-block;left:50%;position:absolute}.Popover-message:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default);margin-left:-9px;top:-16px}.Popover-message:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor);margin-left:-8px;top:-14px}.Popover-message--no-caret:after,.Popover-message--no-caret:before{display:none}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):after,:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):before{border-bottom-color:#0000;top:auto}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):before{border-top-color:var(--borderColor-default);bottom:-16px}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):after{border-top-color:var(--overlay-bgColor);bottom:-14px}.Popover-message--bottom-right,.Popover-message--top-right{margin-right:0;right:-9px}:is(.Popover-message--top-right,.Popover-message--bottom-right):after,:is(.Popover-message--top-right,.Popover-message--bottom-right):before{left:auto;margin-left:0}:is(.Popover-message--top-right,.Popover-message--bottom-right):after,:is(.Popover-message--top-right,.Popover-message--bottom-right):before{right:var(--base-size-20)}.Popover-message--bottom-left,.Popover-message--top-left{left:-9px;margin-left:0}:is(.Popover-message--top-left,.Popover-message--bottom-left):after,:is(.Popover-message--top-left,.Popover-message--bottom-left):before{left:var(--base-size-24);margin-left:0}:is(.Popover-message--top-left,.Popover-message--bottom-left):after{left:var(--base-size-24)}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after,:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{border-bottom-color:#0000;left:auto;margin-left:0;top:50%}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{margin-top:-9px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after{margin-top:-8px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom):before{border-left-color:var(--borderColor-default);right:-16px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom):after{border-left-color:var(--overlay-bgColor);right:-14px}:is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{border-right-color:var(--borderColor-default);left:-16px}:is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after{border-right-color:var(--overlay-bgColor);left:-14px}:is(.Popover-message--right-top,.Popover-message--left-top):after,:is(.Popover-message--right-top,.Popover-message--left-top):before{top:var(--base-size-24)}:is(.Popover-message--right-bottom,.Popover-message--left-bottom):after,:is(.Popover-message--right-bottom,.Popover-message--left-bottom):before{top:auto}:is(.Popover-message--right-bottom,.Popover-message--left-bottom):after,:is(.Popover-message--right-bottom,.Popover-message--left-bottom):before{bottom:var(--base-size-16)}@media (min-width:544px){.Popover-message--large{min-width:320px}}@media (max-width:767.98px){.Popover{bottom:0!important;left:0!important;position:fixed;right:0!important;top:auto!important}.Popover-message{bottom:auto;left:auto;margin:var(--stack-gap-condensed);right:auto;top:auto;width:auto!important}.Popover-message>.btn-octicon{padding:var(--control-medium-paddingInline-normal)!important}.Popover-message:after,.Popover-message:before{display:none}}
+.Popover{position:absolute;z-index:100}.Popover-message{background-color:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-floating-legacy,var(--color-shadow-large))!important;margin-left:auto;margin-right:auto;position:relative;width:232px}.Popover-message:after,.Popover-message:before{content:"";display:inline-block;left:50%;position:absolute}.Popover-message:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default);margin-left:-9px;top:-16px}.Popover-message:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor);margin-left:-8px;top:-14px}.Popover-message--no-caret:after,.Popover-message--no-caret:before{display:none}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):after,:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):before{border-bottom-color:#0000;top:auto}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):before{border-top-color:var(--borderColor-default);bottom:-16px}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):after{border-top-color:var(--overlay-bgColor);bottom:-14px}.Popover-message--bottom-right,.Popover-message--top-right{margin-right:0;right:-9px}:is(.Popover-message--top-right,.Popover-message--bottom-right):after,:is(.Popover-message--top-right,.Popover-message--bottom-right):before{left:auto;margin-left:0}:is(.Popover-message--top-right,.Popover-message--bottom-right):before{right:var(--base-size-20)}:is(.Popover-message--top-right,.Popover-message--bottom-right):after{margin-right:1px;right:var(--base-size-20)}.Popover-message--bottom-left,.Popover-message--top-left{left:-9px;margin-left:0}:is(.Popover-message--top-left,.Popover-message--bottom-left):after,:is(.Popover-message--top-left,.Popover-message--bottom-left):before{left:var(--base-size-24);margin-left:0}:is(.Popover-message--top-left,.Popover-message--bottom-left):after{left:var(--base-size-24);margin-left:1px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after,:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{border-bottom-color:#0000;left:auto;margin-left:0;top:50%}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{margin-top:-9px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after{margin-top:-8px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom):before{border-left-color:var(--borderColor-default);right:-16px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom):after{border-left-color:var(--overlay-bgColor);right:-14px}:is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{border-right-color:var(--borderColor-default);left:-16px}:is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after{border-right-color:var(--overlay-bgColor);left:-14px;margin-bottom:1px}:is(.Popover-message--right-top,.Popover-message--left-top):after,:is(.Popover-message--right-top,.Popover-message--left-top):before{top:var(--base-size-24)}:is(.Popover-message--right-bottom,.Popover-message--left-bottom):after,:is(.Popover-message--right-bottom,.Popover-message--left-bottom):before{top:auto}:is(.Popover-message--right-bottom,.Popover-message--left-bottom):before{bottom:var(--base-size-16)}:is(.Popover-message--right-bottom,.Popover-message--left-bottom):after{bottom:var(--base-size-16);margin-bottom:1px}@media (min-width:544px){.Popover-message--large{min-width:320px}}@media (max-width:767.98px){.Popover{bottom:0!important;left:0!important;position:fixed;right:0!important;top:auto!important}.Popover-message{bottom:auto;left:auto;margin:var(--stack-gap-condensed);right:auto;top:auto;width:auto!important}.Popover-message>.btn-octicon{padding:var(--control-medium-paddingInline-normal)!important}.Popover-message:after,.Popover-message:before{display:none}}

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

@@ -1 +1 @@
-{"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAIA,SACE,iBAAkB,CAClB,WACF,CAEA,iBAKE,uCAAwC,CACxC,+DAAgE,CAChE,wCAAyC,CAGzC,4EAA+E,CAN/E,gBAAiB,CADjB,iBAAkB,CAFlB,iBAAkB,CAClB,WAmCF,CAxBE,+CAKE,UAAW,CADX,oBAAqB,CADrB,QAAS,CADT,iBAIF,CAEA,wBAKE,sBAA+C,CAA/C,kDAA+C,CAH/C,gBAAiB,CADjB,SAKF,CAEA,uBAME,sBAA2C,CAA3C,8CAA2C,CAJ3C,gBAAiB,CADjB,SAMF,CAKA,mEAEE,YACF,CAOA,mMAGE,yBAAgC,CADhC,QAEF,CAEA,kGAEE,2CAA4C,CAD5C,YAEF,CAEA,iGAGE,uCAAwC,CAFxC,YAGF,CAIF,2DAGE,cAAe,CADf,UAgBF,CAbE,6IAEE,SAAU,CACV,aACF,CAMA,6IACE,yBACF,CAIF,yDAEE,SAAU,CACV,aAWF,CATE,yIAEE,wBAAyB,CACzB,aACF,CAEA,oEACE,wBACF,CAUA,6VAKE,yBAAgC,CAFhC,SAAU,CACV,aAAc,CAFd,OAIF,CAEA,+KACE,eACF,CAEA,8KACE,eACF,CAOA,+FAEE,4CAA6C,CAD7C,WAEF,CAEA,8FAGE,wCAAyC,CAFzC,WAGF,CAOA,4FAEE,6CAA8C,CAD9C,UAEF,CAEA,2FAGE,yCAA0C,CAF1C,UAGF,CAMA,qIAEE,uBACF,CAMA,iJAEE,QACF,CAMA,iJACE,0BACF,CAGF,yBACE,wBACE,eACF,CACF,CAKA,4BACE,SAIE,kBAAoB,CACpB,gBAAkB,CAJlB,cAAe,CAEf,iBAAmB,CADnB,kBAIF,CAEA,iBAGE,WAAY,CACZ,SAAU,CAEV,iCAAkC,CAJlC,UAAW,CADX,QAAS,CAIT,oBAEF,CAGA,8BACE,4DACF,CAGA,+CAEE,YACF,CACF","file":"popover.css","sourcesContent":["/* stylelint-disable primer/spacing */\n\n/* Popover */\n\n.Popover {\n  position: absolute;\n  z-index: 100;\n}\n\n.Popover-message {\n  position: relative;\n  width: 232px;\n  margin-right: auto;\n  margin-left: auto;\n  background-color: var(--overlay-bgColor);\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium);\n\n  /* adding !important to override utility classes used in dotcom */\n  box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large)) !important;\n\n  /* Carets */\n  &::before,\n  &::after {\n    position: absolute;\n    left: 50%;\n    display: inline-block;\n    content: '';\n  }\n\n  &::before {\n    top: -16px;\n    margin-left: -9px;\n    /* stylelint-disable-next-line primer/borders */\n    border: 8px solid transparent;\n    border-bottom-color: var(--borderColor-default);\n  }\n\n  &::after {\n    top: -14px;\n    margin-left: -8px;\n    /* stylelint-disable-next-line primer/borders */\n    border: 7px solid transparent;\n    /* stylelint-disable-next-line primer/colors */\n    border-bottom-color: var(--overlay-bgColor);\n  }\n}\n\n/* No caret */\n.Popover-message--no-caret {\n  &::before,\n  &::after {\n    display: none;\n  }\n}\n\n/* Bottom-oriented carets */\n.Popover-message--bottom,\n.Popover-message--bottom-right,\n.Popover-message--bottom-left {\n  &::before,\n  &::after {\n    top: auto;\n    border-bottom-color: transparent;\n  }\n\n  &::before {\n    bottom: -16px;\n    border-top-color: var(--borderColor-default);\n  }\n\n  &::after {\n    bottom: -14px;\n    /* stylelint-disable-next-line primer/colors */\n    border-top-color: var(--overlay-bgColor);\n  }\n}\n\n/* Top and Bottom: Right-oriented carets */\n.Popover-message--top-right,\n.Popover-message--bottom-right {\n  right: -9px;\n  margin-right: 0;\n\n  &::before,\n  &::after {\n    left: auto;\n    margin-left: 0;\n  }\n\n  &::before {\n    right: var(--base-size-20);\n  }\n\n  &::after {\n    right: var(--base-size-20);\n  }\n}\n\n/* Top and Bottom: Left-oriented carets */\n.Popover-message--top-left,\n.Popover-message--bottom-left {\n  left: -9px;\n  margin-left: 0;\n\n  &::before,\n  &::after {\n    left: var(--base-size-24);\n    margin-left: 0;\n  }\n\n  &::after {\n    left: var(--base-size-24);\n  }\n}\n\n/* Right- and Left-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom,\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n  &::before,\n  &::after {\n    top: 50%;\n    left: auto;\n    margin-left: 0;\n    border-bottom-color: transparent;\n  }\n\n  &::before {\n    margin-top: -9px;\n  }\n\n  &::after {\n    margin-top: -8px;\n  }\n}\n\n/* Right-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom {\n  &::before {\n    right: -16px;\n    border-left-color: var(--borderColor-default);\n  }\n\n  &::after {\n    right: -14px;\n    /* stylelint-disable-next-line primer/colors */\n    border-left-color: var(--overlay-bgColor);\n  }\n}\n\n/* Left-oriented carets */\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n  &::before {\n    left: -16px;\n    border-right-color: var(--borderColor-default);\n  }\n\n  &::after {\n    left: -14px;\n    /* stylelint-disable-next-line primer/colors */\n    border-right-color: var(--overlay-bgColor);\n  }\n}\n\n/* Right and Left: Top-oriented carets */\n.Popover-message--right-top,\n.Popover-message--left-top {\n  &::before,\n  &::after {\n    top: var(--base-size-24);\n  }\n}\n\n/* Right and Left: Bottom-oriented carets */\n.Popover-message--right-bottom,\n.Popover-message--left-bottom {\n  &::before,\n  &::after {\n    top: auto;\n  }\n\n  &::before {\n    bottom: var(--base-size-16);\n  }\n\n  &::after {\n    bottom: var(--base-size-16);\n  }\n}\n\n@media (min-width: 544px) {\n  .Popover-message--large {\n    min-width: 320px;\n  }\n}\n\n/* Responsive Popover\n** For < md it will show full-width anchored to the bottom */\n\n@media (max-width: 767.98px) {\n  .Popover {\n    position: fixed;\n    top: auto !important;\n    right: 0 !important;\n    bottom: 0 !important;\n    left: 0 !important;\n  }\n\n  .Popover-message {\n    top: auto;\n    right: auto;\n    bottom: auto;\n    left: auto;\n    width: auto !important;\n    margin: var(--stack-gap-condensed);\n  }\n\n  /* Increase tap area for touch input */\n  .Popover-message > .btn-octicon {\n    padding: var(--control-medium-paddingInline-normal) !important;\n  }\n\n  /* Remove caret */\n  .Popover-message::after,\n  .Popover-message::before {\n    display: none;\n  }\n}\n"]}
+{"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAIA,SACE,iBAAkB,CAClB,WACF,CAEA,iBAKE,uCAAwC,CACxC,+DAAgE,CAChE,wCAAyC,CAGzC,4EAA+E,CAN/E,gBAAiB,CADjB,iBAAkB,CAFlB,iBAAkB,CAClB,WAmCF,CAxBE,+CAKE,UAAW,CADX,oBAAqB,CADrB,QAAS,CADT,iBAIF,CAEA,wBAKE,sBAA+C,CAA/C,kDAA+C,CAH/C,gBAAiB,CADjB,SAKF,CAEA,uBAME,sBAA2C,CAA3C,8CAA2C,CAJ3C,gBAAiB,CADjB,SAMF,CAKA,mEAEE,YACF,CAOA,mMAGE,yBAAgC,CADhC,QAEF,CAEA,kGAEE,2CAA4C,CAD5C,YAEF,CAEA,iGAGE,uCAAwC,CAFxC,YAGF,CAIF,2DAGE,cAAe,CADf,UAiBF,CAdE,6IAEE,SAAU,CACV,aACF,CAEA,uEACE,yBACF,CAEA,sEAEE,gBAAiB,CADjB,yBAEF,CAIF,yDAEE,SAAU,CACV,aAYF,CAVE,yIAEE,wBAAyB,CACzB,aACF,CAEA,oEACE,wBAAyB,CACzB,eACF,CAUA,6VAKE,yBAAgC,CAFhC,SAAU,CACV,aAAc,CAFd,OAIF,CAEA,+KACE,eACF,CAEA,8KACE,eACF,CAOA,+FAEE,4CAA6C,CAD7C,WAEF,CAEA,8FAGE,wCAAyC,CAFzC,WAGF,CAOA,4FAEE,6CAA8C,CAD9C,UAEF,CAEA,2FAIE,yCAA0C,CAH1C,UAAW,CACX,iBAGF,CAMA,qIAEE,uBACF,CAMA,iJAEE,QACF,CAEA,yEACE,0BACF,CAEA,wEACE,0BAA2B,CAC3B,iBACF,CAGF,yBACE,wBACE,eACF,CACF,CAKA,4BACE,SAIE,kBAAoB,CACpB,gBAAkB,CAJlB,cAAe,CAEf,iBAAmB,CADnB,kBAIF,CAEA,iBAGE,WAAY,CACZ,SAAU,CAEV,iCAAkC,CAJlC,UAAW,CADX,QAAS,CAIT,oBAEF,CAGA,8BACE,4DACF,CAGA,+CAEE,YACF,CACF","file":"popover.css","sourcesContent":["/* stylelint-disable primer/spacing */\n\n/* Popover */\n\n.Popover {\n  position: absolute;\n  z-index: 100;\n}\n\n.Popover-message {\n  position: relative;\n  width: 232px;\n  margin-right: auto;\n  margin-left: auto;\n  background-color: var(--overlay-bgColor);\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium);\n\n  /* adding !important to override utility classes used in dotcom */\n  box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large)) !important;\n\n  /* Carets */\n  &::before,\n  &::after {\n    position: absolute;\n    left: 50%;\n    display: inline-block;\n    content: '';\n  }\n\n  &::before {\n    top: -16px;\n    margin-left: -9px;\n    /* stylelint-disable-next-line primer/borders */\n    border: 8px solid transparent;\n    border-bottom-color: var(--borderColor-default);\n  }\n\n  &::after {\n    top: -14px;\n    margin-left: -8px;\n    /* stylelint-disable-next-line primer/borders */\n    border: 7px solid transparent;\n    /* stylelint-disable-next-line primer/colors */\n    border-bottom-color: var(--overlay-bgColor);\n  }\n}\n\n/* No caret */\n.Popover-message--no-caret {\n  &::before,\n  &::after {\n    display: none;\n  }\n}\n\n/* Bottom-oriented carets */\n.Popover-message--bottom,\n.Popover-message--bottom-right,\n.Popover-message--bottom-left {\n  &::before,\n  &::after {\n    top: auto;\n    border-bottom-color: transparent;\n  }\n\n  &::before {\n    bottom: -16px;\n    border-top-color: var(--borderColor-default);\n  }\n\n  &::after {\n    bottom: -14px;\n    /* stylelint-disable-next-line primer/colors */\n    border-top-color: var(--overlay-bgColor);\n  }\n}\n\n/* Top and Bottom: Right-oriented carets */\n.Popover-message--top-right,\n.Popover-message--bottom-right {\n  right: -9px;\n  margin-right: 0;\n\n  &::before,\n  &::after {\n    left: auto;\n    margin-left: 0;\n  }\n\n  &::before {\n    right: var(--base-size-20);\n  }\n\n  &::after {\n    right: var(--base-size-20);\n    margin-right: 1px;\n  }\n}\n\n/* Top and Bottom: Left-oriented carets */\n.Popover-message--top-left,\n.Popover-message--bottom-left {\n  left: -9px;\n  margin-left: 0;\n\n  &::before,\n  &::after {\n    left: var(--base-size-24);\n    margin-left: 0;\n  }\n\n  &::after {\n    left: var(--base-size-24);\n    margin-left: 1px;\n  }\n}\n\n/* Right- and Left-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom,\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n  &::before,\n  &::after {\n    top: 50%;\n    left: auto;\n    margin-left: 0;\n    border-bottom-color: transparent;\n  }\n\n  &::before {\n    margin-top: -9px;\n  }\n\n  &::after {\n    margin-top: -8px;\n  }\n}\n\n/* Right-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom {\n  &::before {\n    right: -16px;\n    border-left-color: var(--borderColor-default);\n  }\n\n  &::after {\n    right: -14px;\n    /* stylelint-disable-next-line primer/colors */\n    border-left-color: var(--overlay-bgColor);\n  }\n}\n\n/* Left-oriented carets */\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n  &::before {\n    left: -16px;\n    border-right-color: var(--borderColor-default);\n  }\n\n  &::after {\n    left: -14px;\n    margin-bottom: 1px;\n    /* stylelint-disable-next-line primer/colors */\n    border-right-color: var(--overlay-bgColor);\n  }\n}\n\n/* Right and Left: Top-oriented carets */\n.Popover-message--right-top,\n.Popover-message--left-top {\n  &::before,\n  &::after {\n    top: var(--base-size-24);\n  }\n}\n\n/* Right and Left: Bottom-oriented carets */\n.Popover-message--right-bottom,\n.Popover-message--left-bottom {\n  &::before,\n  &::after {\n    top: auto;\n  }\n\n  &::before {\n    bottom: var(--base-size-16);\n  }\n\n  &::after {\n    bottom: var(--base-size-16);\n    margin-bottom: 1px;\n  }\n}\n\n@media (min-width: 544px) {\n  .Popover-message--large {\n    min-width: 320px;\n  }\n}\n\n/* Responsive Popover\n** For < md it will show full-width anchored to the bottom */\n\n@media (max-width: 767.98px) {\n  .Popover {\n    position: fixed;\n    top: auto !important;\n    right: 0 !important;\n    bottom: 0 !important;\n    left: 0 !important;\n  }\n\n  .Popover-message {\n    top: auto;\n    right: auto;\n    bottom: auto;\n    left: auto;\n    width: auto !important;\n    margin: var(--stack-gap-condensed);\n  }\n\n  /* Increase tap area for touch input */\n  .Popover-message > .btn-octicon {\n    padding: var(--control-medium-paddingInline-normal) !important;\n  }\n\n  /* Remove caret */\n  .Popover-message::after,\n  .Popover-message::before {\n    display: none;\n  }\n}\n"]}

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

@@ -94,6 +94,7 @@
 
   &::after {
     right: var(--base-size-20);
+    margin-right: 1px;
   }
 }
 
@@ -111,6 +112,7 @@
 
   &::after {
     left: var(--base-size-24);
+    margin-left: 1px;
   }
 }
 
@@ -165,6 +167,7 @@
 
   &::after {
     left: -14px;
+    margin-bottom: 1px;
     /* stylelint-disable-next-line primer/colors */
     border-right-color: var(--overlay-bgColor);
   }
@@ -193,6 +196,7 @@
 
   &::after {
     bottom: var(--base-size-16);
+    margin-bottom: 1px;
   }
 }
 

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

@@ -7,7 +7,6 @@ import './anchored_position';
 import './dialog_helper';
 import './focus_group';
 import './scrollable_region';
-import './aria_live';
 import './shared_events';
 import './alpha/modal_dialog';
 import './beta/nav_list';

data/app/components/primer/primer.js

@@ -7,7 +7,6 @@ import './anchored_position';
 import './dialog_helper';
 import './focus_group';
 import './scrollable_region';
-import './aria_live';
 import './shared_events';
 import './alpha/modal_dialog';
 import './beta/nav_list';

data/app/components/primer/primer.ts

@@ -7,7 +7,6 @@ import './anchored_position'
 import './dialog_helper'
 import './focus_group'
 import './scrollable_region'
-import './aria_live'
 import './shared_events'
 import './alpha/modal_dialog'
 import './beta/nav_list'

data/lib/primer/classify/utilities.rb

@@ -18,18 +18,18 @@ module Primer
 
       # Replacements for some classnames that end up being a different argument key
       REPLACEMENT_KEYS = {
-        Regexp.new("^f") => "font_size",
-        Regexp.new("^anim") => "animation",
-        Regexp.new("^v-align") => "vertical_align",
-        Regexp.new("^d") => "display",
-        Regexp.new("^wb") => "word_break",
-        Regexp.new("^v") => "visibility",
-        Regexp.new("^width") => "w",
-        Regexp.new("^height") => "h",
-        Regexp.new("^color-bg") => "bg",
-        Regexp.new("^color-border") => "border_color",
-        Regexp.new("^color-fg") => "color",
-        Regexp.new("^rounded") => "border_radius"
+        "f" => "font_size",
+        "anim" => "animation",
+        "v-align" => "vertical_align",
+        "d" => "display",
+        "wb" => "word_break",
+        "v" => "visibility",
+        "width" => "w",
+        "height" => "h",
+        "color-bg" => "bg",
+        "color-border" => "border_color",
+        "color-fg" => "color",
+        "rounded" => "border_radius"
       }.freeze
 
       SUPPORTED_KEY_CACHE = Hash.new { |h, k| h[k] = !UTILITIES[k].nil? }
@@ -190,7 +190,7 @@ module Primer
 
         def infer_selector_key(selector)
           REPLACEMENT_KEYS.each do |k, v|
-            return v.to_sym if selector.match?(k)
+            return v.to_sym if selector.start_with?(k)
           end
           selector.split("-").first.to_sym
         end

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 49
-      PATCH = 0
+      PATCH = 2
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

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

@@ -7,9 +7,9 @@
   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", active: true) %>
   <% panel.with_item(label: "Primer", href: "https://primer.style") %>
+  <% panel.with_item(label: "Microsoft", href: "https://microsoft.com", active: true) %>
+  <% panel.with_item(label: "GitHub", href: "https://github.com") %>
   <% panel.with_item(label: "Catalyst", href: "https://catalyst.rocks") %>
 <% end %>
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openproject-primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.49.0
+  version: 0.49.2
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-11-18 00:00:00.000000000 Z
+date: 2024-11-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -96,7 +96,6 @@ files:
 - app/assets/javascripts/components/primer/alpha/tool_tip.d.ts
 - app/assets/javascripts/components/primer/alpha/x_banner.d.ts
 - app/assets/javascripts/components/primer/anchored_position.d.ts
-- app/assets/javascripts/components/primer/aria_live.d.ts
 - app/assets/javascripts/components/primer/beta/auto_complete/auto_complete.d.ts
 - app/assets/javascripts/components/primer/beta/clipboard_copy.d.ts
 - app/assets/javascripts/components/primer/beta/nav_list.d.ts
@@ -320,9 +319,6 @@ files:
 - app/components/primer/anchored_position.d.ts
 - app/components/primer/anchored_position.js
 - app/components/primer/anchored_position.ts
-- app/components/primer/aria_live.d.ts
-- app/components/primer/aria_live.js
-- app/components/primer/aria_live.ts
 - app/components/primer/base_component.rb
 - app/components/primer/beta/auto_complete.rb
 - app/components/primer/beta/auto_complete/auto_complete.d.ts

data/app/assets/javascripts/components/primer/aria_live.d.ts

@@ -1,8 +0,0 @@
-export declare function announceFromElement(el: HTMLElement, options?: {
-    assertive?: boolean;
-    element?: HTMLElement;
-}): void;
-export declare function announce(message: string, options?: {
-    assertive?: boolean;
-    element?: HTMLElement;
-}): void;

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

@@ -1,8 +0,0 @@
-export declare function announceFromElement(el: HTMLElement, options?: {
-    assertive?: boolean;
-    element?: HTMLElement;
-}): void;
-export declare function announce(message: string, options?: {
-    assertive?: boolean;
-    element?: HTMLElement;
-}): void;

data/app/components/primer/aria_live.js

@@ -1,38 +0,0 @@
-const safeDocument = typeof document === 'undefined' ? undefined : document;
-// Announce an element's text to the screen reader.
-export function announceFromElement(el, options) {
-    announce(getTextContent(el), options);
-}
-// Announce message update to screen reader.
-// Note: Use caution when using this function while a dialog is active.
-// If the message is updated while the dialog is open, the screen reader may not announce the live region.
-export function announce(message, options) {
-    const { assertive, element } = options ?? {};
-    setContainerContent(message, assertive, element);
-}
-// Set aria-live container to message.
-function setContainerContent(message, assertive, element) {
-    const getQuerySelector = () => {
-        return assertive ? '#js-global-screen-reader-notice-assertive' : '#js-global-screen-reader-notice';
-    };
-    const container = element ?? safeDocument?.querySelector(getQuerySelector());
-    if (!container)
-        return;
-    if (container.textContent === message) {
-        /* This is a hack due to the way the aria live API works.
-        A screen reader will not read a live region again
-        if the text is the same. Adding a space character tells
-        the browser that the live region has updated,
-        which will cause it to read again, but with no audible difference. */
-        container.textContent = `${message}\u00A0`;
-    }
-    else {
-        container.textContent = message;
-    }
-}
-// Gets the trimmed text content of an element.
-function getTextContent(el) {
-    // innerText does not contain hidden text
-    /* eslint-disable-next-line github/no-innerText */
-    return (el.getAttribute('aria-label') || el.innerText || '').trim();
-}

data/app/components/primer/aria_live.ts

@@ -1,41 +0,0 @@
-const safeDocument = typeof document === 'undefined' ? undefined : document
-
-// Announce an element's text to the screen reader.
-export function announceFromElement(el: HTMLElement, options?: {assertive?: boolean; element?: HTMLElement}) {
-  announce(getTextContent(el), options)
-}
-
-// Announce message update to screen reader.
-// Note: Use caution when using this function while a dialog is active.
-// If the message is updated while the dialog is open, the screen reader may not announce the live region.
-export function announce(message: string, options?: {assertive?: boolean; element?: HTMLElement}) {
-  const {assertive, element} = options ?? {}
-
-  setContainerContent(message, assertive, element)
-}
-
-// Set aria-live container to message.
-function setContainerContent(message: string, assertive?: boolean, element?: HTMLElement) {
-  const getQuerySelector = () => {
-    return assertive ? '#js-global-screen-reader-notice-assertive' : '#js-global-screen-reader-notice'
-  }
-  const container = element ?? safeDocument?.querySelector(getQuerySelector())
-  if (!container) return
-  if (container.textContent === message) {
-    /* This is a hack due to the way the aria live API works.
-    A screen reader will not read a live region again
-    if the text is the same. Adding a space character tells
-    the browser that the live region has updated,
-    which will cause it to read again, but with no audible difference. */
-    container.textContent = `${message}\u00A0`
-  } else {
-    container.textContent = message
-  }
-}
-
-// Gets the trimmed text content of an element.
-function getTextContent(el: HTMLElement): string {
-  // innerText does not contain hidden text
-  /* eslint-disable-next-line github/no-innerText */
-  return (el.getAttribute('aria-label') || el.innerText || '').trim()
-}