@primer/react 38.38.0 → 38.39.0-rc.052483c40

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @primer/react
 
+## 38.39.0
+
+### Minor Changes
+
+- [#8372](https://github.com/primer/react/pull/8372) [`23185b7`](https://github.com/primer/react/commit/23185b7a6d457d8d8a2161d804bb36da5e62e301) Thanks [@rickyzhangca](https://github.com/rickyzhangca)! - DataTable: Add `Table.Group` for rendering accessible groups of table rows.
+
+### Patch Changes
+
+- [#8370](https://github.com/primer/react/pull/8370) [`56ebdc4`](https://github.com/primer/react/commit/56ebdc49f8f6c862288ee653a4cdc7a70afe829c) Thanks [@rickyzhangca](https://github.com/rickyzhangca)! - ScrollableRegion: Remove focusability when content no longer overflows
+
+- [#8371](https://github.com/primer/react/pull/8371) [`dc8387f`](https://github.com/primer/react/commit/dc8387f4fa07cf00887cb2412d358fb7eb54be63) Thanks [@rickyzhangca](https://github.com/rickyzhangca)! - DataTable: Keep sortable column names concise and convey the next sort action as an accessible description
+
 ## 38.38.0
 
 ### Minor Changes

package/dist/DataTable/Table-50e68700.css

@@ -0,0 +1,2 @@
+.prc-DataTable-TableContainer-hn0p3{column-gap:var(--base-size-8,.5rem);display:grid;grid-template-areas:"title actions" "divider divider" "subtitle subtitle" "filter filter" "table table" "footer footer";grid-template-columns:1fr 1fr}.prc-DataTable-TableTitle-nM43N{align-self:center;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600);grid-area:title;line-height:20px}.prc-DataTable-TableSubtitle--L6Ho,.prc-DataTable-TableTitle-nM43N{color:var(--fgColor-default,#1f2328);margin:0}.prc-DataTable-TableSubtitle--L6Ho{font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);grid-area:subtitle;line-height:var(--text-title-lineHeight-small,1.5)}.prc-DataTable-TableActions-fkc2b{align-items:center;column-gap:var(--base-size-8,.5rem);display:flex;grid-area:actions;justify-self:end}.prc-DataTable-TableDivider-TRc3b{background-color:var(--borderColor-default,#d1d9e0);grid-area:divider;height:1px;margin-block-end:var(--base-size-8,.5rem);margin-block-start:var(--base-size-16,1rem);width:100%}.prc-DataTable-TableActions-fkc2b+.prc-DataTable-TableOverflowWrapper-bSqT-,.prc-DataTable-TableSubtitle--L6Ho+.prc-DataTable-TableOverflowWrapper-bSqT-,.prc-DataTable-TableTitle-nM43N+.prc-DataTable-TableOverflowWrapper-bSqT-{margin-block-start:var(--base-size-8,.5rem)}.prc-DataTable-Table-7ux1n,.prc-DataTable-TableOverflowWrapper-bSqT-{grid-area:table}.prc-DataTable-Table-7ux1n{--table-border-radius:0.375rem;--table-cell-padding:var(--cell-padding-block,0.5rem) var(--cell-padding-inline,0.75rem);--table-font-size:0.75rem;background-color:var(--bgColor-default,#fff);border-collapse:separate;border-spacing:0;display:grid;font-size:var(--table-font-size);grid-template-columns:var(--grid-template-columns);line-height:1.66667;width:100%}.prc-DataTable-Table-7ux1n:where([data-cell-padding=condensed]){--cell-padding-block:0.25rem;--cell-padding-inline:0.5rem}.prc-DataTable-Table-7ux1n:where([data-cell-padding=normal]){--cell-padding-block:0.5rem;--cell-padding-inline:0.75rem}.prc-DataTable-Table-7ux1n:where([data-cell-padding=spacious]){--cell-padding-block:0.75rem;--cell-padding-inline:1rem}.prc-DataTable-TableCell-Fk4ve:first-child,.prc-DataTable-TableHeader-eyTab:first-child{border-inline-start:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0)}.prc-DataTable-TableCell-Fk4ve:last-child,.prc-DataTable-TableHeader-eyTab:last-child{border-inline-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0)}.prc-DataTable-TableCell-Fk4ve,.prc-DataTable-TableHeader-eyTab{align-items:center;border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);display:flex;padding:var(--table-cell-padding);text-align:start}.prc-DataTable-TableCell-Fk4ve:where([data-cell-align=end]),.prc-DataTable-TableHeader-eyTab:where([data-cell-align=end]){display:flex;justify-content:flex-end;text-align:end}.prc-DataTable-TableHeader-eyTab[data-cell-align=end] .prc-DataTable-TableSortButton--aq0y{display:flex;flex-direction:row-reverse}.prc-DataTable-TableHead-4FaBf .prc-DataTable-TableRow-Icc7F:first-of-type .prc-DataTable-TableHeader-eyTab{border-block-start:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0)}.prc-DataTable-TableHead-4FaBf .prc-DataTable-TableRow-Icc7F:first-of-type .prc-DataTable-TableHeader-eyTab:first-child{border-top-left-radius:var(--table-border-radius)}.prc-DataTable-TableHead-4FaBf .prc-DataTable-TableRow-Icc7F:first-of-type .prc-DataTable-TableHeader-eyTab:last-child{border-top-right-radius:var(--table-border-radius)}.prc-DataTable-TableOverflowWrapper-bSqT-:last-child .prc-DataTable-Table-7ux1n .prc-DataTable-TableBody-QKQy2:last-of-type .prc-DataTable-TableRow-Icc7F:last-of-type .prc-DataTable-TableCell-Fk4ve:first-child{border-bottom-left-radius:var(--table-border-radius)}.prc-DataTable-TableOverflowWrapper-bSqT-:last-child .prc-DataTable-Table-7ux1n .prc-DataTable-TableBody-QKQy2:last-of-type .prc-DataTable-TableRow-Icc7F:last-of-type .prc-DataTable-TableCell-Fk4ve:last-child{border-bottom-right-radius:var(--table-border-radius)}.prc-DataTable-TableRow-Icc7F>:first-child .prc-DataTable-TableCellSkeletonItem-bGhwZ,.prc-DataTable-TableRow-Icc7F>:first-child:not(.prc-DataTable-TableCellSkeleton-DMdM5){padding-inline-start:var(--base-size-16,1rem)}.prc-DataTable-TableRow-Icc7F>:last-child .prc-DataTable-TableCellSkeletonItem-bGhwZ,.prc-DataTable-TableRow-Icc7F>:last-child:not(.prc-DataTable-TableCellSkeleton-DMdM5){padding-inline-end:var(--base-size-16,1rem)}.prc-DataTable-TableHeader-eyTab{background-color:var(--bgColor-muted,#f6f8fa);border-block-start:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);color:var(--fgColor-muted,#59636e);font-weight:var(--base-text-weight-semibold,600)}.prc-DataTable-TableHeader-eyTab:where([aria-sort=ascending]),.prc-DataTable-TableHeader-eyTab:where([aria-sort=descending]){color:var(--fgColor-default,#1f2328)}.prc-DataTable-TableSortIcon-wHvJw{visibility:hidden}.prc-DataTable-TableHeader-eyTab .prc-DataTable-TableSortButton--aq0y:focus .prc-DataTable-TableSortIcon--ascending-Lpx6z,.prc-DataTable-TableHeader-eyTab:hover .prc-DataTable-TableSortIcon--ascending-Lpx6z,.prc-DataTable-TableHeader-eyTab[aria-sort=ascending] .prc-DataTable-TableSortIcon--ascending-Lpx6z,.prc-DataTable-TableHeader-eyTab[aria-sort=descending] .prc-DataTable-TableSortIcon--descending-hHJGo{visibility:visible}.prc-DataTable-TableRow-Icc7F:hover .prc-DataTable-TableCell-Fk4ve:not(.prc-DataTable-TableCellSkeleton-DMdM5){background-color:var(--control-transparent-bgColor-hover,#818b981a)}.prc-DataTable-TableCell-Fk4ve:where([scope=row]){align-items:center;color:var(--fgColor-default,#1f2328);display:flex;font-weight:var(--base-text-weight-semibold,600)}.prc-DataTable-TableCellSkeleton-DMdM5{padding:0}.prc-DataTable-TableCellSkeletonItems-Ljhq5{display:flex;flex-direction:column;width:100%}.prc-DataTable-TableCellSkeletonItem-bGhwZ{padding:var(--table-cell-padding)}.prc-DataTable-TableCellSkeletonItem-bGhwZ:nth-of-type(5n+1){--skeleton-item-width:85%}.prc-DataTable-TableCellSkeletonItem-bGhwZ:nth-of-type(5n+2){--skeleton-item-width:67.5%}.prc-DataTable-TableCellSkeletonItem-bGhwZ:nth-of-type(5n+3){--skeleton-item-width:80%}.prc-DataTable-TableCellSkeletonItem-bGhwZ:nth-of-type(5n+4){--skeleton-item-width:60%}.prc-DataTable-TableCellSkeletonItem-bGhwZ:nth-of-type(5n+5){--skeleton-item-width:75%}.prc-DataTable-TableCellSkeletonItem-bGhwZ [data-component=SkeletonText]{width:var(--skeleton-item-width)}.prc-DataTable-TableCellSkeletonItem-bGhwZ:not(:last-of-type){border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0)}.prc-DataTable-TableSortButton--aq0y{column-gap:.5rem}.prc-DataTable-TableBody-QKQy2,.prc-DataTable-TableGroupHeaderBody-K-YqR,.prc-DataTable-TableHead-4FaBf,.prc-DataTable-TableRow-Icc7F{display:contents}@supports (grid-template-columns:subgrid){.prc-DataTable-TableBody-QKQy2,.prc-DataTable-TableGroupHeaderBody-K-YqR,.prc-DataTable-TableHead-4FaBf,.prc-DataTable-TableRow-Icc7F{display:grid;grid-column:-1/1;grid-template-columns:subgrid}}.prc-DataTable-TableGroupHeaderCell-vnb30{background-color:var(--bgColor-muted,#f6f8fa);border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);border-inline-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);border-inline-start:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);color:var(--fgColor-muted,#59636e);grid-column:1/-1;padding:var(--table-cell-padding);text-align:start}.prc-DataTable-TableGroupHeaderCell-vnb30,.prc-DataTable-TableGroupHeaderContent-H9FbA{align-items:baseline;column-gap:var(--base-size-8,.5rem);display:flex}.prc-DataTable-TableGroupHeaderLabel--c-od{color:var(--fgColor-default,#1f2328);font-weight:var(--base-text-weight-semibold,600)}.prc-DataTable-PlaceholderText-8bHo7,.prc-DataTable-TableGroupHeaderCount-6r8Pj{color:var(--fgColor-muted,#59636e)}
+/*# sourceMappingURL=Table-50e68700.css.map */

package/dist/DataTable/Table-50e68700.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/DataTable/Table.module.css.js"],"names":[],"mappings":"AACA,oCAUE,mCAA8B,CAT9B,YAAa,CAEb,uHAMiB,CAPjB,6BASF,CAGA,gCAQE,iBAAkB,CANlB,8CAAuC,CACvC,gDAA6C,CAI7C,eAAgB,CAFhB,gBAIF,CAGA,mEANE,oCAA6B,CAL7B,QAkBF,CAPA,mCAEE,4CAAsC,CACtC,8CAA2C,CAG3C,kBAAmB,CAFnB,kDAGF,CAGA,kCAGE,kBAAmB,CADnB,mCAA8B,CAD9B,YAAa,CAGb,iBAAkB,CAClB,gBACF,CAGA,kCAIE,mDAA4C,CAC5C,iBAAkB,CAHlB,UAAW,CAKX,yCAAoC,CADpC,2CAAuC,CALvC,UAOF,CAGA,mOAGE,2CACF,CAOA,qEAJE,eAsCF,CAlCA,2BAEE,8BAA+B,CAC/B,wFAA2F,CAC3F,yBAA0B,CAW1B,4CAAwC,CADxC,wBAAyB,CAFzB,gBAAiB,CANjB,YAAa,CAGb,gCAAiC,CAQjC,kDAAmD,CANnD,mBAA0B,CAJ1B,UA2BF,CAdE,gEACE,4BAA6B,CAC7B,4BACF,CAEA,6DACE,2BAA4B,CAC5B,6BACF,CAEA,+DACE,4BAA6B,CAC7B,0BACF,CAIF,wFAEE,6FACF,CAEA,sFAEE,2FACF,CAEA,gEAME,kBAAmB,CACnB,0FAA0E,CAL1E,YAAa,CAEb,iCAAkC,CAClC,gBAGF,CAEA,0HAEE,YAAa,CAEb,wBAAyB,CADzB,cAEF,CAEA,2FACE,YAAa,CACb,0BACF,CAEA,4GACE,4FACF,CAIA,wHAEE,iDACF,CAGA,uHAEE,kDACF,CAGA,kNAEE,oDACF,CAGA,iNAEE,qDACF,CAMA,6KAEE,6CACF,CAEA,2KAEE,2CACF,CAGA,iCAGE,6CAAsC,CACtC,4FAA4E,CAF5E,kCAA2B,CAD3B,gDAIF,CAEA,6HAEE,oCACF,CAGA,mCACE,iBACF,CASA,yZAEE,kBACF,CAGA,+GACE,mEACF,CAGA,kDAIE,kBAAmB,CADnB,oCAA6B,CAF7B,YAAa,CACb,gDAGF,CAGA,uCACE,SACF,CAEA,4CACE,YAAa,CAEb,qBAAsB,CADtB,UAEF,CAEA,2CAEE,iCAqBF,CAnBE,6DACE,yBACF,CAEA,6DACE,2BACF,CAEA,6DACE,yBACF,CAEA,6DACE,yBACF,CAEA,6DACE,yBACF,CAGF,yEACE,gCACF,CAEA,8DACE,0FACF,CAEA,qCACE,gBACF,CAGA,sIAIE,gBACF,CAEA,0CACE,sIAIE,YAAa,CAEb,gBAAkB,CADlB,6BAEF,CACF,CAEA,0CASE,6CAAsC,CAGtC,0FAA0E,CAD1E,2FAA2E,CAD3E,6FAA6E,CAF7E,kCAA2B,CAN3B,gBAAmB,CAInB,iCAAkC,CAClC,gBAMF,CAEA,uFAZE,oBAAqB,CACrB,mCAA8B,CAH9B,YAkBF,CAEA,2CAEE,oCAA6B,CAD7B,gDAEF,CAMA,gFACE,kCACF","file":"Table-50e68700.css","sourcesContent":["/* Container ---------------------------------------------------------------- */\n.TableContainer {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-areas:\n    'title actions'\n    'divider divider'\n    'subtitle subtitle'\n    'filter filter'\n    'table table'\n    'footer footer';\n  column-gap: var(--base-size-8);\n}\n\n/* TableTitle */\n.TableTitle {\n  margin: 0;\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-semibold);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 20px;\n  color: var(--fgColor-default);\n  grid-area: title;\n  align-self: center;\n}\n\n/* TableSubtitle */\n.TableSubtitle {\n  margin: 0;\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-title-lineHeight-small);\n  color: var(--fgColor-default);\n  grid-area: subtitle;\n}\n\n/* TableActions */\n.TableActions {\n  display: flex;\n  column-gap: var(--base-size-8);\n  align-items: center;\n  grid-area: actions;\n  justify-self: end;\n}\n\n/* TableDivider */\n.TableDivider {\n  width: 100%;\n  height: 1px;\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--borderColor-default);\n  grid-area: divider;\n  margin-block-start: var(--base-size-16);\n  margin-block-end: var(--base-size-8);\n}\n\n/* Spacing before the table */\n.TableTitle + .TableOverflowWrapper,\n.TableSubtitle + .TableOverflowWrapper,\n.TableActions + .TableOverflowWrapper {\n  margin-block-start: var(--base-size-8);\n}\n\n.TableOverflowWrapper {\n  grid-area: table;\n}\n\n/* Table -------------------------------------------------------------------- */\n.Table {\n  /* Default table styles */\n  --table-border-radius: 0.375rem;\n  --table-cell-padding: var(--cell-padding-block, 0.5rem) var(--cell-padding-inline, 0.75rem);\n  --table-font-size: 0.75rem;\n\n  display: grid;\n  width: 100%;\n  /* stylelint-disable-next-line primer/typography */\n  font-size: var(--table-font-size);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: calc(20 / 12);\n  border-spacing: 0;\n  /* stylelint-disable-next-line primer/borders */\n  border-collapse: separate;\n  background-color: var(--bgColor-default);\n  grid-area: table;\n  grid-template-columns: var(--grid-template-columns);\n\n  /* Density modes: condensed, normal, spacious */\n  &:where([data-cell-padding='condensed']) {\n    --cell-padding-block: 0.25rem;\n    --cell-padding-inline: 0.5rem;\n  }\n\n  &:where([data-cell-padding='normal']) {\n    --cell-padding-block: 0.5rem;\n    --cell-padding-inline: 0.75rem;\n  }\n\n  &:where([data-cell-padding='spacious']) {\n    --cell-padding-block: 0.75rem;\n    --cell-padding-inline: 1rem;\n  }\n}\n\n/* Borders */\n.TableCell:first-child,\n.TableHeader:first-child {\n  border-inline-start: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableCell:last-child,\n.TableHeader:last-child {\n  border-inline-end: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableHeader,\n.TableCell {\n  display: flex;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--table-cell-padding);\n  text-align: start;\n  align-items: center;\n  border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableHeader:where([data-cell-align='end']),\n.TableCell:where([data-cell-align='end']) {\n  display: flex;\n  text-align: end;\n  justify-content: flex-end;\n}\n\n.TableHeader[data-cell-align='end'] .TableSortButton {\n  display: flex;\n  flex-direction: row-reverse;\n}\n\n.TableHead .TableRow:first-of-type .TableHeader {\n  border-block-start: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n/* Border radius */\n/* stylelint-disable-next-line selector-max-specificity */\n.TableHead .TableRow:first-of-type .TableHeader:first-child {\n  /* stylelint-disable-next-line primer/borders */\n  border-top-left-radius: var(--table-border-radius);\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.TableHead .TableRow:first-of-type .TableHeader:last-child {\n  /* stylelint-disable-next-line primer/borders */\n  border-top-right-radius: var(--table-border-radius);\n}\n\n/* stylelint-disable-next-line selector-max-compound-selectors,selector-max-specificity */\n.TableOverflowWrapper:last-child .Table .TableBody:last-of-type .TableRow:last-of-type .TableCell:first-child {\n  /* stylelint-disable-next-line primer/borders */\n  border-bottom-left-radius: var(--table-border-radius);\n}\n\n/* stylelint-disable-next-line selector-max-compound-selectors,selector-max-specificity */\n.TableOverflowWrapper:last-child .Table .TableBody:last-of-type .TableRow:last-of-type .TableCell:last-child {\n  /* stylelint-disable-next-line primer/borders */\n  border-bottom-right-radius: var(--table-border-radius);\n}\n\n/**\n * Offset padding to make sure type aligns regardless of cell padding\n * selection\n */\n.TableRow > *:first-child:not(.TableCellSkeleton),\n.TableRow > *:first-child .TableCellSkeletonItem {\n  padding-inline-start: var(--base-size-16);\n}\n\n.TableRow > *:last-child:not(.TableCellSkeleton),\n.TableRow > *:last-child .TableCellSkeletonItem {\n  padding-inline-end: var(--base-size-16);\n}\n\n/* TableHeader */\n.TableHeader {\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-muted);\n  background-color: var(--bgColor-muted);\n  border-block-start: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableHeader:where([aria-sort='descending']),\n.TableHeader:where([aria-sort='ascending']) {\n  color: var(--fgColor-default);\n}\n\n/* Control visibility of sort icons */\n.TableSortIcon {\n  visibility: hidden;\n}\n\n/* The ASC icon is visible if the header is sortable and is hovered or focused */\n.TableHeader:hover .TableSortIcon--ascending,\n.TableHeader .TableSortButton:focus .TableSortIcon--ascending {\n  visibility: visible;\n}\n\n/* Each sort icon is visible if the TableHeader is currently in the corresponding sort state */\n.TableHeader[aria-sort='ascending'] .TableSortIcon--ascending,\n.TableHeader[aria-sort='descending'] .TableSortIcon--descending {\n  visibility: visible;\n}\n\n/* TableRow */\n.TableRow:hover .TableCell:not(.TableCellSkeleton) {\n  background-color: var(--control-transparent-bgColor-hover);\n}\n\n/* TableCell */\n.TableCell:where([scope='row']) {\n  display: flex;\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-default);\n  align-items: center;\n}\n\n/* TableCellSkeleton */\n.TableCellSkeleton {\n  padding: 0;\n}\n\n.TableCellSkeletonItems {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n}\n\n.TableCellSkeletonItem {\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--table-cell-padding);\n\n  &:nth-of-type(5n + 1) {\n    --skeleton-item-width: 85%;\n  }\n\n  &:nth-of-type(5n + 2) {\n    --skeleton-item-width: 67.5%;\n  }\n\n  &:nth-of-type(5n + 3) {\n    --skeleton-item-width: 80%;\n  }\n\n  &:nth-of-type(5n + 4) {\n    --skeleton-item-width: 60%;\n  }\n\n  &:nth-of-type(5n + 5) {\n    --skeleton-item-width: 75%;\n  }\n}\n\n.TableCellSkeletonItem [data-component='SkeletonText'] {\n  width: var(--skeleton-item-width);\n}\n\n.TableCellSkeletonItem:not(:last-of-type) {\n  border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableSortButton {\n  column-gap: 0.5rem;\n}\n\n/* Grid layout */\n.TableHead,\n.TableBody,\n.TableGroupHeaderBody,\n.TableRow {\n  display: contents;\n}\n\n@supports (grid-template-columns: subgrid) {\n  .TableHead,\n  .TableBody,\n  .TableGroupHeaderBody,\n  .TableRow {\n    display: grid;\n    grid-template-columns: subgrid;\n    grid-column: -1 /1;\n  }\n}\n\n.TableGroupHeaderCell {\n  display: flex;\n  grid-column: 1 / -1;\n  align-items: baseline;\n  column-gap: var(--base-size-8);\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--table-cell-padding);\n  text-align: start;\n  color: var(--fgColor-muted);\n  background-color: var(--bgColor-muted);\n  border-inline-start: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-inline-end: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableGroupHeaderContent {\n  display: flex;\n  align-items: baseline;\n  column-gap: var(--base-size-8);\n}\n\n.TableGroupHeaderLabel {\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-default);\n}\n\n.TableGroupHeaderCount {\n  color: var(--fgColor-muted);\n}\n\n.PlaceholderText {\n  color: var(--fgColor-muted);\n}\n"]}

package/dist/DataTable/Table.d.ts

@@ -82,6 +82,7 @@ declare function TableCell({
   className,
   children,
   scope,
+  headers,
   ...rest
 }: TableCellProps): JSX.Element;
 type TableCellPlaceholderProps = React.PropsWithChildren;

package/dist/DataTable/Table.js

@@ -5,15 +5,16 @@ import { SkeletonText } from "../SkeletonText/SkeletonText.js";
 import { SortDirection } from "./sorting.js";
 import { useTableLayout } from "./useTable.js";
 import { Button } from "../internal/components/ButtonReset.js";
+import { TableGroupContext } from "./TableGroupContext.js";
 import Table_module_css_default from "./Table.module.css.js";
 import { c } from "react-compiler-runtime";
-import React from "react";
+import React, { useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { SortAscIcon, SortDescIcon } from "@primer/octicons-react";
 //#region src/DataTable/Table.tsx
 const Table = /*#__PURE__*/ React.forwardRef(function Table(t0, ref) {
-	const $ = c(21);
+	const $ = c(24);
 	let className;
 	let gridTemplateColumns;
 	let labelledby;
@@ -35,6 +36,7 @@ const Table = /*#__PURE__*/ React.forwardRef(function Table(t0, ref) {
 		t1 = $[5];
 	}
 	const cellPadding = t1 === void 0 ? "normal" : t1;
+	const inheritedGroup = useContext(TableGroupContext);
 	let t2;
 	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = clsx("TableOverflowWrapper", Table_module_css_default.TableOverflowWrapper);
@@ -84,7 +86,18 @@ const Table = /*#__PURE__*/ React.forwardRef(function Table(t0, ref) {
 		$[19] = t6;
 		$[20] = t7;
 	} else t7 = $[20];
-	return t7;
+	const table = t7;
+	let t8;
+	if ($[21] !== inheritedGroup || $[22] !== table) {
+		t8 = inheritedGroup ? /*#__PURE__*/ jsx(TableGroupContext.Provider, {
+			value: void 0,
+			children: table
+		}) : table;
+		$[21] = inheritedGroup;
+		$[22] = table;
+		$[23] = t8;
+	} else t8 = $[23];
+	return t8;
 });
 function TableHead(t0) {
 	const $ = c(3);
@@ -168,7 +181,7 @@ function TableHeader(t0) {
 	return t2;
 }
 function TableSortHeader(t0) {
-	const $ = c(23);
+	const $ = c(24);
 	let align;
 	let children;
 	let direction;
@@ -190,6 +203,7 @@ function TableSortHeader(t0) {
 		rest = $[5];
 	}
 	const ariaSort = direction === "DESC" ? "descending" : direction === "ASC" ? "ascending" : void 0;
+	const sortAction = direction === SortDirection.ASC ? "Sort descending" : "Sort ascending";
 	let t1;
 	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = clsx("TableSortButton", Table_module_css_default.TableSortButton);
@@ -205,7 +219,7 @@ function TableSortHeader(t0) {
 	} else t2 = $[8];
 	let t3;
 	if ($[9] !== direction) {
-		t3 = direction === SortDirection.NONE || direction === SortDirection.ASC ? /*#__PURE__*/ jsxs(Fragment$1, { children: [/*#__PURE__*/ jsx(SortAscIcon, { className: clsx("TableSortIcon", "TableSortIcon--ascending", Table_module_css_default.TableSortIcon, Table_module_css_default["TableSortIcon--ascending"]) }), direction === SortDirection.NONE ? /*#__PURE__*/ jsx(VisuallyHidden, { children: "sort ascending" }) : null] }) : null;
+		t3 = direction === SortDirection.NONE || direction === SortDirection.ASC ? /*#__PURE__*/ jsx(Fragment$1, { children: /*#__PURE__*/ jsx(SortAscIcon, { className: clsx("TableSortIcon", "TableSortIcon--ascending", Table_module_css_default.TableSortIcon, Table_module_css_default["TableSortIcon--ascending"]) }) }) : null;
 		$[9] = direction;
 		$[10] = t3;
 	} else t3 = $[10];
@@ -216,11 +230,12 @@ function TableSortHeader(t0) {
 		$[12] = t4;
 	} else t4 = $[12];
 	let t5;
-	if ($[13] !== children || $[14] !== t2 || $[15] !== t3 || $[16] !== t4) {
+	if ($[13] !== children || $[14] !== sortAction || $[15] !== t2 || $[16] !== t3 || $[17] !== t4) {
 		t5 = /*#__PURE__*/ jsxs(Button, {
 			type: "button",
 			className: t1,
 			"data-component": "Table.SortHeader.Button",
+			"aria-description": sortAction,
 			onClick: t2,
 			children: [
 				children,
@@ -229,13 +244,14 @@ function TableSortHeader(t0) {
 			]
 		});
 		$[13] = children;
-		$[14] = t2;
-		$[15] = t3;
-		$[16] = t4;
-		$[17] = t5;
-	} else t5 = $[17];
+		$[14] = sortAction;
+		$[15] = t2;
+		$[16] = t3;
+		$[17] = t4;
+		$[18] = t5;
+	} else t5 = $[18];
 	let t6;
-	if ($[18] !== align || $[19] !== ariaSort || $[20] !== rest || $[21] !== t5) {
+	if ($[19] !== align || $[20] !== ariaSort || $[21] !== rest || $[22] !== t5) {
 		t6 = /*#__PURE__*/ jsx(TableHeader, {
 			...rest,
 			"aria-sort": ariaSort,
@@ -243,12 +259,12 @@ function TableSortHeader(t0) {
 			"data-component": "Table.SortHeader",
 			children: t5
 		});
-		$[18] = align;
-		$[19] = ariaSort;
-		$[20] = rest;
-		$[21] = t5;
-		$[22] = t6;
-	} else t6 = $[22];
+		$[19] = align;
+		$[20] = ariaSort;
+		$[21] = rest;
+		$[22] = t5;
+		$[23] = t6;
+	} else t6 = $[23];
 	return t6;
 }
 function TableRow(t0) {
@@ -285,56 +301,70 @@ function TableRow(t0) {
 	return t2;
 }
 function TableCell(t0) {
-	const $ = c(16);
+	const $ = c(21);
 	let align;
 	let children;
 	let className;
+	let headers;
 	let rest;
 	let scope;
 	if ($[0] !== t0) {
-		({align, className, children, scope, ...rest} = t0);
+		({align, className, children, scope, headers, ...rest} = t0);
 		$[0] = t0;
 		$[1] = align;
 		$[2] = children;
 		$[3] = className;
-		$[4] = rest;
-		$[5] = scope;
+		$[4] = headers;
+		$[5] = rest;
+		$[6] = scope;
 	} else {
 		align = $[1];
 		children = $[2];
 		className = $[3];
-		rest = $[4];
-		scope = $[5];
+		headers = $[4];
+		rest = $[5];
+		scope = $[6];
 	}
 	const BaseComponent = scope ? "th" : "td";
 	const role = scope ? "rowheader" : "cell";
+	const group = useContext(TableGroupContext);
 	let t1;
-	if ($[6] !== className) {
-		t1 = clsx("TableCell", className, Table_module_css_default.TableCell);
-		$[6] = className;
-		$[7] = t1;
-	} else t1 = $[7];
+	if ($[7] !== (group === null || group === void 0 ? void 0 : group.headerId) || $[8] !== headers) {
+		t1 = [group === null || group === void 0 ? void 0 : group.headerId, headers].filter(Boolean).join(" ") || void 0;
+		$[7] = group === null || group === void 0 ? void 0 : group.headerId;
+		$[8] = headers;
+		$[9] = t1;
+	} else t1 = $[9];
+	const resolvedHeaders = t1;
 	let t2;
-	if ($[8] !== BaseComponent || $[9] !== align || $[10] !== children || $[11] !== rest || $[12] !== role || $[13] !== scope || $[14] !== t1) {
-		t2 = /*#__PURE__*/ jsx(BaseComponent, {
+	if ($[10] !== className) {
+		t2 = clsx("TableCell", className, Table_module_css_default.TableCell);
+		$[10] = className;
+		$[11] = t2;
+	} else t2 = $[11];
+	let t3;
+	if ($[12] !== BaseComponent || $[13] !== align || $[14] !== children || $[15] !== resolvedHeaders || $[16] !== rest || $[17] !== role || $[18] !== scope || $[19] !== t2) {
+		t3 = /*#__PURE__*/ jsx(BaseComponent, {
 			...rest,
-			className: t1,
+			className: t2,
 			scope,
 			role,
 			"data-cell-align": align,
 			"data-component": "Table.Cell",
+			headers: resolvedHeaders,
 			children
 		});
-		$[8] = BaseComponent;
-		$[9] = align;
-		$[10] = children;
-		$[11] = rest;
-		$[12] = role;
-		$[13] = scope;
-		$[14] = t1;
-		$[15] = t2;
-	} else t2 = $[15];
-	return t2;
+		$[12] = BaseComponent;
+		$[13] = align;
+		$[14] = children;
+		$[15] = resolvedHeaders;
+		$[16] = rest;
+		$[17] = role;
+		$[18] = scope;
+		$[19] = t2;
+		$[20] = t3;
+	} else t3 = $[20];
+	return t3;
 }
 function TableCellPlaceholder(t0) {
 	const $ = c(2);

package/dist/DataTable/Table.module.css.js

@@ -1,4 +1,4 @@
-import "./Table-7f5cb3e4.css";
+import "./Table-50e68700.css";
 //#region src/DataTable/Table.module.css.js
 var Table_module_css_default = {
 	"TableContainer": "prc-DataTable-TableContainer-hn0p3",
@@ -20,7 +20,12 @@ var Table_module_css_default = {
 	"TableSortIcon--ascending": "prc-DataTable-TableSortIcon--ascending-Lpx6z",
 	"TableSortIcon--descending": "prc-DataTable-TableSortIcon--descending-hHJGo",
 	"TableCellSkeletonItems": "prc-DataTable-TableCellSkeletonItems-Ljhq5",
-	"PlaceholderText": "prc-DataTable-PlaceholderText-8bHo7"
+	"TableGroupHeaderBody": "prc-DataTable-TableGroupHeaderBody-K-YqR",
+	"TableGroupHeaderCell": "prc-DataTable-TableGroupHeaderCell-vnb30",
+	"TableGroupHeaderContent": "prc-DataTable-TableGroupHeaderContent-H9FbA",
+	"TableGroupHeaderLabel": "prc-DataTable-TableGroupHeaderLabel--c-od",
+	"PlaceholderText": "prc-DataTable-PlaceholderText-8bHo7",
+	"TableGroupHeaderCount": "prc-DataTable-TableGroupHeaderCount-6r8Pj"
 };
 //#endregion
 export { Table_module_css_default as default };

package/dist/DataTable/TableGroup.d.ts

@@ -0,0 +1,41 @@
+import React from "react";
+
+//#region src/DataTable/TableGroup.d.ts
+type TableGroupProps = {
+  /**
+   * Provide a custom class name for the group header section
+   */
+  className?: string;
+  /**
+   * Provide a stable identifier exposed on both group sections as `data-group-id`
+   */
+  id: string | number;
+  /**
+   * Provide a label for the group header
+   */
+  label: string;
+  /**
+   * Specify the number of member rows in the group
+   */
+  rowCount: number;
+  /**
+   * Provide an accessible name for the group header
+   */
+  'aria-label'?: string;
+  /**
+   * Specify the number of columns spanned by the group header
+   */
+  colSpan: number;
+  children?: React.ReactNode;
+};
+declare function TableGroup({
+  className,
+  id,
+  label,
+  rowCount,
+  colSpan,
+  children,
+  'aria-label': ariaLabel
+}: TableGroupProps): React.JSX.Element;
+//#endregion
+export { TableGroup, TableGroupProps };

package/dist/DataTable/TableGroup.js

@@ -0,0 +1,155 @@
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { TableGroupContext } from "./TableGroupContext.js";
+import Table_module_css_default from "./Table.module.css.js";
+import { TableRow } from "./Table.js";
+import { c } from "react-compiler-runtime";
+import { useId } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+//#region src/DataTable/TableGroup.tsx
+function TableGroup(t0) {
+	const $ = c(37);
+	const { className, id, label, rowCount, colSpan, children, "aria-label": ariaLabel } = t0;
+	const headerId = useId();
+	const accessibleName = `${label}, ${rowCount} ${rowCount === 1 ? "row" : "rows"}`;
+	let t1;
+	if ($[0] !== headerId) {
+		t1 = { headerId };
+		$[0] = headerId;
+		$[1] = t1;
+	} else t1 = $[1];
+	const contextValue = t1;
+	let t2;
+	if ($[2] !== className) {
+		t2 = clsx("TableGroupHeaderBody", Table_module_css_default.TableGroupHeaderBody, className);
+		$[2] = className;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = clsx("TableGroupHeaderCell", Table_module_css_default.TableGroupHeaderCell);
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== accessibleName) {
+		t4 = /*#__PURE__*/ jsx(VisuallyHidden, { children: accessibleName });
+		$[5] = accessibleName;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	let t6;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = clsx("TableGroupHeaderContent", Table_module_css_default.TableGroupHeaderContent);
+		t6 = clsx("TableGroupHeaderLabel", Table_module_css_default.TableGroupHeaderLabel);
+		$[7] = t5;
+		$[8] = t6;
+	} else {
+		t5 = $[7];
+		t6 = $[8];
+	}
+	let t7;
+	if ($[9] !== label) {
+		t7 = /*#__PURE__*/ jsx("span", {
+			className: t6,
+			children: label
+		});
+		$[9] = label;
+		$[10] = t7;
+	} else t7 = $[10];
+	let t8;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = clsx("TableGroupHeaderCount", Table_module_css_default.TableGroupHeaderCount);
+		$[11] = t8;
+	} else t8 = $[11];
+	let t9;
+	if ($[12] !== rowCount) {
+		t9 = /*#__PURE__*/ jsx("span", {
+			className: t8,
+			children: rowCount
+		});
+		$[12] = rowCount;
+		$[13] = t9;
+	} else t9 = $[13];
+	let t10;
+	if ($[14] !== t7 || $[15] !== t9) {
+		t10 = /*#__PURE__*/ jsxs("span", {
+			"aria-hidden": "true",
+			className: t5,
+			children: [t7, t9]
+		});
+		$[14] = t7;
+		$[15] = t9;
+		$[16] = t10;
+	} else t10 = $[16];
+	let t11;
+	if ($[17] !== ariaLabel || $[18] !== colSpan || $[19] !== headerId || $[20] !== t10 || $[21] !== t4) {
+		t11 = /*#__PURE__*/ jsx(TableRow, { children: /*#__PURE__*/ jsxs("th", {
+			id: headerId,
+			className: t3,
+			scope: "colgroup",
+			colSpan,
+			role: "columnheader",
+			"aria-label": ariaLabel,
+			"data-component": "Table.Group.Header",
+			children: [t4, t10]
+		}) });
+		$[17] = ariaLabel;
+		$[18] = colSpan;
+		$[19] = headerId;
+		$[20] = t10;
+		$[21] = t4;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== id || $[24] !== t11 || $[25] !== t2) {
+		t12 = /*#__PURE__*/ jsx("tbody", {
+			className: t2,
+			role: "rowgroup",
+			"data-component": "Table.Group",
+			"data-group-id": id,
+			children: t11
+		});
+		$[23] = id;
+		$[24] = t11;
+		$[25] = t2;
+		$[26] = t12;
+	} else t12 = $[26];
+	let t13;
+	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = clsx("TableBody", Table_module_css_default.TableBody);
+		$[27] = t13;
+	} else t13 = $[27];
+	let t14;
+	if ($[28] !== children || $[29] !== contextValue) {
+		t14 = /*#__PURE__*/ jsx(TableGroupContext.Provider, {
+			value: contextValue,
+			children
+		});
+		$[28] = children;
+		$[29] = contextValue;
+		$[30] = t14;
+	} else t14 = $[30];
+	let t15;
+	if ($[31] !== id || $[32] !== t14) {
+		t15 = /*#__PURE__*/ jsx("tbody", {
+			className: t13,
+			role: "rowgroup",
+			"data-component": "Table.Group.Body",
+			"data-group-id": id,
+			children: t14
+		});
+		$[31] = id;
+		$[32] = t14;
+		$[33] = t15;
+	} else t15 = $[33];
+	let t16;
+	if ($[34] !== t12 || $[35] !== t15) {
+		t16 = /*#__PURE__*/ jsxs(Fragment$1, { children: [t12, t15] });
+		$[34] = t12;
+		$[35] = t15;
+		$[36] = t16;
+	} else t16 = $[36];
+	return t16;
+}
+//#endregion
+export { TableGroup };

package/dist/DataTable/TableGroupContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+//#region src/DataTable/TableGroupContext.ts
+const TableGroupContext = /*#__PURE__*/ createContext(void 0);
+//#endregion
+export { TableGroupContext };

package/dist/DataTable/index.d.ts

@@ -5,6 +5,7 @@ import { CellAlignment, Column, ColumnWidth, createColumnHelper } from "./column
 import { DataTable, DataTableProps } from "./DataTable.js";
 import { ErrorDialog } from "./ErrorDialog.js";
 import { Table as Table$1, TableActions, TableActionsProps, TableBody, TableBodyProps, TableCell, TableCellPlaceholder, TableCellProps, TableContainer, TableContainerProps, TableDivider, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps, TableSkeleton, TableSkeletonProps, TableSubtitle, TableSubtitleProps, TableTitle, TableTitleProps } from "./Table.js";
+import { TableGroup, TableGroupProps } from "./TableGroup.js";
 import { Pagination } from "./Pagination.js";
 
 //#region src/DataTable/index.d.ts
@@ -17,6 +18,7 @@ declare const Table: typeof Table$1 & SlotMarker & {
   Skeleton: typeof TableSkeleton;
   Head: typeof TableHead;
   Body: typeof TableBody;
+  Group: typeof TableGroup;
   Header: typeof TableHeader;
   Row: typeof TableRow;
   Cell: typeof TableCell;
@@ -25,4 +27,4 @@ declare const Table: typeof Table$1 & SlotMarker & {
   ErrorDialog: typeof ErrorDialog;
 };
 //#endregion
-export { type CellAlignment, type Column, type ColumnWidth, DataTable, type DataTableProps, type ObjectPaths, Table, type TableActionsProps, type TableBodyProps, type TableCellProps, type TableContainerProps, type TableHeadProps, type TableHeaderProps, type TableProps, type TableRowProps, type TableSubtitleProps, type TableTitleProps, type UniqueRow, createColumnHelper };
+export { type CellAlignment, type Column, type ColumnWidth, DataTable, type DataTableProps, type ObjectPaths, Table, type TableActionsProps, type TableBodyProps, type TableCellProps, type TableContainerProps, type TableGroupProps, type TableHeadProps, type TableHeaderProps, type TableProps, type TableRowProps, type TableSubtitleProps, type TableTitleProps, type UniqueRow, createColumnHelper };

package/dist/DataTable/index.js

@@ -1,6 +1,7 @@
 import { Table as Table$1, TableActions, TableBody, TableCell, TableCellPlaceholder, TableContainer, TableDivider, TableHead, TableHeader, TableRow, TableSkeleton, TableSubtitle, TableTitle } from "./Table.js";
 import { DataTable } from "./DataTable.js";
 import { ErrorDialog } from "./ErrorDialog.js";
+import { TableGroup } from "./TableGroup.js";
 import { Pagination } from "./Pagination.js";
 import { createColumnHelper } from "./column.js";
 //#region src/DataTable/index.ts
@@ -13,6 +14,7 @@ const Table = Object.assign(Table$1, {
 	Skeleton: TableSkeleton,
 	Head: TableHead,
 	Body: TableBody,
+	Group: TableGroup,
 	Header: TableHeader,
 	Row: TableRow,
 	Cell: TableCell,

package/dist/experimental/index.d.ts

@@ -29,6 +29,7 @@ import { CardActionProps as ActionProps, CardDescriptionProps as DescriptionProp
 import { Card } from "../Card/index.js";
 import { DataTable, DataTableProps } from "../DataTable/DataTable.js";
 import { TableActionsProps, TableBodyProps, TableCellProps, TableContainerProps, TableHeadProps, TableHeaderProps, TableProps, TableRowProps, TableSubtitleProps, TableTitleProps } from "../DataTable/Table.js";
+import { TableGroupProps } from "../DataTable/TableGroup.js";
 import { Table } from "../DataTable/index.js";
 import { InlineMessage, InlineMessageProps } from "../InlineMessage/InlineMessage.js";
 import { Hidden, HiddenProps } from "../Hidden/Hidden.js";
@@ -50,4 +51,4 @@ import { useTabPanel } from "./Tabs/useTabPanel.js";
 import { TopicTagProps } from "../TopicTag/TopicTag.js";
 import { TopicTagGroupProps } from "../TopicTag/TopicTagGroup.js";
 import { TopicTag } from "../TopicTag/index.js";
-export { ActionBar, type ActionBarButtonProps, type ActionBarMenuItemProps, type ActionBarMenuProps, type ActionBarProps, Announce, type AnnounceProps, AriaAlert, type AriaAlertProps, AriaStatus, type AriaStatusProps, BlankslateContainer as Blankslate, type BlankslateProps, ButtonBase, type ButtonBaseProps, Card, type ActionProps as CardActionProps, type DescriptionProps as CardDescriptionProps, type HeadingProps as CardHeadingProps, type IconProps as CardIconProps, type ImageProps as CardImageProps, type MetadataProps as CardMetadataProps, type CardProps, type CellAlignment, type Column, type ColumnWidth, DataTable, type DataTableProps, DefaultFeatureFlags, Dialog, type DialogButtonProps, type DialogHeaderProps, type DialogHeight, type DialogProps, type DialogWidth, FeatureFlags, type FeatureFlagsProps, FilteredActionList, type FilteredActionListInputProps, FilteredActionListLoadingTypes, type FilteredActionListProps, Hidden, type HiddenProps, InlineMessage, type InlineMessageProps, IssueLabel, type IssueLabelProps, KeybindingHint, type KeybindingHintProps, NavList, type NavListDividerProps, type NavListGroupProps, type NavListItemProps, type NavListLeadingVisualProps, type NavListProps, type NavListSubNavProps, type NavListTrailingVisualProps, type ObjectPaths, PageHeader, type ActionsProps as PageHeaderActionsProps, type PageHeaderProps, type TitleProps as PageHeaderTitleProps, ScrollableRegion, type ScrollableRegionProps, SelectPanel, type SelectPanelMessageProps, type SelectPanelProps, type SelectPanelSecondaryActionProps, SkeletonAvatar, type SkeletonAvatarProps, SkeletonBox, type SkeletonBoxProps, SkeletonText, type SkeletonTextProps, SlotConfig, Stack, type StackItemProps, type StackProps, type TabListProps, type TabPanelProps, type TabProps, Table, type TableActionsProps, type TableBodyProps, type TableCellProps, type TableContainerProps, type TableHeadProps, type TableHeaderProps, type TableProps, type TableRowProps, type TableSubtitleProps, type TableTitleProps, Tabs, type TabsProps, type TitleProps, Tooltip, type TooltipProps, TopicTag, type TopicTagGroupProps, type TopicTagProps, _default as UnderlinePanels, type PanelProps as UnderlinePanelsPanelProps, type UnderlinePanelsProps, type TabProps$1 as UnderlinePanelsTabProps, type UniqueRow, createColumnHelper, getAccessibleKeybindingHintString, useFeatureFlag, useOverflow, useSlots, useTab, useTabList, useTabPanel };
+export { ActionBar, type ActionBarButtonProps, type ActionBarMenuItemProps, type ActionBarMenuProps, type ActionBarProps, Announce, type AnnounceProps, AriaAlert, type AriaAlertProps, AriaStatus, type AriaStatusProps, BlankslateContainer as Blankslate, type BlankslateProps, ButtonBase, type ButtonBaseProps, Card, type ActionProps as CardActionProps, type DescriptionProps as CardDescriptionProps, type HeadingProps as CardHeadingProps, type IconProps as CardIconProps, type ImageProps as CardImageProps, type MetadataProps as CardMetadataProps, type CardProps, type CellAlignment, type Column, type ColumnWidth, DataTable, type DataTableProps, DefaultFeatureFlags, Dialog, type DialogButtonProps, type DialogHeaderProps, type DialogHeight, type DialogProps, type DialogWidth, FeatureFlags, type FeatureFlagsProps, FilteredActionList, type FilteredActionListInputProps, FilteredActionListLoadingTypes, type FilteredActionListProps, Hidden, type HiddenProps, InlineMessage, type InlineMessageProps, IssueLabel, type IssueLabelProps, KeybindingHint, type KeybindingHintProps, NavList, type NavListDividerProps, type NavListGroupProps, type NavListItemProps, type NavListLeadingVisualProps, type NavListProps, type NavListSubNavProps, type NavListTrailingVisualProps, type ObjectPaths, PageHeader, type ActionsProps as PageHeaderActionsProps, type PageHeaderProps, type TitleProps as PageHeaderTitleProps, ScrollableRegion, type ScrollableRegionProps, SelectPanel, type SelectPanelMessageProps, type SelectPanelProps, type SelectPanelSecondaryActionProps, SkeletonAvatar, type SkeletonAvatarProps, SkeletonBox, type SkeletonBoxProps, SkeletonText, type SkeletonTextProps, SlotConfig, Stack, type StackItemProps, type StackProps, type TabListProps, type TabPanelProps, type TabProps, Table, type TableActionsProps, type TableBodyProps, type TableCellProps, type TableContainerProps, type TableGroupProps, type TableHeadProps, type TableHeaderProps, type TableProps, type TableRowProps, type TableSubtitleProps, type TableTitleProps, Tabs, type TabsProps, type TitleProps, Tooltip, type TooltipProps, TopicTag, type TopicTagGroupProps, type TopicTagProps, _default as UnderlinePanels, type PanelProps as UnderlinePanelsPanelProps, type UnderlinePanelsProps, type TabProps$1 as UnderlinePanelsTabProps, type UniqueRow, createColumnHelper, getAccessibleKeybindingHintString, useFeatureFlag, useOverflow, useSlots, useTab, useTabList, useTabPanel };

package/dist/hooks/useOverflow.js

@@ -10,10 +10,7 @@ function useOverflow(ref) {
 		t0 = () => {
 			if (ref.current === null) return;
 			const observer = new ResizeObserver((entries) => {
-				for (const entry of entries) if (entry.target.scrollHeight > entry.target.clientHeight || entry.target.scrollWidth > entry.target.clientWidth) {
-					setHasOverflow(true);
-					break;
-				}
+				setHasOverflow(entries.some(_temp));
 			});
 			observer.observe(ref.current);
 			return () => {
@@ -31,5 +28,8 @@ function useOverflow(ref) {
 	useEffect(t0, t1);
 	return hasOverflow;
 }
+function _temp(entry) {
+	return entry.target.scrollHeight > entry.target.clientHeight || entry.target.scrollWidth > entry.target.clientWidth;
+}
 //#endregion
 export { useOverflow };

package/generated/components.json

@@ -2736,6 +2736,10 @@
         {
           "id": "experimental-components-datatable-features--with-pagination",
           "code": "() => {\n  const pageSize = 10\n  const [pageIndex, setPageIndex] = React.useState(0)\n  const start = pageIndex * pageSize\n  const end = start + pageSize\n  const rows = repos.slice(start, end)\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id=\"repositories\">\n        Repositories\n      </Table.Title>\n      <Table.Subtitle as=\"p\" id=\"repositories-subtitle\">\n        A subtitle could appear here to give extra context to the data.\n      </Table.Subtitle>\n      <DataTable\n        aria-labelledby=\"repositories\"\n        aria-describedby=\"repositories-subtitle\"\n        data={rows}\n        columns={[\n          {\n            header: 'Repository',\n            field: 'name',\n            rowHeader: true,\n          },\n          {\n            header: 'Type',\n            field: 'type',\n            renderCell: (row) => {\n              return <Label>{uppercase(row.type)}</Label>\n            },\n          },\n          {\n            header: 'Updated',\n            field: 'updatedAt',\n            renderCell: (row) => {\n              return <RelativeTime date={new Date(row.updatedAt)} />\n            },\n          },\n          {\n            header: 'Dependabot',\n            field: 'securityFeatures.dependabot',\n            renderCell: (row) => {\n              return row.securityFeatures.dependabot.length > 0 ? (\n                <LabelGroup>\n                  {row.securityFeatures.dependabot.map((feature) => {\n                    return <Label key={feature}>{uppercase(feature)}</Label>\n                  })}\n                </LabelGroup>\n              ) : null\n            },\n          },\n          {\n            header: 'Code scanning',\n            field: 'securityFeatures.codeScanning',\n            renderCell: (row) => {\n              return row.securityFeatures.codeScanning.length > 0 ? (\n                <LabelGroup>\n                  {row.securityFeatures.codeScanning.map((feature) => {\n                    return <Label key={feature}>{uppercase(feature)}</Label>\n                  })}\n                </LabelGroup>\n              ) : null\n            },\n          },\n        ]}\n      />\n      <Table.Pagination\n        aria-label=\"Pagination for Repositories\"\n        pageSize={pageSize}\n        totalCount={repos.length}\n        onChange={({ pageIndex }) => {\n          setPageIndex(pageIndex)\n        }}\n      />\n    </Table.Container>\n  )\n}"
+        },
+        {
+          "id": "experimental-components-datatable-features--with-groups",
+          "code": "() => (\n  <Table.Container>\n    <Table.Title as=\"h2\" id=\"repositories-by-visibility\">\n      Repositories by visibility\n    </Table.Title>\n    <Table\n      aria-labelledby=\"repositories-by-visibility\"\n      gridTemplateColumns=\"minmax(0, 1fr) auto\"\n    >\n      <Table.Head>\n        <Table.Row>\n          <Table.Header id={groupedColumnHeaderIds[0]}>Name</Table.Header>\n          <Table.Header id={groupedColumnHeaderIds[1]}>Updated</Table.Header>\n        </Table.Row>\n      </Table.Head>\n      {repoGroups.map((group) => (\n        <Table.Group\n          key={group.id}\n          id={group.id}\n          label={group.label}\n          rowCount={group.repos.length}\n          colSpan={groupedColumnHeaderIds.length}\n        >\n          {group.repos.map((repo) => (\n            <Table.Row key={repo.id}>\n              <Table.Cell scope=\"row\" headers={groupedColumnHeaderIds[0]}>\n                {repo.name}\n              </Table.Cell>\n              <Table.Cell headers={groupedColumnHeaderIds[1]}>\n                <RelativeTime date={new Date(repo.updatedAt)} />\n              </Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Group>\n      ))}\n    </Table>\n  </Table.Container>\n)"
         }
       ],
       "importPath": "@primer/react/experimental",
@@ -2860,6 +2864,41 @@
             }
           ]
         },
+        {
+          "name": "Table.Group",
+          "props": [
+            {
+              "name": "id",
+              "type": "string | number",
+              "description": "A stable identifier exposed on both group sections as `data-group-id`. The group header's DOM id is generated separately so it is safe for use in `headers`."
+            },
+            {
+              "name": "label",
+              "type": "string",
+              "description": "The visible label for the group, shown in the group header and included in its accessible name along with the row count."
+            },
+            {
+              "name": "rowCount",
+              "type": "number",
+              "description": "The number of member rows in the group. Combined with `label` to build the group header's accessible name, for example \"Admins, 2 rows\"."
+            },
+            {
+              "name": "aria-label",
+              "type": "string",
+              "description": "Override the group header's accessible name, for example to localize its row count description."
+            },
+            {
+              "name": "colSpan",
+              "type": "number",
+              "description": "The number of columns spanned by the group header."
+            },
+            {
+              "name": "children",
+              "type": "React.ReactNode",
+              "description": "The group's member rows, typically a list of `Table.Row` elements. When composing a grouped table directly, use each `Table.Cell`'s native `headers` prop to reference the corresponding `Table.Header` id. The group header association is added automatically."
+            }
+          ]
+        },
         {
           "name": "Table.Row",
           "props": [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.38.0",
+  "version": "38.39.0-rc.052483c40",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -108,12 +108,12 @@
     "@primer/doc-gen": "^0.0.1",
     "@primer/react-compiler-check": "^0.0.0",
     "@rolldown/plugin-babel": "^0.2.3",
-    "@storybook/addon-a11y": "10.5.8",
-    "@storybook/addon-docs": "10.5.8",
-    "@storybook/addon-links": "10.5.8",
+    "@storybook/addon-a11y": "10.5.10",
+    "@storybook/addon-docs": "10.5.10",
+    "@storybook/addon-links": "10.5.10",
     "@storybook/addon-mcp": "^0.7.0",
     "@storybook/icons": "^2.1.0",
-    "@storybook/react-vite": "10.5.8",
+    "@storybook/react-vite": "10.5.10",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^16.3.0",
@@ -166,11 +166,11 @@
     "react-is": "18.3.1",
     "recast": "0.23.7",
     "rimraf": "5.0.5",
-    "rolldown": "^1.2.5",
+    "rolldown": "^1.2.6",
     "rolldown-plugin-dts": "^0.26.0",
     "rolldown-plugin-import-css": "^0.0.0",
     "rolldown-plugin-preserve-directives": "^0.0.0",
-    "storybook": "10.5.8",
+    "storybook": "10.5.10",
     "terser": "5.36.0",
     "ts-toolbelt": "9.6.0",
     "tsx": "4.20.3",

package/dist/DataTable/Table-7f5cb3e4.css

@@ -1,2 +0,0 @@
-.prc-DataTable-TableContainer-hn0p3{column-gap:var(--base-size-8,.5rem);display:grid;grid-template-areas:"title actions" "divider divider" "subtitle subtitle" "filter filter" "table table" "footer footer";grid-template-columns:1fr 1fr}.prc-DataTable-TableTitle-nM43N{align-self:center;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600);grid-area:title;line-height:20px}.prc-DataTable-TableSubtitle--L6Ho,.prc-DataTable-TableTitle-nM43N{color:var(--fgColor-default,#1f2328);margin:0}.prc-DataTable-TableSubtitle--L6Ho{font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);grid-area:subtitle;line-height:var(--text-title-lineHeight-small,1.5)}.prc-DataTable-TableActions-fkc2b{align-items:center;column-gap:var(--base-size-8,.5rem);display:flex;grid-area:actions;justify-self:end}.prc-DataTable-TableDivider-TRc3b{background-color:var(--borderColor-default,#d1d9e0);grid-area:divider;height:1px;margin-block-end:var(--base-size-8,.5rem);margin-block-start:var(--base-size-16,1rem);width:100%}.prc-DataTable-TableActions-fkc2b+.prc-DataTable-TableOverflowWrapper-bSqT-,.prc-DataTable-TableSubtitle--L6Ho+.prc-DataTable-TableOverflowWrapper-bSqT-,.prc-DataTable-TableTitle-nM43N+.prc-DataTable-TableOverflowWrapper-bSqT-{margin-block-start:var(--base-size-8,.5rem)}.prc-DataTable-Table-7ux1n,.prc-DataTable-TableOverflowWrapper-bSqT-{grid-area:table}.prc-DataTable-Table-7ux1n{--table-border-radius:0.375rem;--table-cell-padding:var(--cell-padding-block,0.5rem) var(--cell-padding-inline,0.75rem);--table-font-size:0.75rem;background-color:var(--bgColor-default,#fff);border-collapse:separate;border-spacing:0;display:grid;font-size:var(--table-font-size);grid-template-columns:var(--grid-template-columns);line-height:1.66667;width:100%}.prc-DataTable-Table-7ux1n:where([data-cell-padding=condensed]){--cell-padding-block:0.25rem;--cell-padding-inline:0.5rem}.prc-DataTable-Table-7ux1n:where([data-cell-padding=normal]){--cell-padding-block:0.5rem;--cell-padding-inline:0.75rem}.prc-DataTable-Table-7ux1n:where([data-cell-padding=spacious]){--cell-padding-block:0.75rem;--cell-padding-inline:1rem}.prc-DataTable-TableCell-Fk4ve:first-child,.prc-DataTable-TableHeader-eyTab:first-child{border-inline-start:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0)}.prc-DataTable-TableCell-Fk4ve:last-child,.prc-DataTable-TableHeader-eyTab:last-child{border-inline-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0)}.prc-DataTable-TableCell-Fk4ve,.prc-DataTable-TableHeader-eyTab{align-items:center;border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);display:flex;padding:var(--table-cell-padding);text-align:start}.prc-DataTable-TableCell-Fk4ve:where([data-cell-align=end]),.prc-DataTable-TableHeader-eyTab:where([data-cell-align=end]){display:flex;justify-content:flex-end;text-align:end}.prc-DataTable-TableHeader-eyTab[data-cell-align=end] .prc-DataTable-TableSortButton--aq0y{display:flex;flex-direction:row-reverse}.prc-DataTable-TableHead-4FaBf .prc-DataTable-TableRow-Icc7F:first-of-type .prc-DataTable-TableHeader-eyTab{border-block-start:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0)}.prc-DataTable-TableHead-4FaBf .prc-DataTable-TableRow-Icc7F:first-of-type .prc-DataTable-TableHeader-eyTab:first-child{border-top-left-radius:var(--table-border-radius)}.prc-DataTable-TableHead-4FaBf .prc-DataTable-TableRow-Icc7F:first-of-type .prc-DataTable-TableHeader-eyTab:last-child{border-top-right-radius:var(--table-border-radius)}.prc-DataTable-TableOverflowWrapper-bSqT-:last-child .prc-DataTable-Table-7ux1n .prc-DataTable-TableBody-QKQy2 .prc-DataTable-TableRow-Icc7F:last-of-type .prc-DataTable-TableCell-Fk4ve:first-child{border-bottom-left-radius:var(--table-border-radius)}.prc-DataTable-TableOverflowWrapper-bSqT-:last-child .prc-DataTable-Table-7ux1n .prc-DataTable-TableBody-QKQy2 .prc-DataTable-TableRow-Icc7F:last-of-type .prc-DataTable-TableCell-Fk4ve:last-child{border-bottom-right-radius:var(--table-border-radius)}.prc-DataTable-TableRow-Icc7F>:first-child .prc-DataTable-TableCellSkeletonItem-bGhwZ,.prc-DataTable-TableRow-Icc7F>:first-child:not(.prc-DataTable-TableCellSkeleton-DMdM5){padding-inline-start:var(--base-size-16,1rem)}.prc-DataTable-TableRow-Icc7F>:last-child .prc-DataTable-TableCellSkeletonItem-bGhwZ,.prc-DataTable-TableRow-Icc7F>:last-child:not(.prc-DataTable-TableCellSkeleton-DMdM5){padding-inline-end:var(--base-size-16,1rem)}.prc-DataTable-TableHeader-eyTab{background-color:var(--bgColor-muted,#f6f8fa);border-block-start:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);color:var(--fgColor-muted,#59636e);font-weight:var(--base-text-weight-semibold,600)}.prc-DataTable-TableHeader-eyTab:where([aria-sort=ascending]),.prc-DataTable-TableHeader-eyTab:where([aria-sort=descending]){color:var(--fgColor-default,#1f2328)}.prc-DataTable-TableSortIcon-wHvJw{visibility:hidden}.prc-DataTable-TableHeader-eyTab .prc-DataTable-TableSortButton--aq0y:focus .prc-DataTable-TableSortIcon--ascending-Lpx6z,.prc-DataTable-TableHeader-eyTab:hover .prc-DataTable-TableSortIcon--ascending-Lpx6z,.prc-DataTable-TableHeader-eyTab[aria-sort=ascending] .prc-DataTable-TableSortIcon--ascending-Lpx6z,.prc-DataTable-TableHeader-eyTab[aria-sort=descending] .prc-DataTable-TableSortIcon--descending-hHJGo{visibility:visible}.prc-DataTable-TableRow-Icc7F:hover .prc-DataTable-TableCell-Fk4ve:not(.prc-DataTable-TableCellSkeleton-DMdM5){background-color:var(--control-transparent-bgColor-hover,#818b981a)}.prc-DataTable-TableCell-Fk4ve:where([scope=row]){align-items:center;color:var(--fgColor-default,#1f2328);display:flex;font-weight:var(--base-text-weight-semibold,600)}.prc-DataTable-TableCellSkeleton-DMdM5{padding:0}.prc-DataTable-TableCellSkeletonItems-Ljhq5{display:flex;flex-direction:column;width:100%}.prc-DataTable-TableCellSkeletonItem-bGhwZ{padding:var(--table-cell-padding)}.prc-DataTable-TableCellSkeletonItem-bGhwZ:nth-of-type(5n+1){--skeleton-item-width:85%}.prc-DataTable-TableCellSkeletonItem-bGhwZ:nth-of-type(5n+2){--skeleton-item-width:67.5%}.prc-DataTable-TableCellSkeletonItem-bGhwZ:nth-of-type(5n+3){--skeleton-item-width:80%}.prc-DataTable-TableCellSkeletonItem-bGhwZ:nth-of-type(5n+4){--skeleton-item-width:60%}.prc-DataTable-TableCellSkeletonItem-bGhwZ:nth-of-type(5n+5){--skeleton-item-width:75%}.prc-DataTable-TableCellSkeletonItem-bGhwZ [data-component=SkeletonText]{width:var(--skeleton-item-width)}.prc-DataTable-TableCellSkeletonItem-bGhwZ:not(:last-of-type){border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0)}.prc-DataTable-TableSortButton--aq0y{column-gap:.5rem}.prc-DataTable-TableBody-QKQy2,.prc-DataTable-TableHead-4FaBf,.prc-DataTable-TableRow-Icc7F{display:contents}@supports (grid-template-columns:subgrid){.prc-DataTable-TableBody-QKQy2,.prc-DataTable-TableHead-4FaBf,.prc-DataTable-TableRow-Icc7F{display:grid;grid-column:-1/1;grid-template-columns:subgrid}}.prc-DataTable-PlaceholderText-8bHo7{color:var(--fgColor-muted,#59636e)}
-/*# sourceMappingURL=Table-7f5cb3e4.css.map */

package/dist/DataTable/Table-7f5cb3e4.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/DataTable/Table.module.css.js"],"names":[],"mappings":"AACA,oCAUE,mCAA8B,CAT9B,YAAa,CAEb,uHAMiB,CAPjB,6BASF,CAGA,gCAQE,iBAAkB,CANlB,8CAAuC,CACvC,gDAA6C,CAI7C,eAAgB,CAFhB,gBAIF,CAGA,mEANE,oCAA6B,CAL7B,QAkBF,CAPA,mCAEE,4CAAsC,CACtC,8CAA2C,CAG3C,kBAAmB,CAFnB,kDAGF,CAGA,kCAGE,kBAAmB,CADnB,mCAA8B,CAD9B,YAAa,CAGb,iBAAkB,CAClB,gBACF,CAGA,kCAIE,mDAA4C,CAC5C,iBAAkB,CAHlB,UAAW,CAKX,yCAAoC,CADpC,2CAAuC,CALvC,UAOF,CAGA,mOAGE,2CACF,CAOA,qEAJE,eAsCF,CAlCA,2BAEE,8BAA+B,CAC/B,wFAA2F,CAC3F,yBAA0B,CAW1B,4CAAwC,CADxC,wBAAyB,CAFzB,gBAAiB,CANjB,YAAa,CAGb,gCAAiC,CAQjC,kDAAmD,CANnD,mBAA0B,CAJ1B,UA2BF,CAdE,gEACE,4BAA6B,CAC7B,4BACF,CAEA,6DACE,2BAA4B,CAC5B,6BACF,CAEA,+DACE,4BAA6B,CAC7B,0BACF,CAIF,wFAEE,6FACF,CAEA,sFAEE,2FACF,CAEA,gEAME,kBAAmB,CACnB,0FAA0E,CAL1E,YAAa,CAEb,iCAAkC,CAClC,gBAGF,CAEA,0HAEE,YAAa,CAEb,wBAAyB,CADzB,cAEF,CAEA,2FACE,YAAa,CACb,0BACF,CAEA,4GACE,4FACF,CAIA,wHAEE,iDACF,CAGA,uHAEE,kDACF,CAGA,qMAEE,oDACF,CAGA,oMAEE,qDACF,CAMA,6KAEE,6CACF,CAEA,2KAEE,2CACF,CAGA,iCAGE,6CAAsC,CACtC,4FAA4E,CAF5E,kCAA2B,CAD3B,gDAIF,CAEA,6HAEE,oCACF,CAGA,mCACE,iBACF,CASA,yZAEE,kBACF,CAGA,+GACE,mEACF,CAGA,kDAIE,kBAAmB,CADnB,oCAA6B,CAF7B,YAAa,CACb,gDAGF,CAGA,uCACE,SACF,CAEA,4CACE,YAAa,CAEb,qBAAsB,CADtB,UAEF,CAEA,2CAEE,iCAqBF,CAnBE,6DACE,yBACF,CAEA,6DACE,2BACF,CAEA,6DACE,yBACF,CAEA,6DACE,yBACF,CAEA,6DACE,yBACF,CAGF,yEACE,gCACF,CAEA,8DACE,0FACF,CAEA,qCACE,gBACF,CAGA,4FAGE,gBACF,CAEA,0CACE,4FAGE,YAAa,CAEb,gBAAkB,CADlB,6BAEF,CACF,CAEA,qCACE,kCACF","file":"Table-7f5cb3e4.css","sourcesContent":["/* Container ---------------------------------------------------------------- */\n.TableContainer {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-areas:\n    'title actions'\n    'divider divider'\n    'subtitle subtitle'\n    'filter filter'\n    'table table'\n    'footer footer';\n  column-gap: var(--base-size-8);\n}\n\n/* TableTitle */\n.TableTitle {\n  margin: 0;\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-semibold);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 20px;\n  color: var(--fgColor-default);\n  grid-area: title;\n  align-self: center;\n}\n\n/* TableSubtitle */\n.TableSubtitle {\n  margin: 0;\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-title-lineHeight-small);\n  color: var(--fgColor-default);\n  grid-area: subtitle;\n}\n\n/* TableActions */\n.TableActions {\n  display: flex;\n  column-gap: var(--base-size-8);\n  align-items: center;\n  grid-area: actions;\n  justify-self: end;\n}\n\n/* TableDivider */\n.TableDivider {\n  width: 100%;\n  height: 1px;\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--borderColor-default);\n  grid-area: divider;\n  margin-block-start: var(--base-size-16);\n  margin-block-end: var(--base-size-8);\n}\n\n/* Spacing before the table */\n.TableTitle + .TableOverflowWrapper,\n.TableSubtitle + .TableOverflowWrapper,\n.TableActions + .TableOverflowWrapper {\n  margin-block-start: var(--base-size-8);\n}\n\n.TableOverflowWrapper {\n  grid-area: table;\n}\n\n/* Table -------------------------------------------------------------------- */\n.Table {\n  /* Default table styles */\n  --table-border-radius: 0.375rem;\n  --table-cell-padding: var(--cell-padding-block, 0.5rem) var(--cell-padding-inline, 0.75rem);\n  --table-font-size: 0.75rem;\n\n  display: grid;\n  width: 100%;\n  /* stylelint-disable-next-line primer/typography */\n  font-size: var(--table-font-size);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: calc(20 / 12);\n  border-spacing: 0;\n  /* stylelint-disable-next-line primer/borders */\n  border-collapse: separate;\n  background-color: var(--bgColor-default);\n  grid-area: table;\n  grid-template-columns: var(--grid-template-columns);\n\n  /* Density modes: condensed, normal, spacious */\n  &:where([data-cell-padding='condensed']) {\n    --cell-padding-block: 0.25rem;\n    --cell-padding-inline: 0.5rem;\n  }\n\n  &:where([data-cell-padding='normal']) {\n    --cell-padding-block: 0.5rem;\n    --cell-padding-inline: 0.75rem;\n  }\n\n  &:where([data-cell-padding='spacious']) {\n    --cell-padding-block: 0.75rem;\n    --cell-padding-inline: 1rem;\n  }\n}\n\n/* Borders */\n.TableCell:first-child,\n.TableHeader:first-child {\n  border-inline-start: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableCell:last-child,\n.TableHeader:last-child {\n  border-inline-end: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableHeader,\n.TableCell {\n  display: flex;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--table-cell-padding);\n  text-align: start;\n  align-items: center;\n  border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableHeader:where([data-cell-align='end']),\n.TableCell:where([data-cell-align='end']) {\n  display: flex;\n  text-align: end;\n  justify-content: flex-end;\n}\n\n.TableHeader[data-cell-align='end'] .TableSortButton {\n  display: flex;\n  flex-direction: row-reverse;\n}\n\n.TableHead .TableRow:first-of-type .TableHeader {\n  border-block-start: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n/* Border radius */\n/* stylelint-disable-next-line selector-max-specificity */\n.TableHead .TableRow:first-of-type .TableHeader:first-child {\n  /* stylelint-disable-next-line primer/borders */\n  border-top-left-radius: var(--table-border-radius);\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.TableHead .TableRow:first-of-type .TableHeader:last-child {\n  /* stylelint-disable-next-line primer/borders */\n  border-top-right-radius: var(--table-border-radius);\n}\n\n/* stylelint-disable-next-line selector-max-compound-selectors,selector-max-specificity */\n.TableOverflowWrapper:last-child .Table .TableBody .TableRow:last-of-type .TableCell:first-child {\n  /* stylelint-disable-next-line primer/borders */\n  border-bottom-left-radius: var(--table-border-radius);\n}\n\n/* stylelint-disable-next-line selector-max-compound-selectors,selector-max-specificity */\n.TableOverflowWrapper:last-child .Table .TableBody .TableRow:last-of-type .TableCell:last-child {\n  /* stylelint-disable-next-line primer/borders */\n  border-bottom-right-radius: var(--table-border-radius);\n}\n\n/**\n * Offset padding to make sure type aligns regardless of cell padding\n * selection\n */\n.TableRow > *:first-child:not(.TableCellSkeleton),\n.TableRow > *:first-child .TableCellSkeletonItem {\n  padding-inline-start: var(--base-size-16);\n}\n\n.TableRow > *:last-child:not(.TableCellSkeleton),\n.TableRow > *:last-child .TableCellSkeletonItem {\n  padding-inline-end: var(--base-size-16);\n}\n\n/* TableHeader */\n.TableHeader {\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-muted);\n  background-color: var(--bgColor-muted);\n  border-block-start: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableHeader:where([aria-sort='descending']),\n.TableHeader:where([aria-sort='ascending']) {\n  color: var(--fgColor-default);\n}\n\n/* Control visibility of sort icons */\n.TableSortIcon {\n  visibility: hidden;\n}\n\n/* The ASC icon is visible if the header is sortable and is hovered or focused */\n.TableHeader:hover .TableSortIcon--ascending,\n.TableHeader .TableSortButton:focus .TableSortIcon--ascending {\n  visibility: visible;\n}\n\n/* Each sort icon is visible if the TableHeader is currently in the corresponding sort state */\n.TableHeader[aria-sort='ascending'] .TableSortIcon--ascending,\n.TableHeader[aria-sort='descending'] .TableSortIcon--descending {\n  visibility: visible;\n}\n\n/* TableRow */\n.TableRow:hover .TableCell:not(.TableCellSkeleton) {\n  background-color: var(--control-transparent-bgColor-hover);\n}\n\n/* TableCell */\n.TableCell:where([scope='row']) {\n  display: flex;\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-default);\n  align-items: center;\n}\n\n/* TableCellSkeleton */\n.TableCellSkeleton {\n  padding: 0;\n}\n\n.TableCellSkeletonItems {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n}\n\n.TableCellSkeletonItem {\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--table-cell-padding);\n\n  &:nth-of-type(5n + 1) {\n    --skeleton-item-width: 85%;\n  }\n\n  &:nth-of-type(5n + 2) {\n    --skeleton-item-width: 67.5%;\n  }\n\n  &:nth-of-type(5n + 3) {\n    --skeleton-item-width: 80%;\n  }\n\n  &:nth-of-type(5n + 4) {\n    --skeleton-item-width: 60%;\n  }\n\n  &:nth-of-type(5n + 5) {\n    --skeleton-item-width: 75%;\n  }\n}\n\n.TableCellSkeletonItem [data-component='SkeletonText'] {\n  width: var(--skeleton-item-width);\n}\n\n.TableCellSkeletonItem:not(:last-of-type) {\n  border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableSortButton {\n  column-gap: 0.5rem;\n}\n\n/* Grid layout */\n.TableHead,\n.TableBody,\n.TableRow {\n  display: contents;\n}\n\n@supports (grid-template-columns: subgrid) {\n  .TableHead,\n  .TableBody,\n  .TableRow {\n    display: grid;\n    grid-template-columns: subgrid;\n    grid-column: -1 /1;\n  }\n}\n\n.PlaceholderText {\n  color: var(--fgColor-muted);\n}\n"]}