@openproject/primer-view-components 0.41.1 → 0.42.0-rc.f2ac5817

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

@@ -1 +1 @@
-.SegmentedControl{--segmentedControl-item-padding:var(--control-small-paddingBlock);--overlay-offset:0.5rem;background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-radius:var(--borderRadius-medium);display:inline-flex;list-style:none}.SegmentedControl--iconOnly .Button--iconOnly.Button--medium,.SegmentedControl--iconOnly .Button--iconOnly.Button--small{padding-inline:0!important;width:100%}.SegmentedControl--small{--segmentedControl-item-padding:var(--control-xsmall-paddingBlock)}.SegmentedControl--small .SegmentedControl-item{height:var(--control-small-size)}.SegmentedControl--small .SegmentedControl-item .Button{padding-inline:calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding))}.SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-small-size)}.SegmentedControl--medium .SegmentedControl-item{height:var(--control-medium-size)}.SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-medium-size)}.SegmentedControl-item{border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);display:inline-flex;height:var(--control-medium-size);justify-content:center;padding:var(--segmentedControl-item-padding);position:relative}.SegmentedControl-item .Button--invisible:hover:not(:disabled){background-color:var(--controlTrack-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.SegmentedControl-item .Button--invisible:active:not(:disabled){background-color:var(--controlTrack-bgColor-active,var(--color-action-list-item-default-active-bg))}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-selected-border))}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin) solid var(--borderColor-default);content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock);margin-top:var(--control-medium-paddingBlock);position:absolute}.SegmentedControl-item .Button{border:0;border-radius:calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding)/2);font-weight:var(--base-text-weight-normal);height:100%;min-width:-moz-fit-content;min-width:fit-content;padding-inline:calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));width:100%}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding)/1);outline-offset:calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin))}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-default-fgColor-rest)}.SegmentedControl-item .Button-content{align-self:stretch;flex:1 1 auto}.SegmentedControl-item .Button-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}
+.SegmentedControl{--segmentedControl-item-padding:var(--control-small-paddingBlock);--overlay-offset:0.5rem;background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-color:var(--controlTrack-borderColor-rest,#0000);border-radius:var(--borderRadius-medium);display:inline-flex;list-style:none}.SegmentedControl--iconOnly .Button--iconOnly.Button--medium,.SegmentedControl--iconOnly .Button--iconOnly.Button--small{padding-inline:0!important;width:100%}.SegmentedControl--small{--segmentedControl-item-padding:var(--control-xsmall-paddingBlock)}.SegmentedControl--small .SegmentedControl-item{height:var(--control-small-size)}.SegmentedControl--small .SegmentedControl-item .Button{padding-inline:calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding))}.SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-small-size)}.SegmentedControl--medium .SegmentedControl-item{height:var(--control-medium-size)}.SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-medium-size)}.SegmentedControl-item{border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);display:inline-flex;height:var(--control-medium-size);justify-content:center;padding:var(--segmentedControl-item-padding);position:relative}.SegmentedControl-item .Button--invisible:hover:not(:disabled){background-color:var(--controlTrack-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.SegmentedControl-item .Button--invisible:active:not(:disabled){background-color:var(--controlTrack-bgColor-active,var(--color-action-list-item-default-active-bg))}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-selected-border))}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin) solid var(--borderColor-default);content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock);margin-top:var(--control-medium-paddingBlock);position:absolute}.SegmentedControl-item .Button{border:0;border-radius:calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding)/2);font-weight:var(--base-text-weight-normal);height:100%;min-width:-moz-fit-content;min-width:fit-content;padding-inline:calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));width:100%}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding)/1);outline-offset:calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin))}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-default-fgColor-rest)}.SegmentedControl-item .Button-content{align-self:stretch;flex:1 1 auto}.SegmentedControl-item .Button-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}

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

@@ -6,7 +6,6 @@ type SelectedItem = {
     label: string | null | undefined;
     value: string | null | undefined;
     inputName: string | null | undefined;
-    element: SelectPanelItem;
 };
 export type SelectPanelItem = HTMLLIElement;
 export type FilterFn = (item: SelectPanelItem, query: string) => boolean;

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

@@ -15,7 +15,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _SelectPanelElement_instances, _SelectPanelElement_dialogIntersectionObserver, _SelectPanelElement_abortController, _SelectPanelElement_originalLabel, _SelectPanelElement_inputName, _SelectPanelElement_selectedItems, _SelectPanelElement_loadingDelayTimeoutId, _SelectPanelElement_loadingAnnouncementTimeoutId, _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;
+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';
@@ -55,6 +55,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', () => {
@@ -73,6 +74,7 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
         _SelectPanelElement_selectedItems.set(this, new Map());
         _SelectPanelElement_loadingDelayTimeoutId.set(this, null);
         _SelectPanelElement_loadingAnnouncementTimeoutId.set(this, null);
+        _SelectPanelElement_hasLoadedData.set(this, false);
     }
     get open() {
         return this.dialog.open;
@@ -251,6 +253,7 @@ let SelectPanelElement = 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 },
                 bubbles: true,
@@ -300,6 +303,7 @@ let SelectPanelElement = 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 },
         });
@@ -385,6 +389,7 @@ _SelectPanelElement_inputName = new WeakMap();
 _SelectPanelElement_selectedItems = new WeakMap();
 _SelectPanelElement_loadingDelayTimeoutId = new WeakMap();
 _SelectPanelElement_loadingAnnouncementTimeoutId = new WeakMap();
+_SelectPanelElement_hasLoadedData = new WeakMap();
 _SelectPanelElement_instances = new WeakSet();
 _SelectPanelElement_waitForCondition = function _SelectPanelElement_waitForCondition(condition, body) {
     if (condition()) {
@@ -422,7 +427,7 @@ _SelectPanelElement_updateTabIndices = function _SelectPanelElement_updateTabInd
                 itemContent.setAttribute('tabindex', '-1');
             }
             // <li> elements should not themselves be tabbable
-            item.setAttribute('tabindex', '-1');
+            item.removeAttribute('tabindex');
         }
     }
     else {
@@ -437,7 +442,7 @@ _SelectPanelElement_updateTabIndices = function _SelectPanelElement_updateTabInd
                 itemContent.setAttribute('tabindex', '-1');
             }
             // <li> elements should not themselves be tabbable
-            item.setAttribute('tabindex', '-1');
+            item.removeAttribute('tabindex');
         }
     }
     if (!setZeroTabIndex && __classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_firstItem_get)) {
@@ -497,12 +502,14 @@ _SelectPanelElement_addSelectedItem = function _SelectPanelElement_addSelectedIt
             value,
             label: itemContent.querySelector('.ActionListItem-label')?.textContent?.trim(),
             inputName: itemContent.getAttribute('data-input-name'),
-            element: item,
         });
     }
 };
 _SelectPanelElement_removeSelectedItem = function _SelectPanelElement_removeSelectedItem(item) {
-    const value = item.getAttribute('data-value');
+    const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
+    if (!itemContent)
+        return;
+    const value = itemContent.getAttribute('data-value');
     if (value) {
         __classPrivateFieldGet(this, _SelectPanelElement_selectedItems, "f").delete(value);
     }
@@ -604,27 +611,33 @@ _SelectPanelElement_handleSearchFieldEvent = function _SelectPanelElement_handle
         if (key === 'Enter') {
             const item = this.visibleItems[0];
             if (item) {
-                __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_handleItemActivated).call(this, item, false);
+                const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
+                if (itemContent)
+                    itemContent.click();
             }
         }
         else if (key === 'ArrowDown') {
-            const item = (this.focusableItem || this.visibleItems[0]);
+            const item = (this.focusableItem || __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, this.visibleItems[0]));
             if (item) {
-                __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item).focus();
+                item.focus();
                 event.preventDefault();
             }
         }
         else if (key === 'Home') {
             const item = this.visibleItems[0];
             if (item) {
-                __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item).focus();
+                const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
+                if (itemContent)
+                    itemContent.focus();
                 event.preventDefault();
             }
         }
         else if (key === 'End') {
             if (this.visibleItems.length > 0) {
                 const item = this.visibleItems[this.visibleItems.length - 1];
-                __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item).focus();
+                const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
+                if (itemContent)
+                    itemContent.focus();
                 event.preventDefault();
             }
         }
@@ -672,7 +685,13 @@ _SelectPanelElement_updateItemVisibility = function _SelectPanelElement_updateIt
         if (!itemContent)
             continue;
         const value = itemContent.getAttribute('data-value');
-        if (value && !__classPrivateFieldGet(this, _SelectPanelElement_selectedItems, "f").has(value) && this.isItemChecked(item)) {
+        if (__classPrivateFieldGet(this, _SelectPanelElement_hasLoadedData, "f")) {
+            if (value && !__classPrivateFieldGet(this, _SelectPanelElement_selectedItems, "f").has(value)) {
+                itemContent.setAttribute(this.ariaSelectionType, 'false');
+            }
+        }
+        else if (value && !__classPrivateFieldGet(this, _SelectPanelElement_selectedItems, "f").has(value) && this.isItemChecked(item)) {
+            __classPrivateFieldSet(this, _SelectPanelElement_hasLoadedData, true, "f");
             __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_addSelectedItem).call(this, item);
         }
     }
@@ -786,7 +805,7 @@ _SelectPanelElement_handleDialogItemActivated = function _SelectPanelElement_han
     dialog.addEventListener('close', handleDialogClose, { signal });
     dialog.addEventListener('cancel', handleDialogClose, { signal });
 };
-_SelectPanelElement_handleItemActivated = function _SelectPanelElement_handleItemActivated(item, shouldClose = true) {
+_SelectPanelElement_handleItemActivated = function _SelectPanelElement_handleItemActivated(item) {
     // Hide popover after current event loop to prevent changes in focus from
     // altering the target of the event. Not doing this specifically affects
     // <a> tags. It causes the event to be sent to the currently focused element
@@ -795,7 +814,7 @@ _SelectPanelElement_handleItemActivated = function _SelectPanelElement_handleIte
     // works fine.
     if (this.selectVariant !== 'multiple') {
         setTimeout(() => {
-            if (this.open && shouldClose) {
+            if (this.open) {
                 this.hide();
             }
         });
@@ -814,17 +833,17 @@ _SelectPanelElement_handleItemActivated = function _SelectPanelElement_handleIte
         return;
     const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
     if (this.selectVariant === 'single') {
+        const value = this.selectedItems[0]?.value;
+        const element = this.visibleItems.find(el => __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, el)?.getAttribute('data-value') === value);
+        if (element) {
+            __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, element)?.setAttribute(this.ariaSelectionType, 'false');
+        }
+        __classPrivateFieldGet(this, _SelectPanelElement_selectedItems, "f").clear();
         // Only check, never uncheck here. Single-select mode does not allow unchecking a checked item.
         if (checked) {
             __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_addSelectedItem).call(this, item);
             itemContent?.setAttribute(this.ariaSelectionType, 'true');
         }
-        for (const checkedItem of this.querySelectorAll(`[${this.ariaSelectionType}]`)) {
-            if (checkedItem !== itemContent) {
-                __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_removeSelectedItem).call(this, checkedItem);
-                checkedItem.setAttribute(this.ariaSelectionType, 'false');
-            }
-        }
         __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_setDynamicLabel).call(this);
     }
     else {

package/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;

package/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}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openproject/primer-view-components",
-  "version": "0.41.1",
+  "version": "0.42.0-rc.f2ac5817",
   "description": "ViewComponents of the Primer Design System for OpenProject",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",

package/static/arguments.json

@@ -4336,9 +4336,9 @@
       },
       {
         "name": "prefix",
-        "type": "sring",
+        "type": "String",
         "default": "`nil`",
-        "description": "What to prefix the relative ime display with."
+        "description": "What to prefix the relative time display with."
       },
       {
         "name": "second",
@@ -4390,7 +4390,7 @@
       },
       {
         "name": "threshold",
-        "type": "string",
+        "type": "String",
         "default": "`nil`",
         "description": "The threshold, in ISO-8601 'durations' format, at which relative time displays become absolute."
       },
@@ -4414,13 +4414,13 @@
       },
       {
         "name": "lang",
-        "type": "string",
+        "type": "String",
         "default": "`nil`",
         "description": "The language to use."
       },
       {
         "name": "title",
-        "type": "string",
+        "type": "String",
         "default": "`nil`",
         "description": "Provide a custom title to the element."
       },

package/static/info_arch.json

@@ -989,9 +989,20 @@
         "slots": [
           {
             "name": "description",
-            "description": "Description content that complements the item's label. See `ActionList`'s `description_scheme` argument\nfor layout options.",
+            "description": "Description content that complements the item's label, with optional test_selector.\nSee `ActionList`'s `description_scheme` argument for layout options.",
             "parameters": [
-
+              {
+                "name": "legacy_content",
+                "type": "String",
+                "default": "N/A",
+                "description": "Slot content, provided for backwards-compatibility. Pass a content block instead, or call `with_content`, eg. `component.with_description { \"My description\" }` or `component.with_description.with_content(\"My description\")`."
+              },
+              {
+                "name": "test_selector",
+                "type": "String",
+                "default": "N/A",
+                "description": "The value of this argument is set as the value of a `data-test-selector` HTML attribute on the description element."
+              }
             ]
           },
           {
@@ -5547,9 +5558,20 @@
           },
           {
             "name": "description",
-            "description": "Description content that complements the item's label. See `ActionList`'s `description_scheme` argument\nfor layout options.",
+            "description": "Description content that complements the item's label, with optional test_selector.\nSee `ActionList`'s `description_scheme` argument for layout options.",
             "parameters": [
-
+              {
+                "name": "legacy_content",
+                "type": "String",
+                "default": "N/A",
+                "description": "Slot content, provided for backwards-compatibility. Pass a content block instead, or call `with_content`, eg. `component.with_description { \"My description\" }` or `component.with_description.with_content(\"My description\")`."
+              },
+              {
+                "name": "test_selector",
+                "type": "String",
+                "default": "N/A",
+                "description": "The value of this argument is set as the value of a `data-test-selector` HTML attribute on the description element."
+              }
             ]
           },
           {
@@ -8083,6 +8105,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/select_panel/list_of_links",
+        "name": "list_of_links",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -14687,9 +14722,20 @@
           },
           {
             "name": "description",
-            "description": "Description content that complements the item's label. See `ActionList`'s `description_scheme` argument\nfor layout options.",
+            "description": "Description content that complements the item's label, with optional test_selector.\nSee `ActionList`'s `description_scheme` argument for layout options.",
             "parameters": [
-
+              {
+                "name": "legacy_content",
+                "type": "String",
+                "default": "N/A",
+                "description": "Slot content, provided for backwards-compatibility. Pass a content block instead, or call `with_content`, eg. `component.with_description { \"My description\" }` or `component.with_description.with_content(\"My description\")`."
+              },
+              {
+                "name": "test_selector",
+                "type": "String",
+                "default": "N/A",
+                "description": "The value of this argument is set as the value of a `data-test-selector` HTML attribute on the description element."
+              }
             ]
           },
           {
@@ -15349,9 +15395,9 @@
       },
       {
         "name": "prefix",
-        "type": "sring",
+        "type": "String",
         "default": "`nil`",
-        "description": "What to prefix the relative ime display with."
+        "description": "What to prefix the relative time display with."
       },
       {
         "name": "second",
@@ -15403,7 +15449,7 @@
       },
       {
         "name": "threshold",
-        "type": "string",
+        "type": "String",
         "default": "`nil`",
         "description": "The threshold, in ISO-8601 'durations' format, at which relative time displays become absolute."
       },
@@ -15427,13 +15473,13 @@
       },
       {
         "name": "lang",
-        "type": "string",
+        "type": "String",
         "default": "`nil`",
         "description": "The language to use."
       },
       {
         "name": "title",
-        "type": "string",
+        "type": "String",
         "default": "`nil`",
         "description": "Provide a custom title to the element."
       },

package/static/previews.json

@@ -6624,6 +6624,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/select_panel/list_of_links",
+        "name": "list_of_links",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },