@primer/react 38.27.0 → 38.28.0-rc.5b1595e6f

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @primer/react
 
+## 38.28.0
+
+### Minor Changes
+
+- [#7923](https://github.com/primer/react/pull/7923) [`6a7e130`](https://github.com/primer/react/commit/6a7e13051139ba06e48391edc0b05ef555b814b9) Thanks [@dylanatsmith](https://github.com/dylanatsmith)! - Card: Add `layout="compact"` prop for a compact card layout with tighter spacing, no icon background, and smaller title
+
+- [#7922](https://github.com/primer/react/pull/7922) [`55b7b04`](https://github.com/primer/react/commit/55b7b04647af9d7812e9ff77605524048358039c) Thanks [@dylanatsmith](https://github.com/dylanatsmith)! - InlineMessage: Make `variant` prop optional, defaulting to the standard foreground color with an info icon
+
+- [#7889](https://github.com/primer/react/pull/7889) [`3af5edc`](https://github.com/primer/react/commit/3af5edc56dd21aaa16c7c1676c4627c4ecd6f0f2) Thanks [@llastflowers](https://github.com/llastflowers)! - Add data-component attributes and associated tests for PageHeader, PageLayout, Pagehead, Popover, Portal, and ProgressBar
+
+- [#7964](https://github.com/primer/react/pull/7964) [`0f0f79f`](https://github.com/primer/react/commit/0f0f79f5da92087e636cde0d0709479c9c68d2d1) Thanks [@TylerJDev](https://github.com/TylerJDev)! - AnchoredOverlay: Add `cssAnchorPositioningSettings` prop to allow opting out of native CSS anchor positioning (via `disable`), and use it in `SelectPanel` so the `modal` variant stays manually centered instead of being repositioned by CSS anchor positioning.
+
+### Patch Changes
+
+- [#7918](https://github.com/primer/react/pull/7918) [`95986ce`](https://github.com/primer/react/commit/95986ce22eaca6f4cb2122a00d51ec93d72f2dfe) Thanks [@jonrohan](https://github.com/jonrohan)! - Autocomplete: Keep the typed text instead of restoring the full inline suggestion when the input loses focus, matching the behavior of pressing Escape
+
+- [#7910](https://github.com/primer/react/pull/7910) [`0c38cfa`](https://github.com/primer/react/commit/0c38cfaeabab347e48d4e34c200739e32efa73a2) Thanks [@janmaarten-a11y](https://github.com/janmaarten-a11y)! - Timeline: Add `primer_react_timeline_list_semantics` feature flag to opt into list semantics
+
+  When the `primer_react_timeline_list_semantics` feature flag is enabled, `Timeline` renders as `<ol role="list">` and `Timeline.Item` / `Timeline.Break` render as `<li>` so screen reader users get list navigation (total item count, position in sequence). The default behavior is unchanged — `Timeline` and its subcomponents still render as `<div>` until the flag is opted into.
+
+  Enable the flag with the `FeatureFlags` provider:
+
+  ```tsx
+  import {FeatureFlags} from '@primer/react/experimental'
+
+  ;<FeatureFlags flags={{primer_react_timeline_list_semantics: true}}>
+    <Timeline>…</Timeline>
+  </FeatureFlags>
+  ```
+
 ## 38.27.0
 
 ### Minor Changes

package/dist/AnchoredOverlay/AnchoredOverlay.d.ts

@@ -99,6 +99,15 @@ interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'
      * and the browser supports native CSS anchor positioning. Has no effect otherwise. Defaults to `"portal"`.
      */
     renderAs?: 'portal' | 'popover';
+    /**
+     * Settings for native CSS anchor positioning.
+     *
+     * - `disable`: When `true`, opts this overlay out of native CSS anchor positioning (and the Popover API)
+     *   even if `primer_react_css_anchor_positioning` is enabled and the browser supports it.
+     */
+    cssAnchorPositioningSettings?: {
+        disable?: boolean;
+    };
 }
 export type AnchoredOverlayProps = AnchoredOverlayBaseProps & (AnchoredOverlayPropsWithAnchor | AnchoredOverlayPropsWithoutAnchor) & Partial<Pick<PositionSettings, 'align' | 'side' | 'anchorOffset' | 'alignmentOffset' | 'displayInViewport'>>;
 /**

package/dist/AnchoredOverlay/AnchoredOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnchoredOverlay.d.ts","sourceRoot":"","sources":["../../src/AnchoredOverlay/AnchoredOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAmC,KAAK,GAAG,EAAC,MAAM,OAAO,CAAA;AAChE,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,YAAY,CAAA;AAE5C,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,uBAAuB,CAAA;AAEhE,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,uBAAuB,CAAA;AAIhE,OAAO,KAAK,EAAC,cAAc,EAAE,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AACvE,OAAO,EAAC,KAAK,eAAe,EAAC,MAAM,6BAA6B,CAAA;AAChE,OAAO,EAAa,KAAK,eAAe,EAAC,MAAM,WAAW,CAAA;AAO1D,UAAU,8BAA8B;IACtC;;;OAGG;IACH,YAAY,EAAE,CAAC,CAAC,SAAS,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,YAAY,GAAG,iBAAiB,CAAC,EAChG,KAAK,EAAE,CAAC,KACL,GAAG,CAAC,OAAO,CAAA;IAEhB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAE/C;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,UAAU,iCAAiC;IACzC;;;OAGG;IACH,YAAY,EAAE,IAAI,CAAA;IAElB;;;OAGG;IACH,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAC9C;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,MAAM,iCAAiC,GACzC,OAAO,CAAC,8BAA8B,CAAC,GACvC,iCAAiC,CAAA;AAErC,UAAU,wBAAyB,SAAQ,IAAI,CAAC,YAAY,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC/E;;OAEG;IACH,IAAI,EAAE,OAAO,CAAA;IAEb;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,kBAAkB,EAAE,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,OAAO,CAAA;IAE5G;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,eAAe,GAAG,QAAQ,GAAG,OAAO,KAAK,OAAO,CAAA;IAErF;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;IAEpC;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAA;IAElD;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAA;IAElD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,UAAU,EAAE,UAAU,GAAG,YAAY,CAAC,CAAA;IAChE;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,EAAC,QAAQ,EAAC,EAAE;QAAC,QAAQ,EAAE,cAAc,CAAA;KAAC,KAAK,IAAI,CAAA;IACnE;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;IAC3C;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;CAChC;AAED,MAAM,MAAM,oBAAoB,GAAG,wBAAwB,GACzD,CAAC,8BAA8B,GAAG,iCAAiC,CAAC,GACpE,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,MAAM,GAAG,cAAc,GAAG,iBAAiB,GAAG,mBAAmB,CAAC,CAAC,CAAA;AAS9G;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,CA2RnF,CAAA"}
+{"version":3,"file":"AnchoredOverlay.d.ts","sourceRoot":"","sources":["../../src/AnchoredOverlay/AnchoredOverlay.tsx"],"names":[],"mappings":"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"}

package/dist/AnchoredOverlay/AnchoredOverlay.js

@@ -48,13 +48,14 @@ const AnchoredOverlay = ({
   onPositionChange,
   displayCloseButton = true,
   closeButtonProps = defaultCloseButtonProps,
-  renderAs = 'portal'
+  renderAs = 'portal',
+  cssAnchorPositioningSettings
 }) => {
   const cssAnchorPositioningFlag = useFeatureFlag('primer_react_css_anchor_positioning');
   // Lazy initial state so feature detection runs once per mount on the client.
   // Guarded for SSR where `document` is undefined.
   const [supportsNativeCSSAnchorPositioning] = useState(() => typeof document !== 'undefined' && 'anchorName' in document.documentElement.style && 'positionTryFallbacks' in document.documentElement.style && 'positionVisibility' in document.documentElement.style);
-  const cssAnchorPositioning = cssAnchorPositioningFlag && supportsNativeCSSAnchorPositioning && !(overlayProps !== null && overlayProps !== void 0 && overlayProps.portalContainerName);
+  const cssAnchorPositioning = cssAnchorPositioningFlag && supportsNativeCSSAnchorPositioning && !(overlayProps !== null && overlayProps !== void 0 && overlayProps.portalContainerName) && !(cssAnchorPositioningSettings !== null && cssAnchorPositioningSettings !== void 0 && cssAnchorPositioningSettings.disable);
   // Only use Popover API when both CSS anchor positioning is enabled AND renderAs is true
   const shouldRenderAsPopover = cssAnchorPositioning && renderAs === 'popover';
   const anchorRef = useProvidedRefOrCreate(externalAnchorRef);

package/dist/Autocomplete/AutocompleteInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteInput.d.ts","sourceRoot":"","sources":["../../src/Autocomplete/AutocompleteInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqD,MAAM,OAAO,CAAA;AACzE,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,OAAO,SAAS,MAAM,cAAc,CAAA;AAEpC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAGlD,KAAK,8BAA8B,GAAG;IAEpC,EAAE,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAA;IAEtD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAID,QAAA,MAAM,iBAAiB,EAyJlB,8BAA8B,CAAC,OAAO,SAAS,EAAE,8BAA8B,CAAC,CAAA;AAIrF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAC7E,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"AutocompleteInput.d.ts","sourceRoot":"","sources":["../../src/Autocomplete/AutocompleteInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqD,MAAM,OAAO,CAAA;AACzE,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,OAAO,SAAS,MAAM,cAAc,CAAA;AAEpC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAGlD,KAAK,8BAA8B,GAAG;IAEpC,EAAE,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAA;IAEtD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAID,QAAA,MAAM,iBAAiB,EA2KlB,8BAA8B,CAAC,OAAO,SAAS,EAAE,8BAA8B,CAAC,CAAA;AAIrF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAC7E,eAAe,iBAAiB,CAAA"}

package/dist/Autocomplete/AutocompleteInput.js

@@ -56,9 +56,17 @@ const AutocompleteInput = /*#__PURE__*/React.forwardRef(({
     safeSetTimeout(() => {
       if (document.activeElement !== inputRef.current) {
         setShowMenu(false);
+
+        // Reset the input's value to the text the user actually typed rather than leaving the
+        // inline autocomplete suggestion in place. This keeps the blur behavior consistent with
+        // pressing Escape, so deleting characters off a selection and then clicking away does not
+        // silently restore the full suggestion. See https://github.com/primer/react/issues/4275
+        if (inputRef.current && autocompleteSuggestion && inputRef.current.value !== inputValue) {
+          inputRef.current.value = inputValue;
+        }
       }
     }, 0);
-  }, [onBlur, setShowMenu, inputRef, safeSetTimeout]);
+  }, [onBlur, setShowMenu, inputRef, safeSetTimeout, autocompleteSuggestion, inputValue]);
   const handleInputChange = event => {
     onChange && onChange(event);
     setInputValue(event.currentTarget.value);
@@ -110,7 +118,11 @@ const AutocompleteInput = /*#__PURE__*/React.forwardRef(({
     // TODO: fix bug where this function prevents `onChange` from being triggered if the highlighted item text
     //       is the same as what I'm typing
     //       e.g.: typing 'tw' highlights 'two', but when I 'two', the text input change does not get triggered
-    if (highlightRemainingText && autocompleteSuggestion && (inputValue || isMenuDirectlyActivated)) {
+    // Only apply the inline autocomplete suggestion while the input is focused. Without this guard,
+    // the suggestion can be re-applied to the DOM after the input is blurred, which would restore
+    // the full suggestion the user was editing away from. See https://github.com/primer/react/issues/4275
+    const isInputFocused = document.activeElement === inputRef.current;
+    if (isInputFocused && highlightRemainingText && autocompleteSuggestion && (inputValue || isMenuDirectlyActivated)) {
       inputRef.current.value = autocompleteSuggestion;
       if (autocompleteSuggestion.toLowerCase().indexOf(inputValue.toLowerCase()) === 0) {
         inputRef.current.setSelectionRange(inputValue.length, autocompleteSuggestion.length);

package/dist/Card/Card-59b77d05.css

@@ -0,0 +1,2 @@
+.prc-Card-Card-pYjuL{background-color:var(--bgColor-default,#fff);border:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);box-shadow:var(--shadow-resting-small,0 1px 1px 0 #1f23280a,0 1px 2px 0 #1f232808);display:grid;gap:var(--stack-gap-normal,1rem);grid-auto-rows:max-content auto;overflow:hidden;position:relative}.prc-Card-Card-pYjuL[data-border-radius=large]{border-radius:var(--borderRadius-large,.75rem)}.prc-Card-Card-pYjuL[data-border-radius=medium]{border-radius:var(--borderRadius-medium,.375rem)}.prc-Card-Card-pYjuL[data-padding=normal]{padding:var(--stack-padding-spacious,1.5rem)}.prc-Card-Card-pYjuL[data-padding=condensed]{padding:var(--stack-padding-condensed,.5rem)}.prc-Card-Card-pYjuL[data-padding=none]{padding:0}.prc-Card-Card-pYjuL[data-layout=compact]{align-items:flex-start;display:flex;gap:var(--stack-gap-condensed,.5rem)}.prc-Card-Card-pYjuL[data-layout=compact][data-padding=normal]{padding:var(--stack-padding-normal,1rem)}.prc-Card-CardHeader-P5Qbb{display:block;height:auto;width:100%}.prc-Card-Card-pYjuL:where([data-layout=compact]) .prc-Card-CardHeader-P5Qbb{flex:0 0 auto;width:auto}.prc-Card-CardHeaderEdgeToEdge-3yCqT{margin-left:calc(var(--stack-padding-spacious,1.5rem)*-1);margin-right:calc(var(--stack-padding-spacious,1.5rem)*-1);margin-top:calc(var(--stack-padding-spacious,1.5rem)*-1);width:calc(100% + var(--stack-padding-spacious,1.5rem)*2)}.prc-Card-CardImage-2M8DM{display:block;height:auto;width:100%}.prc-Card-CardIcon-mIMfj{align-items:center;color:var(--fgColor-muted,#59636e);display:flex;justify-content:flex-start}.prc-Card-Card-pYjuL:where([data-layout=default]) .prc-Card-CardIcon-mIMfj{background-color:var(--bgColor-muted,#f6f8fa);border-radius:var(--borderRadius-medium,.375rem);height:var(--base-size-32,2rem);justify-content:center;width:var(--base-size-32,2rem)}.prc-Card-CardBody-W1o-l{display:grid;gap:var(--stack-gap-normal,1rem)}.prc-Card-Card-pYjuL:where([data-layout=compact]) .prc-Card-CardBody-W1o-l{flex:1 1 auto}.prc-Card-CardContent-omZDS{display:grid;gap:var(--stack-gap-condensed,.5rem)}.prc-Card-CardHeading-3HXyS{color:var(--fgColor-default,#1f2328);font:var(--text-title-shorthand-small,600 1rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");margin:0}.prc-Card-Card-pYjuL:where([data-layout=compact]) .prc-Card-CardHeading-3HXyS{font-size:var(--text-body-size-medium,.875rem);position:relative;top:calc(var(--base-size-4,.25rem)*-1)}.prc-Card-CardDescription-MnJ3F{margin:0}.prc-Card-CardDescription-MnJ3F,.prc-Card-CardMetadataContainer-K-UlH{color:var(--fgColor-muted,#59636e);font:var(--text-body-shorthand-medium,400 .875rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji")}.prc-Card-CardMetadataContainer-K-UlH{align-items:center;display:flex;gap:var(--stack-gap-normal,1rem)}.prc-Card-CardMetadataItem-ellY9{align-items:center;display:flex;font:var(--text-body-shorthand-small,400 .75rem/1.625 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");gap:var(--stack-gap-condensed,.5rem)}.prc-Card-CardAction-VtI49{position:absolute;right:var(--base-size-16,1rem);top:var(--base-size-16,1rem);z-index:1}
+/*# sourceMappingURL=Card-59b77d05.css.map */

package/dist/Card/Card-59b77d05.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Card/Card.module.css.js"],"names":[],"mappings":"AAAA,qBAOE,4CAAwC,CAFxC,gFAAgE,CAChE,kFAAuC,CALvC,YAAa,CAOb,gCAA4B,CAJ5B,+BAAgC,CADhC,eAAgB,CADhB,iBAwCF,CAhCE,+CACE,8CACF,CAEA,gDACE,gDACF,CAEA,0CAEE,4CACF,CAEA,6CAEE,4CACF,CAEA,wCACE,SACF,CAEA,0CAEE,sBAAuB,CADvB,YAAa,CAEb,oCACF,CAEA,+DAEE,wCACF,CAGF,2BACE,aAAc,CAEd,WAAY,CADZ,UAOF,CAJE,6EACE,aAAc,CACd,UACF,CAGF,qCAIE,yDAAqD,CADrD,0DAAsD,CADtD,wDAAoD,CAGpD,yDAEF,CAEA,0BACE,aAAc,CAEd,WAAY,CADZ,UAEF,CAEA,yBAEE,kBAAmB,CAEnB,kCAA2B,CAH3B,YAAa,CAEb,0BAUF,CAPE,2EAKE,6CAAsC,CADtC,gDAAyC,CADzC,+BAA2B,CAF3B,sBAAuB,CACvB,8BAIF,CAGF,yBACE,YAAa,CACb,gCAKF,CAHE,2EACE,aACF,CAGF,4BACE,YAAa,CACb,oCACF,CAEA,4BAEE,oCAA6B,CAD7B,2KAAuC,CAEvC,QAOF,CALE,8EAGE,8CAAuC,CAFvC,iBAAkB,CAClB,sCAEF,CAGF,gCAGE,QACF,CAEA,sEAJE,kCAA2B,CAD3B,8KAWF,CANA,sCAEE,kBAAmB,CADnB,YAAa,CAEb,gCAGF,CAEA,iCAEE,kBAAmB,CADnB,YAAa,CAGb,8KAAsC,CADtC,oCAEF,CAEA,2BACE,iBAAkB,CAElB,8BAA0B,CAD1B,4BAAwB,CAExB,SACF","file":"Card-59b77d05.css","sourcesContent":[".Card {\n  display: grid;\n  position: relative;\n  overflow: hidden;\n  grid-auto-rows: max-content auto;\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  box-shadow: var(--shadow-resting-small);\n  background-color: var(--bgColor-default);\n  gap: var(--stack-gap-normal);\n\n  &[data-border-radius='large'] {\n    border-radius: var(--borderRadius-large);\n  }\n\n  &[data-border-radius='medium'] {\n    border-radius: var(--borderRadius-medium);\n  }\n\n  &[data-padding='normal'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding: var(--stack-padding-spacious);\n  }\n\n  &[data-padding='condensed'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding: var(--stack-padding-condensed);\n  }\n\n  &[data-padding='none'] {\n    padding: 0;\n  }\n\n  &[data-layout='compact'] {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--stack-gap-condensed);\n  }\n\n  &[data-layout='compact'][data-padding='normal'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding: var(--stack-padding-normal);\n  }\n}\n\n.CardHeader {\n  display: block;\n  width: 100%;\n  height: auto;\n\n  .Card:where([data-layout='compact']) & {\n    flex: 0 0 auto;\n    width: auto;\n  }\n}\n\n.CardHeaderEdgeToEdge {\n  /* stylelint-disable primer/spacing */\n  margin-top: calc(-1 * var(--stack-padding-spacious));\n  margin-right: calc(-1 * var(--stack-padding-spacious));\n  margin-left: calc(-1 * var(--stack-padding-spacious));\n  width: calc(100% + 2 * var(--stack-padding-spacious));\n  /* stylelint-enable primer/spacing */\n}\n\n.CardImage {\n  display: block;\n  width: 100%;\n  height: auto;\n}\n\n.CardIcon {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  color: var(--fgColor-muted);\n\n  .Card:where([data-layout='default']) & {\n    justify-content: center;\n    width: var(--base-size-32);\n    height: var(--base-size-32);\n    border-radius: var(--borderRadius-medium);\n    background-color: var(--bgColor-muted);\n  }\n}\n\n.CardBody {\n  display: grid;\n  gap: var(--stack-gap-normal);\n\n  .Card:where([data-layout='compact']) & {\n    flex: 1 1 auto;\n  }\n}\n\n.CardContent {\n  display: grid;\n  gap: var(--stack-gap-condensed);\n}\n\n.CardHeading {\n  font: var(--text-title-shorthand-small);\n  color: var(--fgColor-default);\n  margin: 0;\n\n  .Card:where([data-layout='compact']) & {\n    position: relative;\n    top: calc(-1 * var(--base-size-4));\n    font-size: var(--text-body-size-medium);\n  }\n}\n\n.CardDescription {\n  font: var(--text-body-shorthand-medium);\n  color: var(--fgColor-muted);\n  margin: 0;\n}\n\n.CardMetadataContainer {\n  display: flex;\n  align-items: center;\n  gap: var(--stack-gap-normal);\n  font: var(--text-body-shorthand-medium);\n  color: var(--fgColor-muted);\n}\n\n.CardMetadataItem {\n  display: flex;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n  font: var(--text-body-shorthand-small);\n}\n\n.CardAction {\n  position: absolute;\n  top: var(--base-size-16);\n  right: var(--base-size-16);\n  z-index: 1;\n}\n"]}

package/dist/Card/Card.d.ts

@@ -8,6 +8,12 @@ export type CardProps<As extends CardAs = 'div'> = PolymorphicProps<As, 'div', {
     padding?: 'none' | 'condensed' | 'normal';
     /** Border radius. @default 'large' */
     borderRadius?: 'medium' | 'large';
+    /**
+     * Layout of the card. `compact` uses tighter spacing, removes the icon
+     * background container, and renders a smaller title.
+     * @default 'default'
+     */
+    layout?: 'default' | 'compact';
     /**
      * Card contents. Provide either `Card.*` subcomponents (e.g. `Card.Heading`,
      * `Card.Description`, `Card.Metadata`) or custom content.
@@ -67,6 +73,12 @@ declare const CardImpl: <As extends CardAs>(props: (React.ComponentPropsWithRef<
     padding?: "none" | "condensed" | "normal";
     /** Border radius. @default 'large' */
     borderRadius?: "medium" | "large";
+    /**
+     * Layout of the card. `compact` uses tighter spacing, removes the icon
+     * background container, and renders a smaller title.
+     * @default 'default'
+     */
+    layout?: "default" | "compact";
     /**
      * Card contents. Provide either `Card.*` subcomponents (e.g. `Card.Heading`,
      * `Card.Description`, `Card.Metadata`) or custom content.
@@ -79,6 +91,12 @@ declare const CardImpl: <As extends CardAs>(props: (React.ComponentPropsWithRef<
     padding?: "none" | "condensed" | "normal";
     /** Border radius. @default 'large' */
     borderRadius?: "medium" | "large";
+    /**
+     * Layout of the card. `compact` uses tighter spacing, removes the icon
+     * background container, and renders a smaller title.
+     * @default 'default'
+     */
+    layout?: "default" | "compact";
     /**
      * Card contents. Provide either `Card.*` subcomponents (e.g. `Card.Heading`,
      * `Card.Description`, `Card.Metadata`) or custom content.

package/dist/Card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"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"}

package/dist/Card/Card.js

@@ -8,18 +8,20 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 
 const CardContext = /*#__PURE__*/createContext({});
 function CardComponent(props, ref) {
-  const $ = c(67);
+  const $ = c(71);
   const {
     children,
     className,
     padding: t0,
     borderRadius: t1,
-    as: t2,
+    layout: t2,
+    as: t3,
     ...rest
   } = props;
   const padding = t0 === undefined ? "normal" : t0;
   const borderRadius = t1 === undefined ? "large" : t1;
-  const as = t2 === undefined ? "div" : t2;
+  const layout = t2 === undefined ? "default" : t2;
+  const as = t3 === undefined ? "div" : t3;
   const Component = as;
   const generatedId = useId();
   const titleId = as === "section" ? generatedId : undefined;
@@ -34,15 +36,16 @@ function CardComponent(props, ref) {
   let metadata;
   let t10;
   let t11;
-  let t3;
+  let t12;
+  let t13;
   let t4;
   let t5;
   let t6;
   let t7;
   let t8;
   let t9;
-  if ($[0] !== Component || $[1] !== borderRadius || $[2] !== children || $[3] !== className || $[4] !== padding || $[5] !== ref || $[6] !== rest || $[7] !== titleId) {
-    t11 = Symbol.for("react.early_return_sentinel");
+  if ($[0] !== Component || $[1] !== borderRadius || $[2] !== children || $[3] !== className || $[4] !== layout || $[5] !== padding || $[6] !== ref || $[7] !== rest || $[8] !== titleId) {
+    t13 = Symbol.for("react.early_return_sentinel");
     bb0: {
       let icon = null;
       let image = null;
@@ -82,89 +85,92 @@ function CardComponent(props, ref) {
       const hasSlotChildren = icon || image || heading || description || metadata || menu;
       const isEmpty = !hasSlotChildren && childArray.length === 0;
       if (isEmpty) {
-        t11 = null;
+        t13 = null;
         break bb0;
       }
       if (!hasSlotChildren) {
-        let t12;
-        if ($[23] !== titleId) {
-          t12 = {
+        let t14;
+        if ($[25] !== titleId) {
+          t14 = {
             titleId
           };
-          $[23] = titleId;
-          $[24] = t12;
+          $[25] = titleId;
+          $[26] = t14;
         } else {
-          t12 = $[24];
+          t14 = $[26];
         }
-        let t13;
-        if ($[25] !== className) {
-          t13 = clsx(classes.Card, className);
-          $[25] = className;
-          $[26] = t13;
+        let t15;
+        if ($[27] !== className) {
+          t15 = clsx(classes.Card, className);
+          $[27] = className;
+          $[28] = t15;
         } else {
-          t13 = $[26];
+          t15 = $[28];
         }
-        let t14;
-        if ($[27] !== Component || $[28] !== borderRadius || $[29] !== children || $[30] !== padding || $[31] !== ref || $[32] !== rest || $[33] !== t13) {
-          t14 = /*#__PURE__*/jsx(Component, {
+        let t16;
+        if ($[29] !== Component || $[30] !== borderRadius || $[31] !== children || $[32] !== layout || $[33] !== padding || $[34] !== ref || $[35] !== rest || $[36] !== t15) {
+          t16 = /*#__PURE__*/jsx(Component, {
             ref: ref,
-            className: t13,
+            className: t15,
             "data-component": "Card",
             "data-padding": padding,
             "data-border-radius": borderRadius,
+            "data-layout": layout,
             ...rest,
             children: children
           });
-          $[27] = Component;
-          $[28] = borderRadius;
-          $[29] = children;
-          $[30] = padding;
-          $[31] = ref;
-          $[32] = rest;
-          $[33] = t13;
-          $[34] = t14;
+          $[29] = Component;
+          $[30] = borderRadius;
+          $[31] = children;
+          $[32] = layout;
+          $[33] = padding;
+          $[34] = ref;
+          $[35] = rest;
+          $[36] = t15;
+          $[37] = t16;
         } else {
-          t14 = $[34];
+          t16 = $[37];
         }
-        let t15;
-        if ($[35] !== t12 || $[36] !== t14) {
-          t15 = /*#__PURE__*/jsx(CardContext.Provider, {
-            value: t12,
-            children: t14
+        let t17;
+        if ($[38] !== t14 || $[39] !== t16) {
+          t17 = /*#__PURE__*/jsx(CardContext.Provider, {
+            value: t14,
+            children: t16
           });
-          $[35] = t12;
-          $[36] = t14;
-          $[37] = t15;
+          $[38] = t14;
+          $[39] = t16;
+          $[40] = t17;
         } else {
-          t15 = $[37];
+          t17 = $[40];
         }
-        t11 = t15;
+        t13 = t17;
         break bb0;
       }
       T1 = CardContext.Provider;
-      if ($[38] !== titleId) {
-        t10 = {
+      if ($[41] !== titleId) {
+        t12 = {
           titleId
         };
-        $[38] = titleId;
-        $[39] = t10;
+        $[41] = titleId;
+        $[42] = t12;
       } else {
-        t10 = $[39];
+        t12 = $[42];
       }
       T0 = Component;
-      t3 = ref;
-      if ($[40] !== className) {
-        t4 = clsx(classes.Card, className);
-        $[40] = className;
-        $[41] = t4;
+      t4 = ref;
+      if ($[43] !== className) {
+        t5 = clsx(classes.Card, className);
+        $[43] = className;
+        $[44] = t5;
       } else {
-        t4 = $[41];
+        t5 = $[44];
       }
-      t5 = "Card";
-      t6 = padding;
-      t7 = borderRadius;
-      t8 = rest;
-      t9 = (image || icon) && /*#__PURE__*/jsx("div", {
+      t6 = "Card";
+      t7 = padding;
+      t8 = borderRadius;
+      t9 = layout;
+      t10 = rest;
+      t11 = (image || icon) && /*#__PURE__*/jsx("div", {
         className: clsx(classes.CardHeader, image && classes.CardHeaderEdgeToEdge),
         children: image || icon
       });
@@ -173,130 +179,135 @@ function CardComponent(props, ref) {
     $[1] = borderRadius;
     $[2] = children;
     $[3] = className;
-    $[4] = padding;
-    $[5] = ref;
-    $[6] = rest;
-    $[7] = titleId;
-    $[8] = T0;
-    $[9] = T1;
-    $[10] = description;
-    $[11] = heading;
-    $[12] = menu;
-    $[13] = metadata;
-    $[14] = t10;
-    $[15] = t11;
-    $[16] = t3;
-    $[17] = t4;
-    $[18] = t5;
-    $[19] = t6;
-    $[20] = t7;
-    $[21] = t8;
-    $[22] = t9;
+    $[4] = layout;
+    $[5] = padding;
+    $[6] = ref;
+    $[7] = rest;
+    $[8] = titleId;
+    $[9] = T0;
+    $[10] = T1;
+    $[11] = description;
+    $[12] = heading;
+    $[13] = menu;
+    $[14] = metadata;
+    $[15] = t10;
+    $[16] = t11;
+    $[17] = t12;
+    $[18] = t13;
+    $[19] = t4;
+    $[20] = t5;
+    $[21] = t6;
+    $[22] = t7;
+    $[23] = t8;
+    $[24] = t9;
   } else {
-    T0 = $[8];
-    T1 = $[9];
-    description = $[10];
-    heading = $[11];
-    menu = $[12];
-    metadata = $[13];
-    t10 = $[14];
-    t11 = $[15];
-    t3 = $[16];
-    t4 = $[17];
-    t5 = $[18];
-    t6 = $[19];
-    t7 = $[20];
-    t8 = $[21];
-    t9 = $[22];
+    T0 = $[9];
+    T1 = $[10];
+    description = $[11];
+    heading = $[12];
+    menu = $[13];
+    metadata = $[14];
+    t10 = $[15];
+    t11 = $[16];
+    t12 = $[17];
+    t13 = $[18];
+    t4 = $[19];
+    t5 = $[20];
+    t6 = $[21];
+    t7 = $[22];
+    t8 = $[23];
+    t9 = $[24];
   }
-  if (t11 !== Symbol.for("react.early_return_sentinel")) {
-    return t11;
+  if (t13 !== Symbol.for("react.early_return_sentinel")) {
+    return t13;
   }
-  let t12;
-  if ($[42] !== description || $[43] !== heading) {
-    t12 = /*#__PURE__*/jsxs("div", {
+  let t14;
+  if ($[45] !== description || $[46] !== heading) {
+    t14 = /*#__PURE__*/jsxs("div", {
       className: classes.CardContent,
       children: [heading, description]
     });
-    $[42] = description;
-    $[43] = heading;
-    $[44] = t12;
+    $[45] = description;
+    $[46] = heading;
+    $[47] = t14;
   } else {
-    t12 = $[44];
+    t14 = $[47];
   }
-  let t13;
-  if ($[45] !== metadata) {
-    t13 = metadata ? /*#__PURE__*/jsx("div", {
+  let t15;
+  if ($[48] !== metadata) {
+    t15 = metadata ? /*#__PURE__*/jsx("div", {
       className: classes.CardMetadataContainer,
       children: metadata
     }) : null;
-    $[45] = metadata;
-    $[46] = t13;
+    $[48] = metadata;
+    $[49] = t15;
   } else {
-    t13 = $[46];
+    t15 = $[49];
   }
-  let t14;
-  if ($[47] !== t12 || $[48] !== t13) {
-    t14 = /*#__PURE__*/jsxs("div", {
+  let t16;
+  if ($[50] !== t14 || $[51] !== t15) {
+    t16 = /*#__PURE__*/jsxs("div", {
       className: classes.CardBody,
-      children: [t12, t13]
+      children: [t14, t15]
     });
-    $[47] = t12;
-    $[48] = t13;
-    $[49] = t14;
+    $[50] = t14;
+    $[51] = t15;
+    $[52] = t16;
   } else {
-    t14 = $[49];
+    t16 = $[52];
   }
-  let t15;
-  if ($[50] !== menu) {
-    t15 = menu ? /*#__PURE__*/jsx("div", {
+  let t17;
+  if ($[53] !== menu) {
+    t17 = menu ? /*#__PURE__*/jsx("div", {
       className: classes.CardAction,
       children: menu
     }) : null;
-    $[50] = menu;
-    $[51] = t15;
+    $[53] = menu;
+    $[54] = t17;
   } else {
-    t15 = $[51];
+    t17 = $[54];
   }
-  let t16;
-  if ($[52] !== T0 || $[53] !== t14 || $[54] !== t15 || $[55] !== t3 || $[56] !== t4 || $[57] !== t5 || $[58] !== t6 || $[59] !== t7 || $[60] !== t8 || $[61] !== t9) {
-    t16 = /*#__PURE__*/jsxs(T0, {
-      ref: t3,
-      className: t4,
-      "data-component": t5,
-      "data-padding": t6,
-      "data-border-radius": t7,
-      ...t8,
-      children: [t9, t14, t15]
+  let t18;
+  if ($[55] !== T0 || $[56] !== t10 || $[57] !== t11 || $[58] !== t16 || $[59] !== t17 || $[60] !== t4 || $[61] !== t5 || $[62] !== t6 || $[63] !== t7 || $[64] !== t8 || $[65] !== t9) {
+    t18 = /*#__PURE__*/jsxs(T0, {
+      ref: t4,
+      className: t5,
+      "data-component": t6,
+      "data-padding": t7,
+      "data-border-radius": t8,
+      "data-layout": t9,
+      ...t10,
+      children: [t11, t16, t17]
     });
-    $[52] = T0;
-    $[53] = t14;
-    $[54] = t15;
-    $[55] = t3;
-    $[56] = t4;
-    $[57] = t5;
-    $[58] = t6;
-    $[59] = t7;
-    $[60] = t8;
-    $[61] = t9;
-    $[62] = t16;
+    $[55] = T0;
+    $[56] = t10;
+    $[57] = t11;
+    $[58] = t16;
+    $[59] = t17;
+    $[60] = t4;
+    $[61] = t5;
+    $[62] = t6;
+    $[63] = t7;
+    $[64] = t8;
+    $[65] = t9;
+    $[66] = t18;
   } else {
-    t16 = $[62];
+    t18 = $[66];
   }
-  let t17;
-  if ($[63] !== T1 || $[64] !== t10 || $[65] !== t16) {
-    t17 = /*#__PURE__*/jsx(T1, {
-      value: t10,
-      children: t16
+  let t19;
+  if ($[67] !== T1 || $[68] !== t12 || $[69] !== t18) {
+    t19 = /*#__PURE__*/jsx(T1, {
+      value: t12,
+      children: t18
     });
-    $[63] = T1;
-    $[64] = t10;
-    $[65] = t16;
-    $[66] = t17;
+    $[67] = T1;
+    $[68] = t12;
+    $[69] = t18;
+    $[70] = t19;
   } else {
-    t17 = $[66];
+    t19 = $[70];
   }
-  return t17;
+  return t19;
 }
 CardComponent.displayName = 'Card';
 const CardImpl = fixedForwardRef(CardComponent);

package/dist/Card/Card.module.css.js

@@ -1,4 +1,4 @@
-import './Card-d8a02dd9.css';
+import './Card-59b77d05.css';
 
 var classes = {"Card":"prc-Card-Card-pYjuL","CardHeader":"prc-Card-CardHeader-P5Qbb","CardHeaderEdgeToEdge":"prc-Card-CardHeaderEdgeToEdge-3yCqT","CardImage":"prc-Card-CardImage-2M8DM","CardIcon":"prc-Card-CardIcon-mIMfj","CardBody":"prc-Card-CardBody-W1o-l","CardContent":"prc-Card-CardContent-omZDS","CardHeading":"prc-Card-CardHeading-3HXyS","CardDescription":"prc-Card-CardDescription-MnJ3F","CardMetadataContainer":"prc-Card-CardMetadataContainer-K-UlH","CardMetadataItem":"prc-Card-CardMetadataItem-ellY9","CardAction":"prc-Card-CardAction-VtI49"};