@deque/cauldron-styles 7.5.0-canary.fa33d43b → 7.6.0-canary.02bddc70

package/dist/index.css

@@ -161,7 +161,6 @@
 .cauldron--theme-dark {
   --focus: var(--focus-dark);
 }
-
 :root {
   --text-size-base: 16px;
 
@@ -203,7 +202,6 @@
   --line-height-body: 1.5;
   --line-height-body-small: 1.7;
 }
-
 :root {
   --workspace-background-color: #f0f2f5;
   --heading-text-color: var(--header-text-color-dark);
@@ -300,7 +298,6 @@ p {
 .cauldron--theme-dark [role='heading'] {
   --heading-text-color: white;
 }
-
 .Layout {
   top: var(--top-bar-height);
   padding: var(--layout-padding) var(--layout-padding) 0 var(--layout-padding);
@@ -330,7 +327,6 @@ p {
 }
 
 /* the left-bar style focus indication */
-
 .Content--focus-target,
 [data-skip-target='true'] {
   position: relative;
@@ -384,7 +380,6 @@ p {
 }
 
 /* Dark Theme */
-
 .cauldron--theme-dark .Layout {
   background-color: var(--dark-workspace-color);
   color: var(--layout-dark-color, var(--white));
@@ -393,7 +388,6 @@ p {
 .cauldron--theme-dark .Layout .Main:focus {
   border-left-color: var(--white);
 }
-
 .text--largest {
   font-size: var(--text-size-largest);
 }
@@ -487,7 +481,6 @@ ul.semantic-only {
   padding: 0;
   list-style-type: none;
 }
-
 :root {
   --field-background-color: var(--white);
   --field-content-color: var(--text-color-base);
@@ -1016,7 +1009,6 @@ textarea.Field--has-error:focus:hover,
 .Checkbox__overlay:hover:not(.Checkbox__overlay--disabled) {
   border: 1px solid currentColor;
 }
-
 .TextFieldWrapper {
   --text-field-wrapper-border-color: var(--field-border-color);
   --text-field-wrapper-background-color: var(--field-background-color);
@@ -1148,7 +1140,6 @@ textarea.Field--has-error:focus:hover,
 .TextFieldWrapper--diabled:hover {
   border: 1px solid var(--field-border-color);
 }
-
 :root {
   --alert-warning-background-color: #d93251;
   --alert-warning-header-text-color: #fff;
@@ -1197,7 +1188,6 @@ textarea.Field--has-error:focus:hover,
   border-top: none;
   background: transparent;
 }
-
 .FadeIn,
 .FadeIn--flex.FadeIn {
   opacity: 1;
@@ -1209,7 +1199,6 @@ textarea.Field--has-error:focus:hover,
   opacity: 0;
   transition: opacity 400ms;
 }
-
 :root {
   --button-background-color-primary: var(--accent-primary);
   --button-background-color-primary-disabled: #79a7d9;
@@ -1471,7 +1460,6 @@ button.Link {
 }
 
 /* Usage of .DefinitionButton is deprecated and no longer supported */
-
 .DefinitionButton {
   display: inline;
   vertical-align: baseline;
@@ -1479,7 +1467,6 @@ button.Link {
 }
 
 /* Usage of .DefinitionButton is deprecated and no longer supported */
-
 .DefinitionButton button {
   background-color: transparent;
   color: var(--text-color-base);
@@ -1513,7 +1500,6 @@ button.Link {
 }
 
 /* Custom property for button sibling gap. Will be deprecated in https://github.com/dequelabs/cauldron/issues/1944 */
-
 [class*='Button--'] + [class*='Button--'] {
   margin-left: var(--button-sibling-gap, var(--space-smallest));
 }
@@ -1666,7 +1652,6 @@ button.Link {
 .cauldron--theme-dark .Button--tertiary:is([disabled], [aria-disabled='true']) {
   color: #74818b;
 }
-
 :root {
   /* Primary */
   --icon-button-primary-color: var(--button-text-color-light);
@@ -1743,7 +1728,6 @@ button.Link {
 }
 
 /* Ensure both <a> and <button> IconButtons are aligned correctly. See #846. */
-
 a.IconButton {
   vertical-align: middle;
   line-height: unset;
@@ -1955,7 +1939,6 @@ a.IconButton {
   .IconButton--tertiary:is([disabled], [aria-disabled='true']) {
   color: #74818b;
 }
-
 :root {
   --dialog-background-color: #fff;
   --dialog-border-color: var(--gray-40);
@@ -2138,7 +2121,6 @@ a.IconButton {
     overflow-y: auto;
   }
 }
-
 /* Dark Theme */
 
 .cauldron--theme-dark .Dialog__inner {
@@ -2147,7 +2129,6 @@ a.IconButton {
 }
 
 /* Compensate for the larger dark theme border so Dialog dimensions remain consistent */
-
 .cauldron--theme-dark .Dialog__content {
   --dialog-content-padding-compensation: 3px;
   padding: calc(
@@ -2207,12 +2188,10 @@ a.IconButton {
 
 /* Dark theme: checked checkbox/radio icons in Dialogs should inherit the
    dialog's text color rather than using the global checked color */
-
 .cauldron--theme-dark .Dialog .Checkbox__overlay.Icon--checkbox-checked,
 .cauldron--theme-dark .Dialog .Radio__overlay.Icon--radio-checked {
   color: currentColor;
 }
-
 :root {
   --link-text-color: var(--gray-90);
   --link-text-color-hover: #3873a3;
@@ -2250,7 +2229,6 @@ a.IconButton {
   gap: var(--space-half);
   flex-wrap: wrap;
 }
-
 :root {
   --options-menu-text-color: var(--gray-90);
   --options-menu-disabled-text-color: var(--disabled);
@@ -2358,7 +2336,6 @@ a.IconButton {
 .OptionsMenu .OptionsMenu__list {
   top: 100%;
 }
-
 :root {
   --scrim-background-color: rgba(0, 0, 0, 0.5);
 }
@@ -2400,7 +2377,6 @@ a.IconButton {
   opacity: 1;
   transition: opacity 300ms;
 }
-
 :root {
   --select-min-height: 33px;
   --select-width: 300px;
@@ -2501,7 +2477,6 @@ a.IconButton {
 .Field__select--wrapper.Field--has-error select:focus:hover {
   border-color: var(--field-border-color-error-hover);
 }
-
 :root {
   --menu-width: 257px;
 }
@@ -2593,7 +2568,6 @@ a.IconButton {
 }
 
 /* Dark Theme */
-
 .cauldron--theme-dark .SideBar {
   background-color: var(--accent-medium);
   color: var(--accent-light);
@@ -2625,7 +2599,6 @@ a.IconButton {
 .cauldron--theme-dark .SideBar li:not([aria-controls]):focus-within {
   background-color: var(--accent-dark);
 }
-
 .RadioCard__overlay {
   border-radius: 50%;
 }
@@ -2665,7 +2638,6 @@ a.IconButton {
 .RadioCardGroup .Radio + .Radio {
   margin-top: 0;
 }
-
 .RadioCardGroup__Base {
   text-align: center;
 }
@@ -2675,7 +2647,6 @@ a.IconButton {
   justify-content: flex-end;
   min-height: 44px;
 }
-
 .RadioCardGroup__Icon.Icon svg {
   /**
    * this is edge case to pass color-contrast when the radio-card is selected,
@@ -2735,7 +2706,6 @@ a.IconButton {
 .cauldron--theme-dark .RadioCardGroup__Card {
   background-color: var(--dark-workspace-color);
 }
-
 .Toast {
   top: var(--top-bar-height);
   position: var(--toast-position, fixed);
@@ -2854,7 +2824,6 @@ a.IconButton {
 .Toast:focus .Toast__message > .Toast__message-content {
   border-bottom-color: var(--accent-dark);
 }
-
 :root {
   --tooltip-background-color: var(--gray-10);
   --tooltip-border-color: var(--gray-90);
@@ -2867,7 +2836,6 @@ a.IconButton {
 }
 
 /* Dark theme variables */
-
 .cauldron--theme-dark {
   --tooltip-background-color: var(--accent-medium);
   --tooltip-border-color: #b3bfc6;
@@ -2908,7 +2876,6 @@ a.IconButton {
 }
 
 /* TooltipArrow needs some dimensions to accurately calculate its positioning */
-
 .TooltipArrow {
   position: absolute;
   height: 0.1px;
@@ -2916,7 +2883,6 @@ a.IconButton {
 }
 
 /* Adjust position to try to center the arrow in the tooltip's border */
-
 [class*='Tooltip--top'] .TooltipArrow {
   left: 50%;
   bottom: -1px;
@@ -3009,7 +2975,6 @@ a.IconButton {
 .Tooltip--big li {
   margin: 6px 0;
 }
-
 button.TooltipTabstop {
   font-family: inherit;
   background-color: transparent;
@@ -3017,7 +2982,6 @@ button.TooltipTabstop {
   color: inherit;
   -webkit-appearance: none;
 }
-
 :root {
   --top-bar-background-color: var(--white);
   --top-bar-background-color-active: var(--white);
@@ -3179,7 +3143,6 @@ button.TooltipTabstop {
 }
 
 /* Dark Theme */
-
 .cauldron--theme-dark {
   --top-bar-background-color: var(--accent-dark);
   --top-bar-menuitem-separator: #5d676f;
@@ -3207,7 +3170,6 @@ button.TooltipTabstop {
     border: 0;
   }
 }
-
 :root {
   --skip-link-background-color: rgba(255, 255, 255, 0.95);
   --skip-link-focus-color: var(--focus-light);
@@ -3309,13 +3271,11 @@ button.TooltipTabstop {
 }
 
 /* Dark Theme */
-
 .cauldron--theme-dark {
   --skip-link-background-color: rgba(11, 14, 17, 0.95);
   --skip-link-focus-color: var(--focus-dark);
   --skip-link-text-color: var(--text-color-light);
 }
-
 :root {
   --loader-ring-size: 104px;
   --loader-ring-thickness: 10px;
@@ -3436,7 +3396,6 @@ button.TooltipTabstop {
     transform: rotate(360deg);
   }
 }
-
 .Offscreen {
   position: absolute !important;
   height: 1px;
@@ -3445,7 +3404,6 @@ button.TooltipTabstop {
   clip: rect(1px, 1px, 1px, 1px);
   margin-top: -1px;
 }
-
 :root {
   --code-text-color: var(--accent-primary-active);
   --code-border-color: var(--stroke-light);
@@ -3652,7 +3610,6 @@ button.TooltipTabstop {
 .cauldron--theme-dark .Code .hljs-selector-pseudo {
   color: #f99157;
 }
-
 .Line {
   border: none;
   border-top: 1px solid #ccc;
@@ -3674,7 +3631,6 @@ button.TooltipTabstop {
   background: #fdfdfe;
   border: 1px solid #ccc;
 }
-
 :root {
   --tabs-border-color: var(--gray-20);
   --tab-shadow-color: var(--accent-primary);
@@ -3815,7 +3771,6 @@ button.TooltipTabstop {
   height: 2.125rem;
   padding: var(--space-smallest) var(--space-small);
 }
-
 :root {
   --tag-text-color: var(--gray-90);
   --tag-background-color: var(--background-light);
@@ -3857,7 +3812,6 @@ button.TooltipTabstop {
   margin-right: 3px;
   font-weight: var(--font-weight-medium);
 }
-
 :root {
   --tag-button-icon-size: 15px;
 }
@@ -3874,7 +3828,6 @@ button.TooltipTabstop {
   width: var(--tag-button-icon-size);
   height: var(--tag-button-icon-size);
 }
-
 :root {
   --table-header-text-color: var(--gray-90);
   --table-header-background-color: var(--white);
@@ -3916,6 +3869,25 @@ button.TooltipTabstop {
   overflow-wrap: break-word;
 }
 
+/* Outer corners, for a table whose container publishes one — see
+   --content-start-corner-radius. A collapsed table ignores border-radius, so
+   the edge cells carry it. */
+.Table:first-child > :first-child > .TableRow:first-child > :first-child {
+  border-start-start-radius: var(--content-start-corner-radius, 0);
+}
+
+.Table:first-child > :first-child > .TableRow:first-child > :last-child {
+  border-start-end-radius: var(--content-start-corner-radius, 0);
+}
+
+.Table:last-child > :last-child > .TableRow:last-child > :first-child {
+  border-end-start-radius: var(--content-end-corner-radius, 0);
+}
+
+.Table:last-child > :last-child > .TableRow:last-child > :last-child {
+  border-end-end-radius: var(--content-end-corner-radius, 0);
+}
+
 .TableGrid {
   display: grid;
   grid-template-columns: var(--table-grid-template-columns, auto);
@@ -3949,6 +3921,9 @@ button.TooltipTabstop {
 }
 
 .TableHeader .TableHeader__sort-button {
+  /* Fills the cell edge to edge, so its focus ring follows any corner the cell
+     takes. Cells with no corner pass down 0. */
+  border-radius: inherit;
   background-color: transparent;
   font-family: inherit;
   width: 100%;
@@ -3971,20 +3946,17 @@ button.TooltipTabstop {
 }
 
 /* Applies TableCell styles to a <TableHeader> with variant="cell". Only results in visual changes, not semantic ones. */
-
 .TableHeader--cell-variant {
   font-weight: var(--font-weight-normal);
 }
 
 /* These styles are not applying and will be deprecated */
-
 .TableHeader--sort-ascending .TableHeader__sort-button,
 .TableHeader--sort-decscending .TableHeader__sort-button {
   color: var(--table-header-sorting-text-color);
 }
 
 /* compensate the gap in height between TableHeader and Icon */
-
 .TableHeader__sort-button span {
   margin: calc(var(--space-half) * -1) 0;
 }
@@ -4035,11 +4007,6 @@ button.TooltipTabstop {
   border-bottom: 1px solid var(--gray-40);
 }
 
-.Table--border .TableBody .TableHeader {
-  border-bottom-width: 1px;
-  border-right: 1px solid var(--table-row-border-color);
-}
-
 .cauldron--theme-dark .Table--border,
 .cauldron--theme-dark .Table--border .TableHeader,
 .cauldron--theme-dark .Table--border .TableFooter,
@@ -4052,7 +4019,6 @@ button.TooltipTabstop {
   font-weight: var(--font-weight-medium);
   color: var(--table-header-text-color);
 }
-
 :root {
   --data-list-background-color: var(--gray-20);
   --data-list-value-background-color: var(--white);
@@ -4164,7 +4130,6 @@ button.TooltipTabstop {
 }
 
 /* Temporary solution for insufficient color contrast until proper dark mode is implemented. */
-
 .cauldron--theme-dark .DescriptionList__details,
 .cauldron--theme-dark .DescriptionList--collapsed .DescriptionList__term {
   color: var(--white);
@@ -4179,7 +4144,6 @@ button.TooltipTabstop {
     border-right: 1px solid var(--gray-40);
   }
 }
-
 :root {
   --metadata-list-column-gap: var(--space-largest);
   --metadata-list-horizontal-row-gap: var(--space-largest);
@@ -4243,7 +4207,6 @@ button.TooltipTabstop {
   font-weight: var(--metadata-list-value-font-weight);
   line-height: var(--metadata-list-value-line-height);
 }
-
 :root {
   --step-indicator-size: 1.75rem;
   --step-line-height: 0.5rem;
@@ -4271,7 +4234,6 @@ button.TooltipTabstop {
 }
 
 /* Dark theme variables */
-
 .cauldron--theme-dark {
   --step-label-color: var(--accent-light);
   --step-line-color: var(--accent-medium);
@@ -4386,13 +4348,11 @@ button.TooltipTabstop {
 .Stepper__step--complete-indicator:before {
   content: '';
 }
-
 .Stepper__step--complete-indicator svg {
   height: var(--step-indicator-content-size);
   width: var(--step-indicator-content-size);
   color: var(--step-complete-indicator-svg-color);
 }
-
 :root {
   --panel-border-color: var(--gray-40);
   --panel-border-radius: var(--radius-12);
@@ -4407,6 +4367,11 @@ button.TooltipTabstop {
 }
 
 .Panel {
+  /* Not on :root, so a per-instance --panel-border-radius recomputes it. */
+  --panel-inner-border-radius: max(
+    0px,
+    calc(var(--panel-border-radius) - var(--panel-border-width))
+  );
   padding: var(--panel-padding);
   margin: 0;
   border: var(--panel-border);
@@ -4445,14 +4410,20 @@ button.TooltipTabstop {
 .Panel__Header {
   margin: calc(var(--panel-padding) * -1) calc(var(--panel-padding) * -1) 0
     calc(var(--panel-padding) * -1);
-  border-start-start-radius: max(
-    0px,
-    calc(var(--panel-border-radius) - var(--panel-border-width))
-  );
-  border-start-end-radius: max(
-    0px,
-    calc(var(--panel-border-radius) - var(--panel-border-width))
-  );
+  border-start-start-radius: var(--panel-inner-border-radius);
+  border-start-end-radius: var(--panel-inner-border-radius);
+}
+
+.Panel--no-padding > :first-child {
+  --content-start-corner-radius: var(--panel-inner-border-radius);
+  border-start-start-radius: var(--panel-inner-border-radius);
+  border-start-end-radius: var(--panel-inner-border-radius);
+}
+
+.Panel--no-padding > :last-child {
+  --content-end-corner-radius: var(--panel-inner-border-radius);
+  border-end-start-radius: var(--panel-inner-border-radius);
+  border-end-end-radius: var(--panel-inner-border-radius);
 }
 
 .Panel--no-padding > :is(.Panel__Heading, .Panel__Header, .Panel__Content) {
@@ -4520,14 +4491,12 @@ fieldset.Panel {
 }
 
 /* reset absurd browser-default legend styles */
-
 .Panel legend {
   position: absolute;
   top: var(--space-large);
 }
 
 /* Dark Theme */
-
 .cauldron--theme-dark {
   --panel-border-color: var(--stroke-dark);
   --panel-border: var(--panel-border-width) solid var(--panel-border-color);
@@ -4536,7 +4505,6 @@ fieldset.Panel {
   --panel-divider-border-color: var(--stroke-dark);
   --panel-content-color: var(--accent-light);
 }
-
 :root {
   --popover-background-color: var(--gray-10);
   --popover-border-color: var(--gray-90);
@@ -4551,7 +4519,6 @@ fieldset.Panel {
 }
 
 /* Dark theme variables */
-
 .cauldron--theme-dark {
   --popover-background-color: var(--accent-medium);
   --popover-border-color: var(--accent-light);
@@ -4576,7 +4543,6 @@ fieldset.Panel {
 }
 
 /* TooltipArrow needs some dimensions to accurately calculate its positioning */
-
 .Popover__popoverArrow {
   position: absolute;
   height: 0.1px;
@@ -4593,7 +4559,6 @@ fieldset.Panel {
 }
 
 /* Adjust position to try to center the arrow in the tooltip's border */
-
 [class*='Popover--top'] .Popover__popoverArrow {
   left: 50%;
   bottom: -1px;
@@ -4661,7 +4626,6 @@ fieldset.Panel {
 .Popover__apply {
   margin: var(--popover-alert-apply-button-margin);
 }
-
 :root {
   --top-nav-height: 3rem;
   --top-nav-background-color: var(--top-bar-background-color);
@@ -4757,7 +4721,6 @@ fieldset.Panel {
 }
 
 /* NavBar collapsed */
-
 .NavBar.NavBar--collapsed {
   align-items: flex-start;
   flex-direction: column;
@@ -4805,7 +4768,6 @@ fieldset.Panel {
 }
 
 /* make focus outline visible */
-
 .NavBar--collapsed > ul > li > a:focus,
 .NavBar--collapsed > .NavBar__trigger:focus {
   outline-offset: calc(var(--space-quarter) * -1);
@@ -4830,7 +4792,6 @@ fieldset.Panel {
     min-width: 7.125rem;
   }
 }
-
 :root {
   --progress-bar-background-color: var(--accent-dark);
   --progress-bar-fill-color: var(--accent-info-light);
@@ -4864,7 +4825,6 @@ fieldset.Panel {
   --progress-bar-fill-border-radius: 1px;
   --progress-bar-fill-min-width: 1px;
 }
-
 .cauldron--theme-dark .Icon--robot circle {
   stroke: var(--accent-light);
   stroke-width: 2px;
@@ -4884,7 +4844,6 @@ fieldset.Panel {
 .cauldron--theme-light .Icon--robot path {
   color: #3e7aae;
 }
-
 :root {
   --address-line-height: 1.618;
 }
@@ -4892,7 +4851,6 @@ fieldset.Panel {
 .Address {
   line-height: var(--address-line-height);
 }
-
 :root {
   --pagination-button-background-color: var(--gray-20);
   --pagination-button-border-color: var(--gray-40);
@@ -4972,7 +4930,6 @@ fieldset.Panel {
     margin: 0;
   }
 }
-
 :root {
   --breadcrumb-separator-color: var(--gray-60);
 }
@@ -5009,7 +4966,6 @@ fieldset.Panel {
 .Breadcrumb__Item:last-child {
   font-weight: var(--font-weight-normal);
 }
-
 :root {
   --two-column-panel-border-color: var(--gray-40);
   --two-column-panel-background-color: #fff;
@@ -5308,7 +5264,6 @@ fieldset.Panel {
     display: none;
   }
 }
-
 :root {
   --accordion-trigger-background-color: var(--white);
   --accordion-trigger-background-color-expanded: var(--white);
@@ -5390,10 +5345,17 @@ button.Accordion__trigger {
   border-radius: 0 0 3px 3px;
 }
 
+.Accordion__panel > :first-child {
+  margin-top: 0;
+}
+
+.Accordion__panel > :last-child {
+  margin-bottom: 0;
+}
+
 .Accordion:has(> button[aria-expanded='true']) {
   box-shadow: var(--drop-shadow-raised);
 }
-
 :root {
   --notice-info-color: #f5f7f8;
   --notice-caution-color: #fff8ef;
@@ -5525,7 +5487,6 @@ button.Accordion__trigger {
 .Notice li {
   margin-bottom: var(--space-smallest);
 }
-
 :root {
   --combobox-listbox-border-color: var(--gray-40);
   --combobox-listbox-background-color: #fff;
@@ -5711,7 +5672,6 @@ button.Accordion__trigger {
  * is provided as a fallback selector to indicate open listboxes
  * see: https://caniuse.com/css-has
  */
-
 .Combobox:has([role='combobox'][aria-expanded='true']) .Combobox__listbox,
 .Combobox__listbox--open {
   display: block;
@@ -5812,7 +5772,6 @@ button.Accordion__trigger {
 .ComboboxPill + .ComboboxPill {
   margin: 0;
 }
-
 :root {
   --timeline-mark-color: var(--accent-success-dark);
   --timeline-mark-border-color: #fff;
@@ -5884,7 +5843,6 @@ button.Accordion__trigger {
   border: 1px solid var(--timeline-mark-border-color);
   transform: translateX(-1px);
 }
-
 .SearchField :where(.TextFieldWrapper) {
   --text-field-wrapper-border-color: var(
     --search-field-border-color,
@@ -5984,7 +5942,6 @@ button.Accordion__trigger {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-
 .TextEllipsis {
   display: block !important;
   white-space: nowrap;
@@ -5997,7 +5954,6 @@ button.Accordion__trigger {
  * see: https://github.com/dequelabs/cauldron/issues/1926
  * Only apply to single-line ellipsis to avoid Chrome false ellipsis bug
  */
-
 .TextEllipsis:not(.TextEllipsis--multiline):after {
   content: '';
   display: block;
@@ -6014,7 +5970,6 @@ button.Accordion__trigger {
   -webkit-box-orient: vertical;
   white-space: normal;
 }
-
 :root {
   --badge-text-color: var(--gray-90);
   --badge-background-color: transparent;
@@ -6058,7 +6013,6 @@ button.Accordion__trigger {
 .Badge > .Icon {
   margin: 0 var(--space-half) 0 -4px;
 }
-
 :root {
   --impact-badge-critical-background-color: var(--issue-critical);
   --impact-badge-critical-border-color: var(--accent-error-disabled);
@@ -6098,11 +6052,11 @@ button.Accordion__trigger {
   --badge-background-color: var(--impact-badge-minor-background-color);
   --badge-border-color: var(--impact-badge-minor-border-color);
 }
-
 .Drawer {
   position: fixed;
   max-height: var(--drawer-height, 100vh);
   max-width: var(--drawer-width, 100vw);
+  overflow-y: auto;
   z-index: var(--z-index-drawer);
   transition: transform var(--drawer-animation-timing-function, ease-out)
     var(--drawer-animation-timing, 250ms);
@@ -6154,7 +6108,6 @@ button.Accordion__trigger {
     transition: none !important;
   }
 }
-
 :root {
   --bottom-sheet-width: 40rem;
   --bottom-sheet-background-color: #fff;
@@ -6189,7 +6142,6 @@ button.Accordion__trigger {
   padding-bottom: var(--space-small);
   margin-bottom: var(--space-small);
 }
-
 :root {
   --section-header-description-color: var(--gray-60);
 }
@@ -6248,7 +6200,6 @@ button.Accordion__trigger {
     justify-self: end;
   }
 }
-
 :root {
   --page-header-overline-color: var(--gray-60);
 }
@@ -6268,7 +6219,6 @@ button.Accordion__trigger {
   font-size: var(--text-size-base);
   word-break: break-word;
 }
-
 :root {
   --empty-state-border-color: var(--gray-30);
 }
@@ -6298,7 +6248,6 @@ button.Accordion__trigger {
   padding-top: var(--space-small);
   border-top: 1px solid var(--empty-state-border-color);
 }
-
 :root {
   --action-menu-border-color: var(--gray-30);
   --action-menu-background-color: #fff;
@@ -6326,7 +6275,6 @@ button.Accordion__trigger {
   --action-list-text-color: var(--accent-warning-light);
   --action-list-item-icon-color: var(--accent-warning-light);
 }
-
 :root {
   --action-list-background-color: #fff;
   --action-list-text-color: var(--gray-90);
@@ -6534,9 +6482,9 @@ button.Accordion__trigger {
   .ActionListItem__description {
   color: var(--action-list-item-disabled-text-color);
 }
-
 :root {
   --tree-view-padding: 1rem;
+  --tree-view-row-height: 36px;
   --tree-view-focus-ring-color: var(--focus-light);
   --tree-view-highlight-background: var(--accent-light);
 }
@@ -6561,6 +6509,17 @@ button.Accordion__trigger {
   outline-offset: -1px;
 }
 
+/* Virtualized rows are absolutely positioned and the list layout owns their
+   spacing, so the flex container's flow, gap and padding are cleared. The tree
+   needs a definite width from an ancestor — absolutely positioned rows give it
+   no intrinsic one. */
+.TreeView--virtualized {
+  display: block;
+  gap: 0;
+  padding: 0;
+  position: relative;
+}
+
 .TreeView .TreeView__item {
   display: flex;
   align-items: center;
@@ -6572,6 +6531,13 @@ button.Accordion__trigger {
   transform: translateZ(0);
 }
 
+/* Vertical padding makes virtualized rows overlap and swallow the gap: the
+   virtualizer measures a row's content box first, its border box after. */
+.TreeView--virtualized .TreeView__item {
+  padding-block: 0;
+  min-height: var(--tree-view-row-height);
+}
+
 .TreeView .TreeView__item .TreeView__chevron {
   all: unset;
   display: flex;
@@ -6604,7 +6570,6 @@ button.Accordion__trigger {
 .TreeView .TreeView__item[aria-selected='true'] {
   background: var(--tree-view-highlight-background);
 }
-
 /**
  * Compact density preset for constrained viewports.
  *
@@ -6655,7 +6620,6 @@ button.Accordion__trigger {
 }
 
 /* TopBar buttons: vertical icon-above-label layout in compact mode */
-
 .cauldron--density-compact .TopBar li button:not(.Link) {
   display: flex;
   align-items: center;
@@ -6663,7 +6627,6 @@ button.Accordion__trigger {
 }
 
 /* TopBar: restore padding on items containing text links (not icon buttons) */
-
 .cauldron--density-compact .TopBar > ul > li:has(button.Link) {
   padding: 0 var(--space-small);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "7.5.0-canary.fa33d43b",
+  "version": "7.6.0-canary.02bddc70",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",
@@ -14,7 +14,7 @@
   },
   "devDependencies": {
     "autoprefixer": "^10.5.0",
-    "postcss": "^8.5.15",
+    "postcss": "^8.5.28",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1"
   },