@primer/react 38.41.0 → 38.42.0-rc.29d77833a

package/generated/components.json

@@ -832,6 +832,12 @@
               "defaultValue": "",
               "description": "Callback that is called when the position of the overlay changes"
             },
+            {
+              "name": "preventFocusOnClose",
+              "type": "boolean",
+              "defaultValue": "false",
+              "description": "If true, focus will not be returned to the anchor or returnFocusRef when the menu closes. Consumers must manage focus themselves."
+            },
             {
               "name": "data-test-id",
               "type": "unknown",
@@ -2759,7 +2765,23 @@
         },
         {
           "id": "experimental-components-datatable-features--with-groups",
-          "code": "() => {\n  const titleId = React.useId()\n  const [pageIndex, setPageIndex] = React.useState(0)\n  const pageSize = 10\n  const allRows = paginationData.flatMap((item) =>\n    'rows' in item ? item.rows : [item],\n  )\n  const pageRows = new Set(\n    allRows\n      .slice(pageIndex * pageSize, (pageIndex + 1) * pageSize)\n      .map((row) => row.id),\n  )\n  // Count data rows, not headings, and preserve each item's position and group membership.\n  const data = paginationData.flatMap(\n    (item): DataTableData<PaginatedRepository> => {\n      if ('rows' in item) {\n        const rows = item.rows.filter((row) => pageRows.has(row.id))\n        return rows.length > 0\n          ? [\n              {\n                ...item,\n                rows,\n              },\n            ]\n          : []\n      }\n      return pageRows.has(item.id) ? [item] : []\n    },\n  )\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id={titleId}>\n        Paginated repositories by visibility\n      </Table.Title>\n      <DataTable\n        aria-labelledby={titleId}\n        data={data}\n        columns={[\n          {\n            header: 'Name',\n            field: 'name',\n            rowHeader: true,\n            sortBy: true,\n          },\n          {\n            header: 'Visibility',\n            field: 'visibility',\n          },\n        ]}\n      />\n      <Table.Pagination\n        aria-label=\"Pagination for grouped repositories\"\n        pageSize={pageSize}\n        totalCount={allRows.length}\n        onChange={({ pageIndex }) => setPageIndex(pageIndex)}\n      />\n    </Table.Container>\n  )\n}"
+          "code": "() => {\n  const titleId = React.useId()\n  const [pageIndex, setPageIndex] = React.useState(0)\n  const pageSize = 10\n  const allRows = paginationData.flatMap((item) =>\n    'rows' in item ? item.rows : [item],\n  )\n  const pageRows = new Set(\n    allRows\n      .slice(pageIndex * pageSize, (pageIndex + 1) * pageSize)\n      .map((row) => row.id),\n  )\n  const data = getPageData(paginationData, pageRows)\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id={titleId}>\n        Paginated repositories by visibility\n      </Table.Title>\n      <DataTable\n        aria-labelledby={titleId}\n        data={data}\n        columns={[\n          {\n            header: 'Name',\n            field: 'name',\n            rowHeader: true,\n            sortBy: true,\n          },\n          {\n            header: 'Visibility',\n            field: 'visibility',\n          },\n        ]}\n      />\n      <Table.Pagination\n        aria-label=\"Pagination for grouped repositories\"\n        pageSize={pageSize}\n        totalCount={allRows.length}\n        onChange={({ pageIndex }) => setPageIndex(pageIndex)}\n      />\n    </Table.Container>\n  )\n}"
+        },
+        {
+          "id": "experimental-components-datatable-features--with-row-selection",
+          "code": "() => {\n  const [selectedRows, setSelectedRows] = React.useState<\n    ReadonlySet<DataTableRowId>\n  >(() => new Set([2]))\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id=\"selectable-repositories\">\n        Selectable repositories\n      </Table.Title>\n      <DataTable\n        aria-labelledby=\"selectable-repositories\"\n        data={data}\n        columns={groupedColumns}\n        rowSelection\n        selectedRows={selectedRows}\n        onSelectionChange={({ selectedRows: nextSelectedRows }) => {\n          setSelectedRows(nextSelectedRows)\n        }}\n      />\n    </Table.Container>\n  )\n}"
+        },
+        {
+          "id": "experimental-components-datatable-features--with-grouped-row-selection",
+          "code": "() => {\n  const [selectedRows, setSelectedRows] = React.useState<\n    ReadonlySet<DataTableRowId>\n  >(() => new Set())\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id=\"selectable-repositories-by-visibility\">\n        Selectable repositories by visibility\n      </Table.Title>\n      <DataTable\n        aria-labelledby=\"selectable-repositories-by-visibility\"\n        data={repoGroupsWithDisabledRow}\n        columns={groupedColumns}\n        rowSelection\n        selectedRows={selectedRows}\n        isRowSelectable={(repo) => repo.id !== 1}\n        onSelectionChange={({ selectedRows: nextSelectedRows }) => {\n          setSelectedRows(nextSelectedRows)\n        }}\n      />\n    </Table.Container>\n  )\n}"
+        },
+        {
+          "id": "experimental-components-datatable-features--with-standalone-and-grouped-row-selection",
+          "code": "() => {\n  const [selectedRows, setSelectedRows] = React.useState<\n    ReadonlySet<DataTableRowId>\n  >(() => new Set())\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id=\"selectable-mixed-repositories\">\n        Selectable standalone and grouped repositories\n      </Table.Title>\n      <DataTable\n        aria-labelledby=\"selectable-mixed-repositories\"\n        data={[\n          ...data.filter((repo) => repo.type === 'internal'),\n          repoGroups[1],\n        ]}\n        columns={sortableGroupedColumns}\n        rowSelection\n        selectedRows={selectedRows}\n        onSelectionChange={({ selectedRows: nextSelectedRows }) => {\n          setSelectedRows(nextSelectedRows)\n        }}\n      />\n    </Table.Container>\n  )\n}"
+        },
+        {
+          "id": "experimental-components-datatable-features--with-paginated-row-selection",
+          "code": "() => {\n  const titleId = React.useId()\n  const [pageIndex, setPageIndex] = React.useState(0)\n  const [selectedRows, setSelectedRows] = React.useState<\n    ReadonlySet<DataTableRowId>\n  >(() => new Set())\n  const pageSize = 10\n  const allRows = paginationData.flatMap((item) =>\n    'rows' in item ? item.rows : [item],\n  )\n  const pageRows = new Set(\n    allRows\n      .slice(pageIndex * pageSize, (pageIndex + 1) * pageSize)\n      .map((row) => row.id),\n  )\n  const data = getPageData(paginationData, pageRows)\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id={titleId}>\n        Selectable paginated repositories\n      </Table.Title>\n      <DataTable\n        aria-labelledby={titleId}\n        data={data}\n        columns={[\n          {\n            header: 'Name',\n            field: 'name',\n            rowHeader: true,\n          },\n          {\n            header: 'Visibility',\n            field: 'visibility',\n          },\n        ]}\n        rowSelection\n        selectedRows={selectedRows}\n        onSelectionChange={({ selectedRows }) => setSelectedRows(selectedRows)}\n      />\n      <Table.Pagination\n        aria-label=\"Pagination for selectable repositories\"\n        pageSize={pageSize}\n        totalCount={allRows.length}\n        onChange={({ pageIndex }) => {\n          setPageIndex(pageIndex)\n          // Selection applies only to the current page.\n          setSelectedRows(new Set())\n        }}\n      />\n    </Table.Container>\n  )\n}"
         },
         {
           "id": "experimental-components-datatable-features--with-sortable-groups",
@@ -2767,7 +2789,11 @@
         },
         {
           "id": "experimental-components-table-features--with-groups",
-          "code": "() => {\n  const titleId = React.useId()\n  const [pageIndex, setPageIndex] = React.useState(0)\n  const pageSize = 10\n  const allRows = paginationData.flatMap((item) =>\n    'rows' in item ? item.rows : [item],\n  )\n  const pageRows = new Set(\n    allRows\n      .slice(pageIndex * pageSize, (pageIndex + 1) * pageSize)\n      .map((row) => row.id),\n  )\n  // Count data rows, not headings, and preserve each item's position and group membership.\n  const data = paginationData.flatMap(\n    (item): DataTableData<PaginatedRepository> => {\n      if ('rows' in item) {\n        const rows = item.rows.filter((row) => pageRows.has(row.id))\n        return rows.length > 0\n          ? [\n              {\n                ...item,\n                rows,\n              },\n            ]\n          : []\n      }\n      return pageRows.has(item.id) ? [item] : []\n    },\n  )\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id={titleId}>\n        Paginated repositories by visibility\n      </Table.Title>\n      <DataTable\n        aria-labelledby={titleId}\n        data={data}\n        columns={[\n          {\n            header: 'Name',\n            field: 'name',\n            rowHeader: true,\n            sortBy: true,\n          },\n          {\n            header: 'Visibility',\n            field: 'visibility',\n          },\n        ]}\n      />\n      <Table.Pagination\n        aria-label=\"Pagination for grouped repositories\"\n        pageSize={pageSize}\n        totalCount={allRows.length}\n        onChange={({ pageIndex }) => setPageIndex(pageIndex)}\n      />\n    </Table.Container>\n  )\n}"
+          "code": "() => {\n  const titleId = React.useId()\n  const [pageIndex, setPageIndex] = React.useState(0)\n  const pageSize = 10\n  const allRows = paginationData.flatMap((item) =>\n    'rows' in item ? item.rows : [item],\n  )\n  const pageRows = new Set(\n    allRows\n      .slice(pageIndex * pageSize, (pageIndex + 1) * pageSize)\n      .map((row) => row.id),\n  )\n  const data = getPageData(paginationData, pageRows)\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id={titleId}>\n        Paginated repositories by visibility\n      </Table.Title>\n      <DataTable\n        aria-labelledby={titleId}\n        data={data}\n        columns={[\n          {\n            header: 'Name',\n            field: 'name',\n            rowHeader: true,\n            sortBy: true,\n          },\n          {\n            header: 'Visibility',\n            field: 'visibility',\n          },\n        ]}\n      />\n      <Table.Pagination\n        aria-label=\"Pagination for grouped repositories\"\n        pageSize={pageSize}\n        totalCount={allRows.length}\n        onChange={({ pageIndex }) => setPageIndex(pageIndex)}\n      />\n    </Table.Container>\n  )\n}"
+        },
+        {
+          "id": "experimental-components-table-features--with-row-selection",
+          "code": "() => {\n  const [selectedRows, setSelectedRows] = React.useState<\n    ReadonlySet<DataTableRowId>\n  >(() => new Set([2]))\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id=\"selectable-repositories\">\n        Selectable repositories\n      </Table.Title>\n      <DataTable\n        aria-labelledby=\"selectable-repositories\"\n        data={data}\n        columns={groupedColumns}\n        rowSelection\n        selectedRows={selectedRows}\n        onSelectionChange={({ selectedRows: nextSelectedRows }) => {\n          setSelectedRows(nextSelectedRows)\n        }}\n      />\n    </Table.Container>\n  )\n}"
         }
       ],
       "importPath": "@primer/react/experimental",
@@ -2792,6 +2818,36 @@
           "type": "Array<Column<Data>>",
           "description": "Provide the columns for the table and the fields in `data` to which they correspond"
         },
+        {
+          "name": "getRowId",
+          "type": "(row: Data) => DataTableRowId",
+          "description": "Provide a stable row ID. Defaults to row.id. DataTableRowId is an exported string | number type."
+        },
+        {
+          "name": "rowSelection",
+          "type": "boolean",
+          "description": "Render row checkboxes and a select-all checkbox for the current page."
+        },
+        {
+          "name": "selectedRows",
+          "type": "ReadonlySet<DataTableRowId>",
+          "description": "Control selection using stable IDs from `getRowId`. Missing or non-selectable IDs stay stored but do not count as selected."
+        },
+        {
+          "name": "defaultSelectedRows",
+          "type": "ReadonlySet<DataTableRowId>",
+          "description": "Set the initial selection for an uncontrolled, static, single-page table."
+        },
+        {
+          "name": "onSelectionChange",
+          "type": "({ selectedRows }: { selectedRows: Set<DataTableRowId> }) => void",
+          "description": "Receive a new selection set when a checkbox is toggled. Data changes alone do not trigger this callback."
+        },
+        {
+          "name": "isRowSelectable",
+          "type": "(row: Data) => boolean",
+          "description": "Determine which rows can be selected and counted by select-all."
+        },
         {
           "name": "cellPadding",
           "type": "'condensed' | 'normal' | 'spacious'",
@@ -2952,6 +3008,80 @@
             }
           ]
         },
+        {
+          "name": "Table.SelectionHeader",
+          "props": [
+            {
+              "name": "selection",
+              "type": "'all' | 'some' | 'none'",
+              "required": true,
+              "description": "Whether all, some, or none of the selectable rows are selected."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "description": "Whether row selection is unavailable."
+            },
+            {
+              "name": "onToggleSelect",
+              "type": "() => void",
+              "description": "Request toggling selection for all selectable rows."
+            },
+            {
+              "name": "checkboxRef",
+              "type": "React.Ref<HTMLInputElement>",
+              "description": "Forward a ref to the native selection checkbox."
+            },
+            {
+              "name": "aria-label",
+              "type": "string",
+              "defaultValue": "'Select rows'",
+              "description": "Provide the selection checkbox's accessible name."
+            },
+            {
+              "name": "aria-description",
+              "type": "string",
+              "description": "Describe the select-all scope, for example \"Select all 10 rows\"."
+            }
+          ]
+        },
+        {
+          "name": "Table.RowSelection",
+          "props": [
+            {
+              "name": "selected",
+              "type": "boolean",
+              "required": true,
+              "description": "Whether the row is selected."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "description": "Whether the row cannot be selected."
+            },
+            {
+              "name": "onToggleSelect",
+              "type": "() => void",
+              "description": "Request toggling selection for the row."
+            },
+            {
+              "name": "checkboxRef",
+              "type": "React.Ref<HTMLInputElement>",
+              "description": "Forward a ref to the native row checkbox."
+            },
+            {
+              "name": "aria-label",
+              "type": "string",
+              "defaultValue": "'Select row'",
+              "description": "Name the row checkbox when `aria-labelledby` is not provided."
+            },
+            {
+              "name": "aria-labelledby",
+              "type": "string",
+              "description": "Reference the row header IDs. The checkbox name adds \"Select\" before their text."
+            }
+          ]
+        },
         {
           "name": "Table.Cell",
           "props": [
@@ -4615,6 +4745,12 @@
       ],
       "importPath": "@primer/react",
       "props": [
+        {
+          "name": "preventFocusOnClose",
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "If true, focus will not be returned to returnFocusRef when the Overlay is unmounted. Consumers must manage focus themselves."
+        },
         {
           "name": "returnFocusRef",
           "type": "React.RefObject<HTMLElement>",
@@ -7912,7 +8048,8 @@
           "name": "contrast",
           "type": "boolean",
           "defaultValue": "false",
-          "description": "Changes background color to a higher contrast color"
+          "deprecated": true,
+          "description": "Deprecated. Omit this prop to use the default background."
         },
         {
           "name": "size",
@@ -8262,7 +8399,8 @@
           "name": "contrast",
           "type": "boolean",
           "defaultValue": "false",
-          "description": "Changes background color to a higher contrast color"
+          "deprecated": true,
+          "description": "Deprecated. Omit this prop to use the default background."
         },
         {
           "name": "validationStatus",

package/generated/hooks.json

@@ -696,6 +696,12 @@
               "type": "boolean",
               "defaultValue": "false",
               "description": "If true, focus will not be set when the container is opened."
+            },
+            {
+              "name": "preventFocusOnClose",
+              "type": "boolean",
+              "defaultValue": "false",
+              "description": "If true, focus will not be returned to returnFocusRef when the hook is cleaned up. Consumers must manage focus themselves."
             }
           ]
         }
@@ -769,6 +775,12 @@
               "name": "preventFocusOnOpen",
               "type": "boolean",
               "description": "Flag to prevent focus on the overlay when it is opened."
+            },
+            {
+              "name": "preventFocusOnClose",
+              "type": "boolean",
+              "defaultValue": "false",
+              "description": "If true, focus will not be returned to returnFocusRef when the overlay is unmounted. Consumers must manage focus themselves."
             }
           ]
         }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.41.0",
+  "version": "38.42.0-rc.29d77833a",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -157,7 +157,7 @@
     "mdast-util-to-string": "4.0.0",
     "micromark-extension-frontmatter": "2.0.0",
     "micromark-extension-mdxjs": "3.0.0",
-    "oxc-transform-react": "^0.152.0",
+    "oxc-transform-react": "^0.153.0",
     "postcss-preset-primer": "^0.0.0",
     "publint": "^0.3.15",
     "react": "18.3.1",

package/dist/DataTable/Table-50e68700.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,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"]}