@primer/react 38.24.0 → 38.25.0-rc.7f5e08f50

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @primer/react
 
+## 38.25.0
+
+### Minor Changes
+
+- [#7852](https://github.com/primer/react/pull/7852) [`5504680`](https://github.com/primer/react/commit/5504680614bacc2ce3eecaaa55d10887e6fb152d) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Card: Add `data-component` attributes to `Card` and its subcomponents (`Icon`, `Image`, `Heading`, `Description`, `Metadata`, `Menu`). Add an `as` prop (`'div' | 'section'`) so standalone Cards can render as a labelled region landmark; `as="section"` requires `aria-label` or `aria-labelledby`. `Card` now requires `children`. Also improves docs and stories.
+
+### Patch Changes
+
+- [#7858](https://github.com/primer/react/pull/7858) [`1ce2906`](https://github.com/primer/react/commit/1ce2906d1816ba443eacfede67d496d074b8d2fb) Thanks [@TylerJDev](https://github.com/TylerJDev)! - AnchoredOverlay: Add additional fallbacks for CSS Anchor Positioning
+
+- [#7843](https://github.com/primer/react/pull/7843) [`fc571fd`](https://github.com/primer/react/commit/fc571fd8c3899f19a1dd9e77b8a22f6528d776e2) Thanks [@joshblack](https://github.com/joshblack)! - Update useMergedRefs so that in React 18 no warning is emitted
+
 ## 38.24.0
 
 ### Minor Changes

package/dist/AnchoredOverlay/AnchoredOverlay-d483d670.css

@@ -0,0 +1,2 @@
+.prc-AnchoredOverlay-ResponsiveCloseButtonContainer-nuium{position:relative}.prc-AnchoredOverlay-ResponsiveCloseButton-z-2rx{display:none;position:absolute;right:var(--base-size-8,.5rem);top:var(--base-size-8,.5rem)}@media screen and (max-width:calc(48rem - 0.02px)){.prc-AnchoredOverlay-ResponsiveCloseButton-z-2rx{display:inline-grid}}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z{position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline,--inline-end-center,--inline-start-center,--fit-block-bottom,--fit-block-top;position-visibility:anchors-visible;position:fixed!important;z-index:100}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[popover]{border:0;inset:auto;margin:0;max-width:none;padding:0}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-bottom]{left:anchor(left);top:calc(anchor(bottom) + var(--base-size-4,.25rem))}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-bottom][data-align=left]{left:auto;right:calc(anchor(right) - var(--anchored-overlay-anchor-offset-left))}@media screen and (max-width:calc(48rem - 0.02px)){.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-bottom][data-align=left][data-responsive=fullscreen]{right:auto}}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-bottom][data-align=right]{left:calc(anchor(left) - var(--anchored-overlay-anchor-offset-right))}@media screen and (max-width:calc(48rem - 0.02px)){.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-bottom][data-align=right][data-responsive=fullscreen]{left:auto}}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-top]{bottom:anchor(top);left:anchor(left);margin-bottom:var(--base-size-4,.25rem)}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-top][data-align=left]{left:auto;right:anchor(right)}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-top][data-align=right]{left:calc(anchor(left) - var(--anchored-overlay-anchor-offset-right))}@media screen and (max-width:calc(48rem - 0.02px)){.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-top][data-align=right][data-responsive=fullscreen]{left:auto}}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-left]{margin-right:var(--base-size-4,.25rem);right:anchor(left);top:var(--anchored-overlay-top-override,anchor(top));position-try-fallbacks:flip-inline,flip-block,flip-start,--outside-left-to-bottom}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-right]{left:anchor(right);margin-left:var(--base-size-4,.25rem);top:var(--anchored-overlay-top-override,anchor(top));position-try-fallbacks:flip-inline,flip-block,flip-start,--outside-right-to-bottom}@position-try --outside-left-to-bottom{margin:0;right:anchor(right);top:calc(anchor(bottom) + var(--base-size-4,.25rem));width:auto}@position-try --outside-right-to-bottom{left:anchor(left);margin:0;top:calc(anchor(bottom) + var(--base-size-4,.25rem));width:auto}@position-try --inline-end-center{align-self:anchor-center;bottom:auto;left:anchor(right);margin-left:var(--base-size-4,.25rem);top:auto}@position-try --inline-start-center{align-self:anchor-center;bottom:auto;left:auto;margin-right:var(--base-size-4,.25rem);right:anchor(left);top:auto}@position-try --fit-block-bottom{bottom:var(--base-size-8,.5rem);height:auto;max-height:none;top:calc(anchor(bottom) + var(--base-size-4,.25rem))}@position-try --fit-block-top{bottom:calc(100vh - anchor(top) + var(--base-size-4,.25rem));height:auto;max-height:none;top:var(--base-size-8,.5rem)}
+/*# sourceMappingURL=AnchoredOverlay-d483d670.css.map */

package/dist/AnchoredOverlay/AnchoredOverlay-d483d670.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/AnchoredOverlay/AnchoredOverlay.module.css.js"],"names":[],"mappings":"AAAA,0DACE,iBACF,CAEA,iDAIE,YAAa,CAHb,iBAAkB,CAElB,8BAAyB,CADzB,4BAOF,CAHE,mDANF,iDAOI,mBAEJ,CADE,CAGF,2CACE,iJAOiB,CACjB,mCAAoC,CAEpC,wBAA0B,CAD1B,WAgFF,CA7EE,oDAIE,QAAS,CAHT,UAAW,CACX,QAAS,CAGT,cAAe,CAFf,SAGF,CAEA,qEAGE,iBAAkB,CADlB,oDAuBF,CApBE,sFACE,SAAU,CACV,sEAOF,CAJI,mDADF,kHAEI,UAEJ,CADE,CAIJ,uFACE,qEAOF,CAJI,mDADF,mHAEI,SAEJ,CADE,CAKN,kEAEE,kBAAmB,CACnB,iBAAkB,CAFlB,uCAkBF,CAdE,mFACE,SAAU,CACV,mBACF,CAEA,oFACE,qEAOF,CAJI,mDADF,gHAEI,SAEJ,CADE,CAKN,mEAWE,sCAAgC,CAVhC,kBAAmB,CASnB,oDAAsD,CAEtD,iFACF,CAEA,oEACE,kBAAmB,CAEnB,qCAA+B,CAD/B,oDAAsD,CAEtD,kFACF,CAGF,uCAGE,QAAS,CAFT,mBAAoB,CACpB,oDAA8C,CAE9C,UACF,CAEA,wCACE,iBAAkB,CAElB,QAAS,CADT,oDAA8C,CAE9C,UACF,CAEA,kCAKE,wBAAyB,CAFzB,WAAY,CAFZ,kBAAmB,CAGnB,qCAA+B,CAF/B,QAIF,CAEA,oCAME,wBAAyB,CAFzB,WAAY,CAFZ,SAAU,CAGV,sCAAgC,CAJhC,kBAAmB,CAEnB,QAIF,CAEA,iCAEE,+BAA0B,CAC1B,WAAY,CACZ,eAAgB,CAHhB,oDAIF,CAEA,8BAEE,4DAAsD,CACtD,WAAY,CACZ,eAAgB,CAHhB,4BAIF","file":"AnchoredOverlay-d483d670.css","sourcesContent":[".ResponsiveCloseButtonContainer {\n  position: relative;\n}\n\n.ResponsiveCloseButton {\n  position: absolute;\n  top: var(--base-size-8);\n  right: var(--base-size-8);\n  display: none;\n\n  @media screen and (--viewportRange-narrow) {\n    display: inline-grid;\n  }\n}\n\n.AnchoredOverlay {\n  position-try-fallbacks:\n    flip-block,\n    flip-inline,\n    flip-block flip-inline,\n    --inline-end-center,\n    --inline-start-center,\n    --fit-block-bottom,\n    --fit-block-top;\n  position-visibility: anchors-visible;\n  z-index: 100;\n  position: fixed !important;\n\n  &[popover] {\n    inset: auto;\n    margin: 0;\n    padding: 0;\n    border: 0;\n    max-width: none;\n  }\n\n  &[data-side='outside-bottom'] {\n    /* stylelint-disable primer/spacing */\n    top: calc(anchor(bottom) + var(--base-size-4));\n    left: anchor(left);\n\n    &[data-align='left'] {\n      left: auto;\n      right: calc(anchor(right) - var(--anchored-overlay-anchor-offset-left));\n      /* stylelint-disable max-nesting-depth */\n      &[data-responsive='fullscreen'] {\n        @media screen and (--viewportRange-narrow) {\n          right: auto;\n        }\n      }\n    }\n\n    &[data-align='right'] {\n      left: calc(anchor(left) - var(--anchored-overlay-anchor-offset-right));\n\n      &[data-responsive='fullscreen'] {\n        @media screen and (--viewportRange-narrow) {\n          left: auto;\n        }\n      }\n    }\n  }\n\n  &[data-side='outside-top'] {\n    margin-bottom: var(--base-size-4);\n    bottom: anchor(top);\n    left: anchor(left);\n\n    &[data-align='left'] {\n      left: auto;\n      right: anchor(right);\n    }\n\n    &[data-align='right'] {\n      left: calc(anchor(left) - var(--anchored-overlay-anchor-offset-right));\n\n      &[data-responsive='fullscreen'] {\n        @media screen and (--viewportRange-narrow) {\n          left: auto;\n        }\n      }\n    }\n  }\n\n  &[data-side='outside-left'] {\n    right: anchor(left);\n    /* Falls back to `anchor(top)` when JS hasn't overridden it. JS sets the\n       override when the overlay's bottom would overflow the viewport so we\n       can lift it up to keep the bottom edge on screen, mirroring the JS\n       anchored-positioning code path.\n\n       This override only applies when CSS cannot find space using the default position -\n       or any of its defined fallbacks.\n    */\n    top: var(--anchored-overlay-top-override, anchor(top));\n    margin-right: var(--base-size-4);\n    position-try-fallbacks: flip-inline, flip-block, flip-start, --outside-left-to-bottom;\n  }\n\n  &[data-side='outside-right'] {\n    left: anchor(right);\n    top: var(--anchored-overlay-top-override, anchor(top));\n    margin-left: var(--base-size-4);\n    position-try-fallbacks: flip-inline, flip-block, flip-start, --outside-right-to-bottom;\n  }\n}\n\n@position-try --outside-left-to-bottom {\n  right: anchor(right);\n  top: calc(anchor(bottom) + var(--base-size-4));\n  margin: 0;\n  width: auto;\n}\n\n@position-try --outside-right-to-bottom {\n  left: anchor(left);\n  top: calc(anchor(bottom) + var(--base-size-4));\n  margin: 0;\n  width: auto;\n}\n\n@position-try --inline-end-center {\n  left: anchor(right);\n  top: auto;\n  bottom: auto;\n  margin-left: var(--base-size-4);\n  align-self: anchor-center;\n}\n\n@position-try --inline-start-center {\n  right: anchor(left);\n  left: auto;\n  top: auto;\n  bottom: auto;\n  margin-right: var(--base-size-4);\n  align-self: anchor-center;\n}\n\n@position-try --fit-block-bottom {\n  top: calc(anchor(bottom) + var(--base-size-4));\n  bottom: var(--base-size-8);\n  height: auto;\n  max-height: none;\n}\n\n@position-try --fit-block-top {\n  top: var(--base-size-8);\n  bottom: calc(100vh - anchor(top) + var(--base-size-4));\n  height: auto;\n  max-height: none;\n}\n"]}

package/dist/AnchoredOverlay/AnchoredOverlay.module.css.js

@@ -1,4 +1,4 @@
-import './AnchoredOverlay-ec9e15fc.css';
+import './AnchoredOverlay-d483d670.css';
 
 var classes = {"ResponsiveCloseButtonContainer":"prc-AnchoredOverlay-ResponsiveCloseButtonContainer-nuium","ResponsiveCloseButton":"prc-AnchoredOverlay-ResponsiveCloseButton-z-2rx","AnchoredOverlay":"prc-AnchoredOverlay-AnchoredOverlay-fYg9Z"};
 

package/dist/Card/{Card-cec366f8.css → Card-d8a02dd9.css}

@@ -1,2 +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-CardHeader-P5Qbb{display:block;height:auto;width:100%}.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;background-color:var(--bgColor-muted,#f6f8fa);border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-muted,#59636e);display:flex;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-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-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-CardMenu-1b3uS{position:absolute;right:var(--base-size-16,1rem);top:var(--base-size-16,1rem);z-index:1}
-/*# sourceMappingURL=Card-cec366f8.css.map */
+.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-CardHeader-P5Qbb{display:block;height:auto;width:100%}.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;background-color:var(--bgColor-muted,#f6f8fa);border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-muted,#59636e);display:flex;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-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-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-d8a02dd9.css.map */

package/dist/Card/{Card-cec366f8.css.map → Card-d8a02dd9.css.map}

@@ -1 +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,iBA6BF,CArBE,+CACE,8CACF,CAEA,gDACE,gDACF,CAEA,0CAEE,4CACF,CAEA,6CAEE,4CACF,CAEA,wCACE,SACF,CAGF,2BACE,aAAc,CAEd,WAAY,CADZ,UAEF,CAEA,qCAIE,yDAAqD,CADrD,0DAAsD,CADtD,wDAAoD,CAGpD,yDAEF,CAEA,0BACE,aAAc,CAEd,WAAY,CADZ,UAEF,CAEA,yBAEE,kBAAmB,CAKnB,6CAAsC,CADtC,gDAAyC,CAEzC,kCAA2B,CAP3B,YAAa,CAIb,+BAA2B,CAF3B,sBAAuB,CACvB,8BAKF,CAEA,yBACE,YAAa,CACb,gCACF,CAEA,4BACE,YAAa,CACb,oCACF,CAEA,4BAEE,oCAA6B,CAD7B,2KAAuC,CAEvC,QACF,CAEA,gCAGE,QACF,CAEA,sEAJE,kCAA2B,CAD3B,8KAWF,CANA,sCAEE,kBAAmB,CADnB,YAAa,CAEb,gCAGF,CAEA,iCAEE,kBAAmB,CADnB,YAAa,CAGb,8KAAsC,CADtC,oCAEF,CAEA,yBACE,iBAAkB,CAElB,8BAA0B,CAD1B,4BAAwB,CAExB,SACF","file":"Card-cec366f8.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\n.CardHeader {\n  display: block;\n  width: 100%;\n  height: auto;\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: 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  color: var(--fgColor-muted);\n}\n\n.CardBody {\n  display: grid;\n  gap: var(--stack-gap-normal);\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\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.CardMenu {\n  position: absolute;\n  top: var(--base-size-16);\n  right: var(--base-size-16);\n  z-index: 1;\n}\n"]}
+{"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,iBA6BF,CArBE,+CACE,8CACF,CAEA,gDACE,gDACF,CAEA,0CAEE,4CACF,CAEA,6CAEE,4CACF,CAEA,wCACE,SACF,CAGF,2BACE,aAAc,CAEd,WAAY,CADZ,UAEF,CAEA,qCAIE,yDAAqD,CADrD,0DAAsD,CADtD,wDAAoD,CAGpD,yDAEF,CAEA,0BACE,aAAc,CAEd,WAAY,CADZ,UAEF,CAEA,yBAEE,kBAAmB,CAKnB,6CAAsC,CADtC,gDAAyC,CAEzC,kCAA2B,CAP3B,YAAa,CAIb,+BAA2B,CAF3B,sBAAuB,CACvB,8BAKF,CAEA,yBACE,YAAa,CACb,gCACF,CAEA,4BACE,YAAa,CACb,oCACF,CAEA,4BAEE,oCAA6B,CAD7B,2KAAuC,CAEvC,QACF,CAEA,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-d8a02dd9.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\n.CardHeader {\n  display: block;\n  width: 100%;\n  height: auto;\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: 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  color: var(--fgColor-muted);\n}\n\n.CardBody {\n  display: grid;\n  gap: var(--stack-gap-normal);\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\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

@@ -1,21 +1,19 @@
 import React from 'react';
-export type CardProps = React.ComponentPropsWithoutRef<'div'> & {
-    /**
-     * Provide an optional className to add to the outermost element rendered by
-     * the Card
-     */
+import { type PolymorphicProps } from '../utils/modern-polymorphic';
+type CardAs = 'div' | 'section';
+export type CardProps<As extends CardAs = 'div'> = PolymorphicProps<As, 'div', {
+    /** Optional className for the root element. */
     className?: string;
-    /**
-     * Controls the internal padding of the Card.
-     * @default 'normal'
-     */
+    /** Internal padding. @default 'normal' */
     padding?: 'none' | 'condensed' | 'normal';
+    /** Border radius. @default 'large' */
+    borderRadius?: 'medium' | 'large';
     /**
-     * Controls the border radius of the Card.
-     * @default 'large'
+     * Card contents. Provide either `Card.*` subcomponents (e.g. `Card.Heading`,
+     * `Card.Description`, `Card.Metadata`) or custom content.
      */
-    borderRadius?: 'medium' | 'large';
-};
+    children: React.ReactNode;
+}>;
 type HeadingLevel = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 type HeadingProps = React.ComponentPropsWithoutRef<'h3'> & {
     /**
@@ -25,6 +23,9 @@ type HeadingProps = React.ComponentPropsWithoutRef<'h3'> & {
     children: React.ReactNode;
 };
 type DescriptionProps = React.ComponentPropsWithoutRef<'p'> & {
+    /**
+     * Card description. Rendered as a `<p>`, so keep it to flowing text.
+     */
     children: React.ReactNode;
 };
 type IconProps = {
@@ -48,37 +49,58 @@ type ImageProps = React.ComponentPropsWithoutRef<'img'> & {
      */
     alt?: string;
 };
-type MenuProps = {
+type ActionProps = {
+    /** Interactive control for the top-right corner of the card. */
     children: React.ReactNode;
 };
 type MetadataProps = React.ComponentPropsWithoutRef<'div'> & {
-    children: React.ReactNode;
-};
-declare const CardImpl: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     /**
-     * Provide an optional className to add to the outermost element rendered by
-     * the Card
+     * Metadata row at the bottom of the card. Any content works: text, icons,
+     * a `Label`, an `Octicon`.
      */
+    children: React.ReactNode;
+};
+declare const CardImpl: <As extends CardAs>(props: (React.ComponentPropsWithRef<React.ElementType extends As ? "div" : As> & {
+    /** Optional className for the root element. */
     className?: string;
+    /** Internal padding. @default 'normal' */
+    padding?: "none" | "condensed" | "normal";
+    /** Border radius. @default 'large' */
+    borderRadius?: "medium" | "large";
     /**
-     * Controls the internal padding of the Card.
-     * @default 'normal'
+     * Card contents. Provide either `Card.*` subcomponents (e.g. `Card.Heading`,
+     * `Card.Description`, `Card.Metadata`) or custom content.
      */
+    children: React.ReactNode;
+} extends infer T ? T extends React.ComponentPropsWithRef<React.ElementType extends As ? "div" : As> & {
+    /** Optional className for the root element. */
+    className?: string;
+    /** Internal padding. @default 'normal' */
     padding?: "none" | "condensed" | "normal";
+    /** Border radius. @default 'large' */
+    borderRadius?: "medium" | "large";
     /**
-     * Controls the border radius of the Card.
-     * @default 'large'
+     * Card contents. Provide either `Card.*` subcomponents (e.g. `Card.Heading`,
+     * `Card.Description`, `Card.Metadata`) or custom content.
      */
-    borderRadius?: "medium" | "large";
-} & React.RefAttributes<HTMLDivElement>>;
-declare const CardIcon: {
-    ({ icon: IconComponent, "aria-label": ariaLabel, className }: IconProps): React.JSX.Element;
-    displayName: string;
-};
-declare const CardImage: {
-    ({ src, alt, className, ...rest }: ImageProps): React.JSX.Element;
-    displayName: string;
-};
+    children: React.ReactNode;
+} ? T extends unknown ? Omit<T, "as"> : never : never : never) & {
+    as?: As | undefined;
+} & React.RefAttributes<any>) => React.ReactNode;
+declare function CardIcon({ icon: IconComponent, 'aria-label': ariaLabel, className }: IconProps): React.JSX.Element;
+declare namespace CardIcon {
+    var displayName: string;
+}
+declare function CardImage({ src, alt, className, ...rest }: ImageProps): React.JSX.Element;
+declare namespace CardImage {
+    var displayName: string;
+}
+/**
+ * Heading shown at the top of a Card.
+ *
+ * When the parent Card uses `as="section"`, the heading's `id` is
+ * automatically wired to the section's `aria-labelledby`.
+ */
 declare const CardHeading: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     /**
      * The heading level to render. Defaults to 'h3'.
@@ -87,20 +109,34 @@ declare const CardHeading: React.ForwardRefExoticComponent<Omit<React.DetailedHT
     children: React.ReactNode;
 } & React.RefAttributes<HTMLHeadingElement>>;
 declare const CardDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    /**
+     * Card description. Rendered as a `<p>`, so keep it to flowing text.
+     */
     children: React.ReactNode;
 } & React.RefAttributes<HTMLParagraphElement>>;
-declare const CardMenu: {
-    ({ children }: MenuProps): React.JSX.Element;
-    displayName: string;
-};
+/**
+ * Top-right slot for a single interactive control.
+ *
+ * Give the control a label that names the card (e.g. `"More options for
+ * Project Alpha"`, not just `"More options"`) so users can tell which card
+ * the action applies to when several cards are visible.
+ */
+declare function CardAction({ children }: ActionProps): React.JSX.Element;
+declare namespace CardAction {
+    var displayName: string;
+}
 declare const CardMetadata: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * Metadata row at the bottom of the card. Any content works: text, icons,
+     * a `Label`, an `Octicon`.
+     */
     children: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
-export { CardImpl, CardIcon, CardImage, CardHeading, CardDescription, CardMenu, CardMetadata };
+export { CardImpl, CardIcon, CardImage, CardHeading, CardDescription, CardAction, CardMetadata };
 export type { HeadingProps as CardHeadingProps };
 export type { DescriptionProps as CardDescriptionProps };
 export type { IconProps as CardIconProps };
 export type { ImageProps as CardImageProps };
-export type { MenuProps as CardMenuProps };
+export type { ActionProps as CardActionProps };
 export type { MetadataProps as CardMetadataProps };
 //# sourceMappingURL=Card.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAC9D;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAA;IAEzC;;;OAGG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CAClC,CAAA;AAED,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEpD,KAAK,YAAY,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,GAAG;IACzD;;OAEG;IACH,EAAE,CAAC,EAAE,YAAY,CAAA;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,GAAG;IAC5D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED,KAAK,SAAS,GAAG;IACf;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,WAAW,CAAA;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,KAAK,UAAU,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACxD;;OAEG;IACH,GAAG,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED,KAAK,aAAa,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED,QAAA,MAAM,QAAQ;IAhEZ;;;OAGG;gBACS,MAAM;IAElB;;;OAGG;cACO,MAAM,GAAG,WAAW,GAAG,QAAQ;IAEzC;;;OAGG;mBACY,QAAQ,GAAG,OAAO;wCAoHjC,CAAA;AAEF,QAAA,MAAM,QAAQ;kEAA+D,SAAS;;CAWrF,CAAA;AAID,QAAA,MAAM,SAAS;uCAAyC,UAAU;;CAEjE,CAAA;AAID,QAAA,MAAM,WAAW;IArIf;;OAEG;SACE,YAAY;cACP,KAAK,CAAC,SAAS;4CA0IzB,CAAA;AAEF,QAAA,MAAM,eAAe;cAxIT,KAAK,CAAC,SAAS;8CAiJzB,CAAA;AAEF,QAAA,MAAM,QAAQ;mBAAgB,SAAS;;CAEtC,CAAA;AAID,QAAA,MAAM,YAAY;cA1HN,KAAK,CAAC,SAAS;wCAmIzB,CAAA;AAEF,OAAO,EAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,YAAY,EAAC,CAAA;AAC5F,YAAY,EAAC,YAAY,IAAI,gBAAgB,EAAC,CAAA;AAC9C,YAAY,EAAC,gBAAgB,IAAI,oBAAoB,EAAC,CAAA;AACtD,YAAY,EAAC,SAAS,IAAI,aAAa,EAAC,CAAA;AACxC,YAAY,EAAC,UAAU,IAAI,cAAc,EAAC,CAAA;AAC1C,YAAY,EAAC,SAAS,IAAI,aAAa,EAAC,CAAA;AACxC,YAAY,EAAC,aAAa,IAAI,iBAAiB,EAAC,CAAA"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"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"}