@primer/components 31.2.1-rc.18690e3f → 31.2.1-rc.a088bdc0

package/docs/content/ActionList2.mdx

@@ -336,13 +336,14 @@ render(<SelectFields />)
 
 ### ActionList.Group
 
-| Name             | Type                                         |  Default   | Description                                                                                                                              |
-| :--------------- | :------------------------------------------- | :--------: | :--------------------------------------------------------------------------------------------------------------------------------------- |
-| children\*       | `ActionList.Item[] or ActionList.LinkItem[]` |     -      | Required.                                                                                                                                |
-| title            | string                                       |     -      | Optional. Primary text which names a `Group`                                                                                             |
-| auxiliaryText    | string                                       |     -      | Optional. Secondary text which provides additional information about a `Group`.                                                          |
-| variant          | `'filled'` or `'subtle'`                     | `'subtle'` | Optional. `"filled"` - Superimposed on a background, offset from nearby content, `"subtle"` - Relatively less offset from nearby content |
-| selectionVariant | `'single'` or `'multiple'` or `false`        |     -      | Optional. Set `selectionVariant` at the group level                                                                                      |
+| Name             | Type                                                                                              |  Default   | Description                                                                                                                              |
+| :--------------- | :------------------------------------------------------------------------------------------------ | :--------: | :--------------------------------------------------------------------------------------------------------------------------------------- |
+| children\*       | `ActionList.Item[] or ActionList.LinkItem[]`                                                      |     -      | Required.                                                                                                                                |
+| title            | string                                                                                            |     -      | Optional. Primary text which names a `Group`                                                                                             |
+| auxiliaryText    | string                                                                                            |     -      | Optional. Secondary text which provides additional information about a `Group`.                                                          |
+| variant          | `'filled'` or `'subtle'`                                                                          | `'subtle'` | Optional. `"filled"` - Superimposed on a background, offset from nearby content, `"subtle"` - Relatively less offset from nearby content |
+| selectionVariant | `'single'` or `'multiple'` or `false`                                                             |     -      | Optional. Set `selectionVariant` at the group level                                                                                      |
+| role             | [AriaRole](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#roles) |     -      | Optional. \* The ARIA role describing the function of the list inside `Group` component. `listbox` or `menu` are a common values.        |
 
 <br />
 

package/docs/content/{Box.md → Box.mdx}

@@ -1,10 +1,12 @@
 ---
 title: Box
+status: Beta
 description: A low-level utility component that accepts styled system props to enable custom theme-aware styling
 source: https://github.com/primer/react/blob/main/src/Box.tsx
 ---
 
 import {Props} from '../src/props'
+import {ComponentChecklist} from '../src/component-checklist'
 import {Box} from '@primer/components'
 
 ```jsx live
@@ -72,3 +74,23 @@ Use Box to create [grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_
   </Box>
 </Box>
 ```
+
+## Component status
+
+<ComponentChecklist
+  items={{
+    propsDocumented: true,
+    noUnnecessaryDeps: true,
+    adaptsToThemes: true,
+    adaptsToScreenSizes: true,
+    fullTestCoverage: true,
+    usedInProduction: true,
+    usageExamplesDocumented: true,
+    designReviewed: null,
+    a11yReviewed: null,
+    stableApi: false,
+    addressedApiFeedback: false,
+    hasDesignGuidelines: null,
+    hasFigmaComponent: null
+  }}
+/>

package/docs/src/component-checklist.js

@@ -0,0 +1,81 @@
+import {Box, StyledOcticon, Link, Text} from '@primer/components'
+import {H3} from '@primer/gatsby-theme-doctocat/src/components/heading'
+import {CheckCircleFillIcon, CircleIcon, SkipIcon} from '@primer/octicons-react'
+import React from 'react'
+
+/** Render component status checklist in documentation pages */
+export function ComponentChecklist({items}) {
+  return (
+    <>
+      <H3>Alpha</H3>
+      <Checklist aria-describedby="alpha">
+        <Checklist.Item checked={items.propsDocumented}>Component props are documented.</Checklist.Item>
+        <Checklist.Item checked={items.noUnnecessaryDeps}>
+          Component does not have any unnecessary third-party dependencies.
+        </Checklist.Item>
+        <Checklist.Item checked={items.adaptsToThemes}>Component can adapt to different themes.</Checklist.Item>
+        <Checklist.Item checked={items.adaptsToScreenSizes}>
+          Component can adapt to different screen sizes.
+        </Checklist.Item>
+        <Checklist.Item checked={items.fullTestCoverage}>Component has 100% test coverage.</Checklist.Item>
+      </Checklist>
+      <H3>Beta</H3>
+      <Checklist aria-describedby="beta">
+        <Checklist.Item checked={items.usedInProduction}>Component is used in a production application.</Checklist.Item>
+        <Checklist.Item checked={items.usageExamplesDocumented}>Common usage examples are documented.</Checklist.Item>
+        <Checklist.Item checked={items.designReviewed}>
+          Component has been reviewed by a systems designer and any resulting issues have been addressed.
+        </Checklist.Item>
+        <Checklist.Item checked={items.a11yReviewed}>
+          Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.
+        </Checklist.Item>
+      </Checklist>
+      <H3>Stable</H3>
+      <Checklist aria-describedby="stable">
+        <Checklist.Item checked={items.apiIsStable}>
+          Component API has been stable with no breaking changes for at least one month.
+        </Checklist.Item>
+        <Checklist.Item checked={items.addressedApiFeedback}>
+          Feedback on API usability has been sought from developers using the component and any resulting issues have
+          been addressed.
+        </Checklist.Item>
+        <Checklist.Item checked={items.hasDesignGuidelines}>
+          Component has corresponding design guidelines documented in the{' '}
+          <Link href="https://primer.style/design/">interface guidelines</Link>.
+        </Checklist.Item>
+        <Checklist.Item checked={items.hasFigmaComponent}>
+          Component has corresponding Figma component in the Primer Web library.
+        </Checklist.Item>
+      </Checklist>
+    </>
+  )
+}
+
+// TODO: This component should live in Doctocat
+function Checklist({'aria-describedby': ariaDescribedby, children}) {
+  return (
+    <Box aria-describedby={ariaDescribedby} as="ul" display="grid" gridGap={2} p={0} m={0} mb={3}>
+      {children}
+    </Box>
+  )
+}
+
+Checklist.Item = ({checked, children}) => {
+  return (
+    <Box as="li" display="grid" gridTemplateColumns="auto 1fr" gridGap={2} sx={{listStyleType: 'none'}}>
+      <Box height="24px" display="flex" alignItems="center">
+        {checked ? (
+          <StyledOcticon aria-label="Completed" icon={CheckCircleFillIcon} sx={{color: 'success.fg'}} />
+        ) : checked === null ? (
+          <StyledOcticon icon={SkipIcon} sx={{color: 'fg.subtle'}} />
+        ) : (
+          <StyledOcticon aria-label="To do" icon={CircleIcon} sx={{color: 'fg.subtle'}} />
+        )}
+      </Box>
+      <Text color={checked === null ? 'fg.subtle' : 'fg.default'}>
+        {checked === null ? <Text color="fg.subtle">N/A: </Text> : null}
+        {children}
+      </Text>
+    </Box>
+  )
+}

package/lib/ActionList/Item.js

@@ -35,39 +35,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-/**
- * These colors are not yet in our default theme.  Need to remove this once they are added.
- */
-const customItemThemes = {
-  default: {
-    hover: {
-      light: 'rgba(46, 77, 108, 0.06)',
-      dark: 'rgba(201, 206, 212, 0.12)',
-      dark_dimmed: 'rgba(201, 206, 212, 0.12)'
-    },
-    focus: {
-      light: 'rgba(54, 77, 100, 0.16)',
-      dark: 'rgba(201, 206, 212, 0.24)',
-      dark_dimmed: 'rgba(201, 206, 212, 0.24)'
-    }
-  },
-  danger: {
-    hover: {
-      light: 'rgba(234, 74, 90, 0.08)',
-      dark: 'rgba(248, 81, 73, 0.16)',
-      dark_dimmed: 'rgba(248, 81, 73, 0.16)'
-    },
-    focus: {
-      light: 'rgba(234, 74, 90, 0.14)',
-      dark: 'rgba(248, 81, 73, 0.24)',
-      dark_dimmed: 'rgba(248, 81, 73, 0.24)'
-    }
-  }
-};
-/**
- * Contract for props passed to the `Item` component.
- */
-
 const getItemVariant = (variant = 'default', disabled) => {
   if (disabled) {
     return {
@@ -84,7 +51,10 @@ const getItemVariant = (variant = 'default', disabled) => {
         color: (0, _constants.get)('colors.danger.fg'),
         iconColor: (0, _constants.get)('colors.danger.fg'),
         annotationColor: (0, _constants.get)('colors.fg.muted'),
-        hoverCursor: 'pointer'
+        hoverCursor: 'pointer',
+        hoverBg: (0, _constants.get)('colors.actionListItem.danger.hoverBg'),
+        focusBg: (0, _constants.get)('colors.actionListItem.danger.activeBg'),
+        hoverText: (0, _constants.get)('colors.actionListItem.danger.hoverText')
       };
 
     default:
@@ -92,7 +62,9 @@ const getItemVariant = (variant = 'default', disabled) => {
         color: (0, _constants.get)('colors.fg.default'),
         iconColor: (0, _constants.get)('colors.fg.muted'),
         annotationColor: (0, _constants.get)('colors.fg.muted'),
-        hoverCursor: 'pointer'
+        hoverCursor: 'pointer',
+        hoverBg: (0, _constants.get)('colors.actionListItem.default.hoverBg'),
+        focusBg: (0, _constants.get)('colors.actionListItem.default.activeBg')
       };
   }
 };
@@ -110,12 +82,16 @@ const MainContent = _styledComponents.default.div.withConfig({
 const StyledItem = _styledComponents.default.div.withConfig({
   displayName: "Item__StyledItem",
   componentId: "jqpvy8-2"
-})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;text-decoration:none;@media (hover:hover) and (pointer:fine){:hover{background:var(--item-hover-bg-override,", ");cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], (0, _constants.get)('space.2'), (0, _constants.get)('radii.2'), ({
+})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;text-decoration:none;@media (hover:hover) and (pointer:fine){:hover{background:var( --item-hover-bg-override,", " );color:", ";cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], (0, _constants.get)('space.2'), (0, _constants.get)('radii.2'), ({
   variant,
   item
 }) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).color, ({
-  hoverBackground
-}) => hoverBackground, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverText, ({
   variant,
   item
 }) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverCursor, _Divider.StyledDivider, _Header.StyledHeader, ({
@@ -123,14 +99,18 @@ const StyledItem = _styledComponents.default.div.withConfig({
 }) => showDivider ? `1px` : '0', DividedContent, (0, _constants.get)('colors.border.muted'), ({
   showDivider
 }) => showDivider ? `1px` : '0', DividedContent, DividedContent, DividedContent, DividedContent, _focusZone.isActiveDescendantAttribute, DividedContent, _focusZone.isActiveDescendantAttribute, DividedContent, _focusZone.isActiveDescendantAttribute, _focusZone.activeDescendantActivatedDirectly, ({
-  focusBackground
-}) => focusBackground, _focusZone.isActiveDescendantAttribute, _focusZone.activeDescendantActivatedIndirectly, ({
-  hoverBackground
-}) => hoverBackground, ({
-  focusBackground
-}) => focusBackground, ({
-  focusBackground
-}) => focusBackground, _sx.default);
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, _focusZone.isActiveDescendantAttribute, _focusZone.activeDescendantActivatedIndirectly, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, _sx.default);
 
 const TextContainer = _styledComponents.default.span.withConfig({
   displayName: "Item__TextContainer",
@@ -229,9 +209,6 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
       onAction === null || onAction === void 0 ? void 0 : onAction(itemProps, event);
     }
   }, [onAction, disabled, itemProps, onClick]);
-  const customItemTheme = customItemThemes[variant];
-  const hoverBackground = (0, _ThemeProvider.useColorSchemeVar)(customItemTheme.hover, 'inherit');
-  const focusBackground = (0, _ThemeProvider.useColorSchemeVar)(customItemTheme.focus, 'inherit');
   const {
     theme
   } = (0, _ThemeProvider.useTheme)();
@@ -247,9 +224,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
   }, props, {
     "data-id": id,
     onKeyPress: keyPressHandler,
-    onClick: clickHandler,
-    hoverBackground: disabled ? 'inherit' : hoverBackground,
-    focusBackground: disabled ? 'inherit' : focusBackground
+    onClick: clickHandler
   }), !!selected === selected && /*#__PURE__*/_react.default.createElement(BaseVisualContainer, null, selectionVariant === 'multiple' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(MultiSelectIcon, {
     selected: selected,
     width: "16",

package/lib/ActionList/Item.jsx

@@ -34,35 +34,6 @@ const Divider_1 = require("./Divider");
 const ThemeProvider_1 = require("../ThemeProvider");
 const focusZone_1 = require("../behaviors/focusZone");
 const ssr_1 = require("@react-aria/ssr");
-/**
- * These colors are not yet in our default theme.  Need to remove this once they are added.
- */
-const customItemThemes = {
-    default: {
-        hover: {
-            light: 'rgba(46, 77, 108, 0.06)',
-            dark: 'rgba(201, 206, 212, 0.12)',
-            dark_dimmed: 'rgba(201, 206, 212, 0.12)'
-        },
-        focus: {
-            light: 'rgba(54, 77, 100, 0.16)',
-            dark: 'rgba(201, 206, 212, 0.24)',
-            dark_dimmed: 'rgba(201, 206, 212, 0.24)'
-        }
-    },
-    danger: {
-        hover: {
-            light: 'rgba(234, 74, 90, 0.08)',
-            dark: 'rgba(248, 81, 73, 0.16)',
-            dark_dimmed: 'rgba(248, 81, 73, 0.16)'
-        },
-        focus: {
-            light: 'rgba(234, 74, 90, 0.14)',
-            dark: 'rgba(248, 81, 73, 0.24)',
-            dark_dimmed: 'rgba(248, 81, 73, 0.24)'
-        }
-    }
-};
 const getItemVariant = (variant = 'default', disabled) => {
     if (disabled) {
         return {
@@ -78,14 +49,19 @@ const getItemVariant = (variant = 'default', disabled) => {
                 color: constants_1.get('colors.danger.fg'),
                 iconColor: constants_1.get('colors.danger.fg'),
                 annotationColor: constants_1.get('colors.fg.muted'),
-                hoverCursor: 'pointer'
+                hoverCursor: 'pointer',
+                hoverBg: constants_1.get('colors.actionListItem.danger.hoverBg'),
+                focusBg: constants_1.get('colors.actionListItem.danger.activeBg'),
+                hoverText: constants_1.get('colors.actionListItem.danger.hoverText')
             };
         default:
             return {
                 color: constants_1.get('colors.fg.default'),
                 iconColor: constants_1.get('colors.fg.muted'),
                 annotationColor: constants_1.get('colors.fg.muted'),
-                hoverCursor: 'pointer'
+                hoverCursor: 'pointer',
+                hoverBg: constants_1.get('colors.actionListItem.default.hoverBg'),
+                focusBg: constants_1.get('colors.actionListItem.default.activeBg')
             };
     }
 };
@@ -121,7 +97,11 @@ const StyledItem = styled_components_1.default.div `
   @media (hover: hover) and (pointer: fine) {
     :hover {
       // allow override in case another item in the list is active/focused
-      background: var(--item-hover-bg-override, ${({ hoverBackground }) => hoverBackground});
+      background: var(
+        --item-hover-bg-override,
+        ${({ variant, item }) => getItemVariant(variant, item?.disabled).hoverBg}
+      );
+      color: ${({ variant, item }) => getItemVariant(variant, item?.disabled).hoverText};
       cursor: ${({ variant, item }) => getItemVariant(variant, item?.disabled).hoverCursor};
     }
   }
@@ -167,19 +147,19 @@ const StyledItem = styled_components_1.default.div `
 
   // Active Descendant
   &[${focusZone_1.isActiveDescendantAttribute}='${focusZone_1.activeDescendantActivatedDirectly}'] {
-    background: ${({ focusBackground }) => focusBackground};
+    background: ${({ variant, item }) => getItemVariant(variant, item?.disabled).focusBg};
   }
   &[${focusZone_1.isActiveDescendantAttribute}='${focusZone_1.activeDescendantActivatedIndirectly}'] {
-    background: ${({ hoverBackground }) => hoverBackground};
+    background: ${({ variant, item }) => getItemVariant(variant, item?.disabled).hoverBg};
   }
 
   &:focus {
-    background: ${({ focusBackground }) => focusBackground};
+    background: ${({ variant, item }) => getItemVariant(variant, item?.disabled).focusBg};
     outline: none;
   }
 
   &:active {
-    background: ${({ focusBackground }) => focusBackground};
+    background: ${({ variant, item }) => getItemVariant(variant, item?.disabled).focusBg};
   }
 
   ${sx_1.default}
@@ -264,11 +244,8 @@ exports.Item = react_1.default.forwardRef((itemProps, ref) => {
             onAction?.(itemProps, event);
         }
     }, [onAction, disabled, itemProps, onClick]);
-    const customItemTheme = customItemThemes[variant];
-    const hoverBackground = ThemeProvider_1.useColorSchemeVar(customItemTheme.hover, 'inherit');
-    const focusBackground = ThemeProvider_1.useColorSchemeVar(customItemTheme.focus, 'inherit');
     const { theme } = ThemeProvider_1.useTheme();
-    return (<StyledItem ref={ref} as={Component} tabIndex={disabled ? undefined : -1} variant={variant} showDivider={showDivider} aria-selected={selected} aria-labelledby={text ? labelId : undefined} aria-describedby={description ? descriptionId : undefined} {...props} data-id={id} onKeyPress={keyPressHandler} onClick={clickHandler} hoverBackground={disabled ? 'inherit' : hoverBackground} focusBackground={disabled ? 'inherit' : focusBackground}>
+    return (<StyledItem ref={ref} as={Component} tabIndex={disabled ? undefined : -1} variant={variant} showDivider={showDivider} aria-selected={selected} aria-labelledby={text ? labelId : undefined} aria-describedby={description ? descriptionId : undefined} {...props} data-id={id} onKeyPress={keyPressHandler} onClick={clickHandler}>
       {!!selected === selected && (<BaseVisualContainer>
           {selectionVariant === 'multiple' ? (<>
               {/**

package/lib/ActionList2/Description.js

@@ -23,7 +23,6 @@ const Description = ({
   ...props
 }) => {
   const styles = {
-    color: 'fg.muted',
     fontSize: 0,
     lineHeight: '16px',
     flexGrow: 1,
@@ -35,14 +34,19 @@ const Description = ({
     name: variant === 'block' ? 'BlockDescription' : 'InlineDescription'
   }, ({
     blockDescriptionId,
-    inlineDescriptionId
+    inlineDescriptionId,
+    disabled
   }) => variant === 'block' ? /*#__PURE__*/_react.default.createElement(_Box.default, {
     as: "span",
-    sx: (0, _sx.merge)(styles, sx),
+    sx: (0, _sx.merge)({ ...styles,
+      color: disabled ? 'fg.disabled' : 'fg.muted'
+    }, sx),
     id: blockDescriptionId
   }, props.children) : /*#__PURE__*/_react.default.createElement(_Truncate.default, {
     id: inlineDescriptionId,
-    sx: (0, _sx.merge)(styles, sx),
+    sx: (0, _sx.merge)({ ...styles,
+      color: disabled ? 'fg.disabled' : 'fg.muted'
+    }, sx),
     title: props.children,
     inline: true,
     maxWidth: "100%"

package/lib/ActionList2/Description.jsx

@@ -11,7 +11,6 @@ const Truncate_1 = __importDefault(require("../Truncate"));
 const Item_1 = require("./Item");
 const Description = ({ variant = 'inline', sx = {}, ...props }) => {
     const styles = {
-        color: 'fg.muted',
         fontSize: 0,
         lineHeight: '16px',
         flexGrow: 1,
@@ -20,9 +19,9 @@ const Description = ({ variant = 'inline', sx = {}, ...props }) => {
         marginLeft: variant === 'block' ? 0 : 2
     };
     return (<Item_1.Slot name={variant === 'block' ? 'BlockDescription' : 'InlineDescription'}>
-      {({ blockDescriptionId, inlineDescriptionId }) => variant === 'block' ? (<Box_1.default as="span" sx={sx_1.merge(styles, sx)} id={blockDescriptionId}>
+      {({ blockDescriptionId, inlineDescriptionId, disabled }) => variant === 'block' ? (<Box_1.default as="span" sx={sx_1.merge({ ...styles, color: disabled ? 'fg.disabled' : 'fg.muted' }, sx)} id={blockDescriptionId}>
             {props.children}
-          </Box_1.default>) : (<Truncate_1.default id={inlineDescriptionId} sx={sx_1.merge(styles, sx)} title={props.children} inline={true} maxWidth="100%">
+          </Box_1.default>) : (<Truncate_1.default id={inlineDescriptionId} sx={sx_1.merge({ ...styles, color: disabled ? 'fg.disabled' : 'fg.muted' }, sx)} title={props.children} inline={true} maxWidth="100%">
             {props.children}
           </Truncate_1.default>)}
     </Item_1.Slot>);

package/lib/ActionList2/Group.d.ts

@@ -1,11 +1,37 @@
 import React from 'react';
 import { SxProp } from '../sx';
-import { HeaderProps } from './Header';
 import { ListProps } from './List';
-export declare type GroupProps = HeaderProps & SxProp & {
+import { AriaRole } from '../utils/types';
+export declare type GroupProps = {
+    /**
+     * Style variations. Usage is discretionary.
+     *
+     * - `"filled"` - Superimposed on a background, offset from nearby content
+     * - `"subtle"` - Relatively less offset from nearby content
+     */
+    variant?: 'subtle' | 'filled';
+    /**
+     * Primary text which names a `Group`.
+     */
+    title?: string;
+    /**
+     * Secondary text which provides additional information about a `Group`.
+     */
+    auxiliaryText?: string;
+    /**
+     * The ARIA role describing the function of the list inside `Group` component. `listbox` or `menu` are a common values.
+     */
+    role?: AriaRole;
+} & SxProp & {
+    /**
+     * Whether multiple Items or a single Item can be selected in the Group. Overrides value on ActionList root.
+     */
     selectionVariant?: ListProps['selectionVariant'] | false;
 };
 declare type ContextProps = Pick<GroupProps, 'selectionVariant'>;
 export declare const GroupContext: React.Context<ContextProps>;
 export declare const Group: React.FC<GroupProps>;
+export declare type HeaderProps = Pick<GroupProps, 'variant' | 'title' | 'auxiliaryText'> & {
+    labelId: string;
+};
 export {};

package/lib/ActionList2/Group.js

@@ -7,9 +7,11 @@ exports.Group = exports.GroupContext = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _ssr = require("@react-aria/ssr");
+
 var _Box = _interopRequireDefault(require("../Box"));
 
-var _Header = require("./Header");
+var _List = require("./List");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -21,12 +23,14 @@ exports.GroupContext = GroupContext;
 
 const Group = ({
   title,
-  variant,
+  variant = 'subtle',
   auxiliaryText,
   selectionVariant,
+  role,
   sx = {},
   ...props
 }) => {
+  const labelId = (0, _ssr.useSSRSafeId)();
   return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
     as: "li",
     sx: {
@@ -37,10 +41,11 @@ const Group = ({
       // hide the ::marker inserted by browser's stylesheet
       ...sx
     }
-  }, props), title && /*#__PURE__*/_react.default.createElement(_Header.Header, {
+  }, props), title && /*#__PURE__*/_react.default.createElement(Header, {
     title: title,
     variant: variant,
-    auxiliaryText: auxiliaryText
+    auxiliaryText: auxiliaryText,
+    labelId: labelId
   }), /*#__PURE__*/_react.default.createElement(GroupContext.Provider, {
     value: {
       selectionVariant
@@ -49,9 +54,53 @@ const Group = ({
     as: "ul",
     sx: {
       paddingInlineStart: 0
-    }
+    },
+    "aria-labelledby": title ? labelId : undefined,
+    role: role
   }, props.children)));
 };
 
 exports.Group = Group;
-Group.displayName = "Group";
+Group.displayName = "Group";
+
+/**
+ * Displays the name and description of a `Group`.
+ *
+ * For visual presentation only. It's hidden from screen readers.
+ */
+const Header = ({
+  variant,
+  title,
+  auxiliaryText,
+  labelId,
+  ...props
+}) => {
+  const {
+    variant: listVariant
+  } = _react.default.useContext(_List.ListContext);
+
+  const styles = {
+    paddingY: '6px',
+    paddingX: listVariant === 'full' ? 2 : 3,
+    fontSize: 0,
+    fontWeight: 'bold',
+    color: 'fg.muted',
+    ...(variant === 'filled' && {
+      backgroundColor: 'canvas.subtle',
+      marginX: 0,
+      marginBottom: 2,
+      borderTop: '1px solid',
+      borderBottom: '1px solid',
+      borderColor: 'neutral.muted'
+    })
+  };
+  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    sx: styles,
+    role: "presentation",
+    "aria-hidden": "true"
+  }, props), /*#__PURE__*/_react.default.createElement("span", {
+    id: labelId
+  }, title), auxiliaryText && /*#__PURE__*/_react.default.createElement("span", null, auxiliaryText));
+};
+
+Header.displayName = "Header";

package/lib/ActionList2/Group.jsx

@@ -5,21 +5,50 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Group = exports.GroupContext = void 0;
 const react_1 = __importDefault(require("react"));
+const ssr_1 = require("@react-aria/ssr");
 const Box_1 = __importDefault(require("../Box"));
-const Header_1 = require("./Header");
+const List_1 = require("./List");
 exports.GroupContext = react_1.default.createContext({});
-const Group = ({ title, variant, auxiliaryText, selectionVariant, sx = {}, ...props }) => {
+const Group = ({ title, variant = 'subtle', auxiliaryText, selectionVariant, role, sx = {}, ...props }) => {
+    const labelId = ssr_1.useSSRSafeId();
     return (<Box_1.default as="li" sx={{
             '&:not(:first-child)': { marginTop: 2 },
             listStyle: 'none',
             ...sx
         }} {...props}>
-      {title && <Header_1.Header title={title} variant={variant} auxiliaryText={auxiliaryText}/>}
+      {title && <Header title={title} variant={variant} auxiliaryText={auxiliaryText} labelId={labelId}/>}
       <exports.GroupContext.Provider value={{ selectionVariant }}>
-        <Box_1.default as="ul" sx={{ paddingInlineStart: 0 }}>
+        <Box_1.default as="ul" sx={{ paddingInlineStart: 0 }} aria-labelledby={title ? labelId : undefined} role={role}>
           {props.children}
         </Box_1.default>
       </exports.GroupContext.Provider>
     </Box_1.default>);
 };
 exports.Group = Group;
+/**
+ * Displays the name and description of a `Group`.
+ *
+ * For visual presentation only. It's hidden from screen readers.
+ */
+const Header = ({ variant, title, auxiliaryText, labelId, ...props }) => {
+    const { variant: listVariant } = react_1.default.useContext(List_1.ListContext);
+    const styles = {
+        paddingY: '6px',
+        paddingX: listVariant === 'full' ? 2 : 3,
+        fontSize: 0,
+        fontWeight: 'bold',
+        color: 'fg.muted',
+        ...(variant === 'filled' && {
+            backgroundColor: 'canvas.subtle',
+            marginX: 0,
+            marginBottom: 2,
+            borderTop: '1px solid',
+            borderBottom: '1px solid',
+            borderColor: 'neutral.muted'
+        })
+    };
+    return (<Box_1.default sx={styles} role="presentation" aria-hidden="true" {...props}>
+      <span id={labelId}>{title}</span>
+      {auxiliaryText && <span>{auxiliaryText}</span>}
+    </Box_1.default>);
+};

package/lib/ActionList2/Item.js

@@ -34,9 +34,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const getVariantStyles = (variant, disabled) => {
   if (disabled) {
     return {
-      color: 'fg.muted',
-      iconColor: 'fg.muted',
-      annotationColor: 'fg.muted'
+      color: 'primer.fg.disabled',
+      iconColor: 'primer.fg.disabled',
+      annotationColor: 'primer.fg.disabled'
     };
   }
 
@@ -105,10 +105,9 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
     borderRadius: listVariant === 'inset' ? 2 : 0,
     transition: 'background 33.333ms linear',
     color: getVariantStyles(variant, disabled).color,
-    textDecoration: 'none',
-    // for as="a"
-    ':not([aria-disabled])': {
-      cursor: 'pointer'
+    cursor: 'pointer',
+    '&[aria-disabled]': {
+      cursor: 'not-allowed'
     },
     '@media (hover: hover) and (pointer: fine)': {
       ':hover:not([aria-disabled])': {