@trackunit/react-components 3.10.1 → 3.10.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/index.cjs.js +81 -36
  2. package/index.esm.js +81 -36
  3. package/package.json +1 -1
  4. package/src/components/SidebarContentLayout/SidebarContentLayout.variants.d.ts +11 -15
package/index.cjs.js CHANGED
@@ -12137,13 +12137,62 @@ const cvaSidebarChildContainer = cssClassVarianceUtilities.cva({
12137
12137
  base: ["apply", "flex", "overflow-hidden", "gap-2", "p-1", "max-w-full"],
12138
12138
  variants: {
12139
12139
  breakpoint: {
12140
- xs: ["xs:overflow-visible", "xs:p-0", "xs:grid", "xs:grid-cols-1", "xs:w-full"],
12141
- sm: ["sm:overflow-visible", "sm:p-0", "sm:grid", "sm:grid-cols-1", "sm:w-full"],
12142
- md: ["md:overflow-visible", "md:p-0", "md:grid", "md:grid-cols-1", "md:w-full"],
12143
- lg: ["lg:overflow-visible", "lg:p-0", "lg:grid", "lg:grid-cols-1", "lg:w-full"],
12144
- xl: ["xl:overflow-visible", "xl:p-0", "xl:grid", "xl:grid-cols-1", "xl:w-full"],
12145
- "2xl": ["2xl:overflow-visible", "2xl:p-0", "2xl:grid", "2xl:grid-cols-1", "2xl:w-full"],
12146
- "3xl": ["3xl:overflow-visible", "3xl:p-0", "3xl:grid", "3xl:grid-cols-1", "3xl:w-full"],
12140
+ xs: [
12141
+ "xs:overflow-visible",
12142
+ "xs:p-0",
12143
+ "xs:grid",
12144
+ "xs:grid-cols-1",
12145
+ "xs:w-full",
12146
+ "xs:[&_:focus-visible]:-outline-offset-2",
12147
+ ],
12148
+ sm: [
12149
+ "sm:overflow-visible",
12150
+ "sm:p-0",
12151
+ "sm:grid",
12152
+ "sm:grid-cols-1",
12153
+ "sm:w-full",
12154
+ "sm:[&_:focus-visible]:-outline-offset-2",
12155
+ ],
12156
+ md: [
12157
+ "md:overflow-visible",
12158
+ "md:p-0",
12159
+ "md:grid",
12160
+ "md:grid-cols-1",
12161
+ "md:w-full",
12162
+ "md:[&_:focus-visible]:-outline-offset-2",
12163
+ ],
12164
+ lg: [
12165
+ "lg:overflow-visible",
12166
+ "lg:p-0",
12167
+ "lg:grid",
12168
+ "lg:grid-cols-1",
12169
+ "lg:w-full",
12170
+ "lg:[&_:focus-visible]:-outline-offset-2",
12171
+ ],
12172
+ xl: [
12173
+ "xl:overflow-visible",
12174
+ "xl:p-0",
12175
+ "xl:grid",
12176
+ "xl:grid-cols-1",
12177
+ "xl:w-full",
12178
+ "xl:[&_:focus-visible]:-outline-offset-2",
12179
+ ],
12180
+ "2xl": [
12181
+ "2xl:overflow-visible",
12182
+ "2xl:p-0",
12183
+ "2xl:grid",
12184
+ "2xl:grid-cols-1",
12185
+ "2xl:w-full",
12186
+ "2xl:[&_:focus-visible]:-outline-offset-2",
12187
+ ],
12188
+ "3xl": [
12189
+ "3xl:overflow-visible",
12190
+ "3xl:p-0",
12191
+ "3xl:grid",
12192
+ "3xl:grid-cols-1",
12193
+ "3xl:w-full",
12194
+ "3xl:[&_:focus-visible]:-outline-offset-2",
12195
+ ],
12147
12196
  },
12148
12197
  },
12149
12198
  });
@@ -12346,13 +12395,13 @@ const cvaSidebarContentLayout = cssClassVarianceUtilities.cva({
12346
12395
  base: ["grid", "min-h-0", "flex-1", "grid-rows-[min-content_minmax(0px,1fr)]"],
12347
12396
  variants: {
12348
12397
  breakpoint: {
12349
- xs: ["grid-cols-1", "xs:grid-cols-[200px_minmax(0px,1fr)]", "xs:grid-rows-none"],
12350
- sm: ["grid-cols-1", "sm:grid-cols-[200px_minmax(0px,1fr)]", "sm:grid-rows-none"],
12351
- md: ["grid-cols-1", "md:grid-cols-[200px_minmax(0px,1fr)]", "md:grid-rows-none"],
12352
- lg: ["grid-cols-1", "lg:grid-cols-[200px_minmax(0px,1fr)]", "lg:grid-rows-none"],
12353
- xl: ["grid-cols-1", "xl:grid-cols-[200px_minmax(0px,1fr)]", "xl:grid-rows-none"],
12354
- "2xl": ["grid-cols-1", "2xl:grid-cols-[200px_minmax(0px,1fr)]", "2xl:grid-rows-none"],
12355
- "3xl": ["grid-cols-1", "3xl:grid-cols-[200px_minmax(0px,1fr)]", "3xl:grid-rows-none"],
12398
+ xs: ["grid-cols-1", "xs:grid-cols-[184px_minmax(0px,1fr)]", "xs:grid-rows-none"],
12399
+ sm: ["grid-cols-1", "sm:grid-cols-[184px_minmax(0px,1fr)]", "sm:grid-rows-none"],
12400
+ md: ["grid-cols-1", "md:grid-cols-[184px_minmax(0px,1fr)]", "md:grid-rows-none"],
12401
+ lg: ["grid-cols-1", "lg:grid-cols-[184px_minmax(0px,1fr)]", "lg:grid-rows-none"],
12402
+ xl: ["grid-cols-1", "xl:grid-cols-[184px_minmax(0px,1fr)]", "xl:grid-rows-none"],
12403
+ "2xl": ["grid-cols-1", "2xl:grid-cols-[184px_minmax(0px,1fr)]", "2xl:grid-rows-none"],
12404
+ "3xl": ["grid-cols-1", "3xl:grid-cols-[184px_minmax(0px,1fr)]", "3xl:grid-rows-none"],
12356
12405
  },
12357
12406
  },
12358
12407
  defaultVariants: {
@@ -12369,11 +12418,11 @@ const cvaSidebarContentLayout = cssClassVarianceUtilities.cva({
12369
12418
  * - Below the breakpoint, the grid is a single column (see `cvaSidebarContentLayout`), so the
12370
12419
  * sidebar spans the grid's full width and this edge is a true page edge, exactly like the left
12371
12420
  * edge - it gets the same `pr-4` inset.
12372
- * - At/above the breakpoint, this edge instead borders the content column, and *most* of it is
12373
- * owned entirely by content's own `p-content-space` left padding (see module doc comment above and
12374
- * `cvaSidebarContentLayoutContent`) - stacking this cell's own `pr-4` on top of that would silently
12375
- * double the gap. `{breakpoint}:pr-2` cancels *most*, but not all, of it there - see below for the
12376
- * deliberate remainder.
12421
+ * - At/above the breakpoint (the vertical-list mode), this edge instead borders the content column,
12422
+ * and the gap there is owned *entirely* by content's own `p-content-space` left padding (see module
12423
+ * doc comment above and `cvaSidebarContentLayoutContent`) - stacking any of this cell's own `pr-4`
12424
+ * on top of that would double the gap. `{breakpoint}:pr-0` cancels it completely, so the nav items
12425
+ * stretch to the full width of the sidebar's 184px track minus only its `pl-4`.
12377
12426
  *
12378
12427
  * `h-full min-h-0 overflow-y-auto` (applied only from the breakpoint upward, matching `Sidebar`'s
12379
12428
  * own vertical-list mode) give the sidebar its own bounded height and local scroll: `Sidebar`'s
@@ -12388,28 +12437,24 @@ const cvaSidebarContentLayout = cssClassVarianceUtilities.cva({
12388
12437
  * happens to be long enough to overflow. Supported by every evergreen browser (Chrome/Edge 94+,
12389
12438
  * Firefox 97+, Safari 18.2+); a no-op elsewhere, i.e. today's pre-fix behavior, so no regression risk.
12390
12439
  *
12391
- * That reservation alone butts the items directly against the scrollbar track with zero breathing
12392
- * room, though - `scrollbar-gutter` only guarantees no *overlap*, it isn't a visual gap. `{bp}:pr-2`
12393
- * is the deliberate small remainder of the otherwise-cancelled `pr-4` that supplies that breathing
12394
- * room, sized independently of both the scrollbar's own width (which the browser already reserves via
12395
- * `scrollbar-gutter`) and of the sidebar/content gap above (which is `p-content-space`'s job, not
12396
- * this padding's) - it exists purely so the sidebar's own content doesn't look glued to the sidebar's
12397
- * own scrollbar. Keeping it a small fraction of the full `pr-4` (rather than restoring all of it, or
12398
- * clawing space back from the reserved gutter) avoids meaningfully inflating the sidebar/content gap
12399
- * `p-content-space` already owns - it is deliberately *not* zero, but not enough to look like a second
12400
- * gap either.
12440
+ * That gutter is deliberately *not* topped up with any right padding in vertical mode: the nav items
12441
+ * are meant to span the sidebar's full inner width so they line up with the page chrome above them
12442
+ * (Asset Home's branded header image matches this exact box - see `cvaAssetImageContainer` in
12443
+ * `AssetPageHeader.tsx`). `scrollbar-gutter` already guarantees the items are never *overlapped* by
12444
+ * the scrollbar, which is the correctness requirement; on platforms with overlay scrollbars (macOS)
12445
+ * the gutter is 0 and the items reach the true edge.
12401
12446
  */
12402
12447
  const cvaSidebarContentLayoutSidebar = cssClassVarianceUtilities.cva({
12403
12448
  base: ["pt-4", "pl-4", "pr-4"],
12404
12449
  variants: {
12405
12450
  breakpoint: {
12406
- xs: ["xs:pr-2", "xs:h-full", "xs:min-h-0", "xs:overflow-y-auto", "xs:[scrollbar-gutter:stable]"],
12407
- sm: ["sm:pr-2", "sm:h-full", "sm:min-h-0", "sm:overflow-y-auto", "sm:[scrollbar-gutter:stable]"],
12408
- md: ["md:pr-2", "md:h-full", "md:min-h-0", "md:overflow-y-auto", "md:[scrollbar-gutter:stable]"],
12409
- lg: ["lg:pr-2", "lg:h-full", "lg:min-h-0", "lg:overflow-y-auto", "lg:[scrollbar-gutter:stable]"],
12410
- xl: ["xl:pr-2", "xl:h-full", "xl:min-h-0", "xl:overflow-y-auto", "xl:[scrollbar-gutter:stable]"],
12411
- "2xl": ["2xl:pr-2", "2xl:h-full", "2xl:min-h-0", "2xl:overflow-y-auto", "2xl:[scrollbar-gutter:stable]"],
12412
- "3xl": ["3xl:pr-2", "3xl:h-full", "3xl:min-h-0", "3xl:overflow-y-auto", "3xl:[scrollbar-gutter:stable]"],
12451
+ xs: ["xs:pr-0", "xs:h-full", "xs:min-h-0", "xs:overflow-y-auto", "xs:[scrollbar-gutter:stable]"],
12452
+ sm: ["sm:pr-0", "sm:h-full", "sm:min-h-0", "sm:overflow-y-auto", "sm:[scrollbar-gutter:stable]"],
12453
+ md: ["md:pr-0", "md:h-full", "md:min-h-0", "md:overflow-y-auto", "md:[scrollbar-gutter:stable]"],
12454
+ lg: ["lg:pr-0", "lg:h-full", "lg:min-h-0", "lg:overflow-y-auto", "lg:[scrollbar-gutter:stable]"],
12455
+ xl: ["xl:pr-0", "xl:h-full", "xl:min-h-0", "xl:overflow-y-auto", "xl:[scrollbar-gutter:stable]"],
12456
+ "2xl": ["2xl:pr-0", "2xl:h-full", "2xl:min-h-0", "2xl:overflow-y-auto", "2xl:[scrollbar-gutter:stable]"],
12457
+ "3xl": ["3xl:pr-0", "3xl:h-full", "3xl:min-h-0", "3xl:overflow-y-auto", "3xl:[scrollbar-gutter:stable]"],
12413
12458
  },
12414
12459
  },
12415
12460
  defaultVariants: {
package/index.esm.js CHANGED
@@ -12136,13 +12136,62 @@ const cvaSidebarChildContainer = cva({
12136
12136
  base: ["apply", "flex", "overflow-hidden", "gap-2", "p-1", "max-w-full"],
12137
12137
  variants: {
12138
12138
  breakpoint: {
12139
- xs: ["xs:overflow-visible", "xs:p-0", "xs:grid", "xs:grid-cols-1", "xs:w-full"],
12140
- sm: ["sm:overflow-visible", "sm:p-0", "sm:grid", "sm:grid-cols-1", "sm:w-full"],
12141
- md: ["md:overflow-visible", "md:p-0", "md:grid", "md:grid-cols-1", "md:w-full"],
12142
- lg: ["lg:overflow-visible", "lg:p-0", "lg:grid", "lg:grid-cols-1", "lg:w-full"],
12143
- xl: ["xl:overflow-visible", "xl:p-0", "xl:grid", "xl:grid-cols-1", "xl:w-full"],
12144
- "2xl": ["2xl:overflow-visible", "2xl:p-0", "2xl:grid", "2xl:grid-cols-1", "2xl:w-full"],
12145
- "3xl": ["3xl:overflow-visible", "3xl:p-0", "3xl:grid", "3xl:grid-cols-1", "3xl:w-full"],
12139
+ xs: [
12140
+ "xs:overflow-visible",
12141
+ "xs:p-0",
12142
+ "xs:grid",
12143
+ "xs:grid-cols-1",
12144
+ "xs:w-full",
12145
+ "xs:[&_:focus-visible]:-outline-offset-2",
12146
+ ],
12147
+ sm: [
12148
+ "sm:overflow-visible",
12149
+ "sm:p-0",
12150
+ "sm:grid",
12151
+ "sm:grid-cols-1",
12152
+ "sm:w-full",
12153
+ "sm:[&_:focus-visible]:-outline-offset-2",
12154
+ ],
12155
+ md: [
12156
+ "md:overflow-visible",
12157
+ "md:p-0",
12158
+ "md:grid",
12159
+ "md:grid-cols-1",
12160
+ "md:w-full",
12161
+ "md:[&_:focus-visible]:-outline-offset-2",
12162
+ ],
12163
+ lg: [
12164
+ "lg:overflow-visible",
12165
+ "lg:p-0",
12166
+ "lg:grid",
12167
+ "lg:grid-cols-1",
12168
+ "lg:w-full",
12169
+ "lg:[&_:focus-visible]:-outline-offset-2",
12170
+ ],
12171
+ xl: [
12172
+ "xl:overflow-visible",
12173
+ "xl:p-0",
12174
+ "xl:grid",
12175
+ "xl:grid-cols-1",
12176
+ "xl:w-full",
12177
+ "xl:[&_:focus-visible]:-outline-offset-2",
12178
+ ],
12179
+ "2xl": [
12180
+ "2xl:overflow-visible",
12181
+ "2xl:p-0",
12182
+ "2xl:grid",
12183
+ "2xl:grid-cols-1",
12184
+ "2xl:w-full",
12185
+ "2xl:[&_:focus-visible]:-outline-offset-2",
12186
+ ],
12187
+ "3xl": [
12188
+ "3xl:overflow-visible",
12189
+ "3xl:p-0",
12190
+ "3xl:grid",
12191
+ "3xl:grid-cols-1",
12192
+ "3xl:w-full",
12193
+ "3xl:[&_:focus-visible]:-outline-offset-2",
12194
+ ],
12146
12195
  },
12147
12196
  },
12148
12197
  });
@@ -12345,13 +12394,13 @@ const cvaSidebarContentLayout = cva({
12345
12394
  base: ["grid", "min-h-0", "flex-1", "grid-rows-[min-content_minmax(0px,1fr)]"],
12346
12395
  variants: {
12347
12396
  breakpoint: {
12348
- xs: ["grid-cols-1", "xs:grid-cols-[200px_minmax(0px,1fr)]", "xs:grid-rows-none"],
12349
- sm: ["grid-cols-1", "sm:grid-cols-[200px_minmax(0px,1fr)]", "sm:grid-rows-none"],
12350
- md: ["grid-cols-1", "md:grid-cols-[200px_minmax(0px,1fr)]", "md:grid-rows-none"],
12351
- lg: ["grid-cols-1", "lg:grid-cols-[200px_minmax(0px,1fr)]", "lg:grid-rows-none"],
12352
- xl: ["grid-cols-1", "xl:grid-cols-[200px_minmax(0px,1fr)]", "xl:grid-rows-none"],
12353
- "2xl": ["grid-cols-1", "2xl:grid-cols-[200px_minmax(0px,1fr)]", "2xl:grid-rows-none"],
12354
- "3xl": ["grid-cols-1", "3xl:grid-cols-[200px_minmax(0px,1fr)]", "3xl:grid-rows-none"],
12397
+ xs: ["grid-cols-1", "xs:grid-cols-[184px_minmax(0px,1fr)]", "xs:grid-rows-none"],
12398
+ sm: ["grid-cols-1", "sm:grid-cols-[184px_minmax(0px,1fr)]", "sm:grid-rows-none"],
12399
+ md: ["grid-cols-1", "md:grid-cols-[184px_minmax(0px,1fr)]", "md:grid-rows-none"],
12400
+ lg: ["grid-cols-1", "lg:grid-cols-[184px_minmax(0px,1fr)]", "lg:grid-rows-none"],
12401
+ xl: ["grid-cols-1", "xl:grid-cols-[184px_minmax(0px,1fr)]", "xl:grid-rows-none"],
12402
+ "2xl": ["grid-cols-1", "2xl:grid-cols-[184px_minmax(0px,1fr)]", "2xl:grid-rows-none"],
12403
+ "3xl": ["grid-cols-1", "3xl:grid-cols-[184px_minmax(0px,1fr)]", "3xl:grid-rows-none"],
12355
12404
  },
12356
12405
  },
12357
12406
  defaultVariants: {
@@ -12368,11 +12417,11 @@ const cvaSidebarContentLayout = cva({
12368
12417
  * - Below the breakpoint, the grid is a single column (see `cvaSidebarContentLayout`), so the
12369
12418
  * sidebar spans the grid's full width and this edge is a true page edge, exactly like the left
12370
12419
  * edge - it gets the same `pr-4` inset.
12371
- * - At/above the breakpoint, this edge instead borders the content column, and *most* of it is
12372
- * owned entirely by content's own `p-content-space` left padding (see module doc comment above and
12373
- * `cvaSidebarContentLayoutContent`) - stacking this cell's own `pr-4` on top of that would silently
12374
- * double the gap. `{breakpoint}:pr-2` cancels *most*, but not all, of it there - see below for the
12375
- * deliberate remainder.
12420
+ * - At/above the breakpoint (the vertical-list mode), this edge instead borders the content column,
12421
+ * and the gap there is owned *entirely* by content's own `p-content-space` left padding (see module
12422
+ * doc comment above and `cvaSidebarContentLayoutContent`) - stacking any of this cell's own `pr-4`
12423
+ * on top of that would double the gap. `{breakpoint}:pr-0` cancels it completely, so the nav items
12424
+ * stretch to the full width of the sidebar's 184px track minus only its `pl-4`.
12376
12425
  *
12377
12426
  * `h-full min-h-0 overflow-y-auto` (applied only from the breakpoint upward, matching `Sidebar`'s
12378
12427
  * own vertical-list mode) give the sidebar its own bounded height and local scroll: `Sidebar`'s
@@ -12387,28 +12436,24 @@ const cvaSidebarContentLayout = cva({
12387
12436
  * happens to be long enough to overflow. Supported by every evergreen browser (Chrome/Edge 94+,
12388
12437
  * Firefox 97+, Safari 18.2+); a no-op elsewhere, i.e. today's pre-fix behavior, so no regression risk.
12389
12438
  *
12390
- * That reservation alone butts the items directly against the scrollbar track with zero breathing
12391
- * room, though - `scrollbar-gutter` only guarantees no *overlap*, it isn't a visual gap. `{bp}:pr-2`
12392
- * is the deliberate small remainder of the otherwise-cancelled `pr-4` that supplies that breathing
12393
- * room, sized independently of both the scrollbar's own width (which the browser already reserves via
12394
- * `scrollbar-gutter`) and of the sidebar/content gap above (which is `p-content-space`'s job, not
12395
- * this padding's) - it exists purely so the sidebar's own content doesn't look glued to the sidebar's
12396
- * own scrollbar. Keeping it a small fraction of the full `pr-4` (rather than restoring all of it, or
12397
- * clawing space back from the reserved gutter) avoids meaningfully inflating the sidebar/content gap
12398
- * `p-content-space` already owns - it is deliberately *not* zero, but not enough to look like a second
12399
- * gap either.
12439
+ * That gutter is deliberately *not* topped up with any right padding in vertical mode: the nav items
12440
+ * are meant to span the sidebar's full inner width so they line up with the page chrome above them
12441
+ * (Asset Home's branded header image matches this exact box - see `cvaAssetImageContainer` in
12442
+ * `AssetPageHeader.tsx`). `scrollbar-gutter` already guarantees the items are never *overlapped* by
12443
+ * the scrollbar, which is the correctness requirement; on platforms with overlay scrollbars (macOS)
12444
+ * the gutter is 0 and the items reach the true edge.
12400
12445
  */
12401
12446
  const cvaSidebarContentLayoutSidebar = cva({
12402
12447
  base: ["pt-4", "pl-4", "pr-4"],
12403
12448
  variants: {
12404
12449
  breakpoint: {
12405
- xs: ["xs:pr-2", "xs:h-full", "xs:min-h-0", "xs:overflow-y-auto", "xs:[scrollbar-gutter:stable]"],
12406
- sm: ["sm:pr-2", "sm:h-full", "sm:min-h-0", "sm:overflow-y-auto", "sm:[scrollbar-gutter:stable]"],
12407
- md: ["md:pr-2", "md:h-full", "md:min-h-0", "md:overflow-y-auto", "md:[scrollbar-gutter:stable]"],
12408
- lg: ["lg:pr-2", "lg:h-full", "lg:min-h-0", "lg:overflow-y-auto", "lg:[scrollbar-gutter:stable]"],
12409
- xl: ["xl:pr-2", "xl:h-full", "xl:min-h-0", "xl:overflow-y-auto", "xl:[scrollbar-gutter:stable]"],
12410
- "2xl": ["2xl:pr-2", "2xl:h-full", "2xl:min-h-0", "2xl:overflow-y-auto", "2xl:[scrollbar-gutter:stable]"],
12411
- "3xl": ["3xl:pr-2", "3xl:h-full", "3xl:min-h-0", "3xl:overflow-y-auto", "3xl:[scrollbar-gutter:stable]"],
12450
+ xs: ["xs:pr-0", "xs:h-full", "xs:min-h-0", "xs:overflow-y-auto", "xs:[scrollbar-gutter:stable]"],
12451
+ sm: ["sm:pr-0", "sm:h-full", "sm:min-h-0", "sm:overflow-y-auto", "sm:[scrollbar-gutter:stable]"],
12452
+ md: ["md:pr-0", "md:h-full", "md:min-h-0", "md:overflow-y-auto", "md:[scrollbar-gutter:stable]"],
12453
+ lg: ["lg:pr-0", "lg:h-full", "lg:min-h-0", "lg:overflow-y-auto", "lg:[scrollbar-gutter:stable]"],
12454
+ xl: ["xl:pr-0", "xl:h-full", "xl:min-h-0", "xl:overflow-y-auto", "xl:[scrollbar-gutter:stable]"],
12455
+ "2xl": ["2xl:pr-0", "2xl:h-full", "2xl:min-h-0", "2xl:overflow-y-auto", "2xl:[scrollbar-gutter:stable]"],
12456
+ "3xl": ["3xl:pr-0", "3xl:h-full", "3xl:min-h-0", "3xl:overflow-y-auto", "3xl:[scrollbar-gutter:stable]"],
12412
12457
  },
12413
12458
  },
12414
12459
  defaultVariants: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-components",
3
- "version": "3.10.1",
3
+ "version": "3.10.2",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "migrations": "./migrations.json",
package/src/components/SidebarContentLayout/SidebarContentLayout.variants.d.ts CHANGED
@@ -77,11 +77,11 @@ export declare const cvaSidebarContentLayout: import("cva").CVAComponent<Omit<{
77
77
  * - Below the breakpoint, the grid is a single column (see `cvaSidebarContentLayout`), so the
78
78
  * sidebar spans the grid's full width and this edge is a true page edge, exactly like the left
79
79
  * edge - it gets the same `pr-4` inset.
80
- * - At/above the breakpoint, this edge instead borders the content column, and *most* of it is
81
- * owned entirely by content's own `p-content-space` left padding (see module doc comment above and
82
- * `cvaSidebarContentLayoutContent`) - stacking this cell's own `pr-4` on top of that would silently
83
- * double the gap. `{breakpoint}:pr-2` cancels *most*, but not all, of it there - see below for the
84
- * deliberate remainder.
80
+ * - At/above the breakpoint (the vertical-list mode), this edge instead borders the content column,
81
+ * and the gap there is owned *entirely* by content's own `p-content-space` left padding (see module
82
+ * doc comment above and `cvaSidebarContentLayoutContent`) - stacking any of this cell's own `pr-4`
83
+ * on top of that would double the gap. `{breakpoint}:pr-0` cancels it completely, so the nav items
84
+ * stretch to the full width of the sidebar's 184px track minus only its `pl-4`.
85
85
  *
86
86
  * `h-full min-h-0 overflow-y-auto` (applied only from the breakpoint upward, matching `Sidebar`'s
87
87
  * own vertical-list mode) give the sidebar its own bounded height and local scroll: `Sidebar`'s
@@ -96,16 +96,12 @@ export declare const cvaSidebarContentLayout: import("cva").CVAComponent<Omit<{
96
96
  * happens to be long enough to overflow. Supported by every evergreen browser (Chrome/Edge 94+,
97
97
  * Firefox 97+, Safari 18.2+); a no-op elsewhere, i.e. today's pre-fix behavior, so no regression risk.
98
98
  *
99
- * That reservation alone butts the items directly against the scrollbar track with zero breathing
100
- * room, though - `scrollbar-gutter` only guarantees no *overlap*, it isn't a visual gap. `{bp}:pr-2`
101
- * is the deliberate small remainder of the otherwise-cancelled `pr-4` that supplies that breathing
102
- * room, sized independently of both the scrollbar's own width (which the browser already reserves via
103
- * `scrollbar-gutter`) and of the sidebar/content gap above (which is `p-content-space`'s job, not
104
- * this padding's) - it exists purely so the sidebar's own content doesn't look glued to the sidebar's
105
- * own scrollbar. Keeping it a small fraction of the full `pr-4` (rather than restoring all of it, or
106
- * clawing space back from the reserved gutter) avoids meaningfully inflating the sidebar/content gap
107
- * `p-content-space` already owns - it is deliberately *not* zero, but not enough to look like a second
108
- * gap either.
99
+ * That gutter is deliberately *not* topped up with any right padding in vertical mode: the nav items
100
+ * are meant to span the sidebar's full inner width so they line up with the page chrome above them
101
+ * (Asset Home's branded header image matches this exact box - see `cvaAssetImageContainer` in
102
+ * `AssetPageHeader.tsx`). `scrollbar-gutter` already guarantees the items are never *overlapped* by
103
+ * the scrollbar, which is the correctness requirement; on platforms with overlay scrollbars (macOS)
104
+ * the gutter is 0 and the items reach the true edge.
109
105
  */
110
106
  export declare const cvaSidebarContentLayoutSidebar: import("cva").CVAComponent<Omit<{
111
107
  base: string[];