@deque/cauldron-styles 6.26.0 → 6.27.0-canary.06fc1451

package/dist/index.css

@@ -195,6 +195,7 @@
 
 :root {
   --workspace-background-color: #f0f2f5;
+  --heading-text-color: var(--header-text-color-dark);
 }
 
 .cauldron--theme-dark {
@@ -244,7 +245,6 @@ h4,
 h5,
 h6,
 [role='heading'] {
-  --heading-text-color: var(--header-text-color-dark);
   color: var(--heading-text-color);
 }
 
@@ -376,7 +376,7 @@ p {
 
 .cauldron--theme-dark .Layout {
   background-color: var(--dark-workspace-color);
-  color: var(--white);
+  color: var(--layout-dark-color, var(--white));
 }
 
 .cauldron--theme-dark .Layout .Main:focus {
@@ -1497,8 +1497,10 @@ button.Link {
   min-width: var(--button-thin-height);
 }
 
+/* Custom property for button sibling gap. Will be deprecated in https://github.com/dequelabs/cauldron/issues/1944 */
+
 [class*='Button--'] + [class*='Button--'] {
-  margin-left: var(--space-smallest);
+  margin-left: var(--button-sibling-gap, var(--space-smallest));
 }
 
 /* Dark Theme */
@@ -1701,6 +1703,12 @@ button.Link {
     --button-background-color-error-disabled
   );
   --icon-button-icon-size: var(--icon-size);
+  --icon-button-hover-shadow-primary: 0 0 0 1px
+    var(--icon-button-outline-color-primary);
+  --icon-button-hover-shadow-secondary: 0 0 0 1px
+    var(--icon-button-outline-color-secondary);
+  --icon-button-hover-shadow-error: 0 0 0 1px
+    var(--icon-button-outline-color-error);
 }
 
 .IconButton {
@@ -1797,7 +1805,7 @@ a.IconButton {
 }
 
 .IconButton--primary:not([disabled]):not([aria-disabled='true']):hover:before {
-  box-shadow: 0 0 0 1px var(--icon-button-outline-color-primary);
+  box-shadow: var(--icon-button-hover-shadow-primary);
 }
 
 .IconButton--primary:active {
@@ -1816,14 +1824,14 @@ a.IconButton {
 .IconButton--tertiary:not([disabled]):not([aria-disabled='true']):is(
     :hover
   ):before {
-  box-shadow: 0 0 0 1px var(--icon-button-outline-color-secondary);
+  box-shadow: var(--icon-button-hover-shadow-secondary);
 }
 
 .IconButton--tertiary:is(
-    :not(:hover, :focus, :active),
-    [disabled],
-    [aria-disabled='true']
-  ) {
+  :not(:hover, :focus, :active),
+  [disabled],
+  [aria-disabled='true']
+) {
   border-color: transparent;
   background-color: transparent;
 }
@@ -1839,7 +1847,7 @@ a.IconButton {
 }
 
 .IconButton--error:not([disabled]):not([aria-disabled='true']):hover:before {
-  box-shadow: 0 0 0 1px var(--icon-button-outline-color-error);
+  box-shadow: var(--icon-button-hover-shadow-error);
 }
 
 .IconButton--error:active {
@@ -1875,6 +1883,17 @@ a.IconButton {
   --icon-button-background-color-error-active: var(
     --button-background-color-error-active
   );
+
+  /* Hover shadows (double ring in dark theme) */
+  --icon-button-hover-shadow-primary:
+    0 0 0 1px var(--icon-button-outline-shadow-color),
+    0 0 0 2px var(--icon-button-outline-color-primary);
+  --icon-button-hover-shadow-secondary:
+    0 0 0 1px var(--icon-button-outline-shadow-color),
+    0 0 0 2px var(--icon-button-outline-color-secondary);
+  --icon-button-hover-shadow-error:
+    0 0 0 1px var(--icon-button-outline-shadow-color),
+    0 0 0 2px var(--icon-button-outline-color-error);
 }
 
 .cauldron--theme-dark .IconButton--primary {
@@ -1911,34 +1930,9 @@ a.IconButton {
   color: var(--icon-button-disabled-color);
 }
 
-.cauldron--theme-dark
-  .IconButton--primary:not([disabled]):not(
-    [aria-disabled='true']
-  ):hover:before {
-  box-shadow: 0 0 0 1px var(--icon-button-outline-shadow-color),
-    0 0 0 2px var(--icon-button-outline-color-primary);
-}
-
-.cauldron--theme-dark
-  .IconButton--secondary:not([disabled]):not(
-    [aria-disabled='true']
-  ):hover:before,
-.cauldron--theme-dark
-  .IconButton--tertiary:not([disabled]):not(
-    [aria-disabled='true']
-  ):hover:before {
-  box-shadow: 0 0 0 1px var(--icon-button-outline-shadow-color),
-    0 0 0 2px var(--icon-button-outline-color-secondary);
-}
-
-.cauldron--theme-dark
-  .IconButton--error:not([disabled]):not([aria-disabled='true']):hover:before {
-  box-shadow: 0 0 0 1px var(--icon-button-outline-shadow-color),
-    0 0 0 2px var(--icon-button-outline-color-error);
-}
-
 .cauldron--theme-dark .IconButton:focus:before {
-  box-shadow: 0 0 0 2px var(--icon-button-outline-shadow-color),
+  box-shadow:
+    0 0 0 2px var(--icon-button-outline-shadow-color),
     0 0 0 4px var(--button-focus-ring-color, --focus);
 }
 
@@ -1954,10 +1948,16 @@ a.IconButton {
   --dialog-footer-background-color: var(--gray-20);
   --dialog-heading-text-color: var(--header-text-color-dark);
   --dialog-padding: var(--space-small);
+  --dialog-header-padding: var(--space-smallest) 0;
+  --dialog-header-border: 1px solid var(--dialog-border-color);
+  --dialog-content-padding: var(--dialog-padding);
+  --dialog-footer-padding: var(--dialog-padding);
+  --dialog-footer-border: 1px solid var(--dialog-border-color);
   --dialog-header-height: 2.625rem;
   --dialog-close-button-size: var(--target-size-minimum);
   --dialog-vertical-offset: 6.25rem;
   --dialog-bottom-spacing: 1.875rem;
+  --dialog-content-line-height: inherit;
 }
 
 .cauldron--theme-dark {
@@ -2000,12 +2000,12 @@ a.IconButton {
 .Dialog__header {
   display: flex;
   background-color: var(--dialog-header-background-color);
-  border-bottom: 1px solid var(--dialog-border-color);
+  border-bottom: var(--dialog-header-border);
   align-items: center;
   justify-content: space-between;
   min-height: var(--dialog-header-height);
   font-weight: var(--font-weight-bold);
-  padding: var(--space-smallest) 0;
+  padding: var(--dialog-header-padding);
   gap: var(--space-smallest);
 }
 
@@ -2071,7 +2071,8 @@ a.IconButton {
 }
 
 .Dialog__content {
-  padding: var(--dialog-padding);
+  padding: var(--dialog-content-padding);
+  line-height: var(--dialog-content-line-height);
 }
 
 .Dialog__content p:first-child {
@@ -2084,8 +2085,8 @@ a.IconButton {
 
 .Dialog__footer {
   background-color: var(--dialog-footer-background-color);
-  border-top: 1px solid var(--dialog-border-color);
-  padding: var(--dialog-padding);
+  border-top: var(--dialog-footer-border);
+  padding: var(--dialog-footer-padding);
 }
 
 /**
@@ -2129,6 +2130,15 @@ a.IconButton {
   border-width: 4px;
 }
 
+/* Compensate for the larger dark theme border so Dialog dimensions remain consistent */
+
+.cauldron--theme-dark .Dialog__content {
+  --dialog-content-padding-compensation: 3px;
+  padding: calc(
+    var(--dialog-content-padding) - var(--dialog-content-padding-compensation)
+  );
+}
+
 .cauldron--theme-dark .Dialog__header {
   border-bottom: 1px solid var(--stroke-dark);
 }
@@ -2160,6 +2170,33 @@ a.IconButton {
   border-top: none;
 }
 
+.cauldron--theme-dark .Alert .Dialog__inner {
+  background-color: var(--accent-dark);
+}
+
+.cauldron--theme-dark .Alert .Dialog__header {
+  background-color: var(--accent-medium);
+  border-bottom: none;
+}
+
+.cauldron--theme-dark .Alert .Dialog__footer {
+  background-color: transparent;
+  border-top: none;
+}
+
+.cauldron--theme-dark .Alert .Dialog__content .Link,
+.cauldron--theme-dark .Alert .Dialog__content .Link:hover {
+  color: currentColor;
+}
+
+/* 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;
@@ -2174,7 +2211,7 @@ a.IconButton {
 .Link {
   text-decoration: underline;
   color: var(--link-text-color);
-  padding: var(--space-quarter);
+  padding: var(--link-padding, var(--space-quarter));
   background: transparent;
   vertical-align: baseline;
 }
@@ -2190,8 +2227,8 @@ a.IconButton {
 }
 
 .Link:where(:has(.Icon)) {
-  max-width: -moz-max-content;
-  max-width: max-content;
+  width: -moz-fit-content;
+  width: fit-content;
   display: inline-flex;
   align-items: center;
   gap: var(--space-half);
@@ -2205,6 +2242,8 @@ a.IconButton {
   --options-menu-hover-background-color: var(--gray-20);
   --options-menu-active-border-color: var(--accent-primary);
   --options-menu-border-color: var(--gray-40);
+  --options-menu-width: auto;
+  --options-menu-item-font-size: var(--text-size-smaller);
 }
 
 .cauldron--theme-dark {
@@ -2219,6 +2258,7 @@ a.IconButton {
 .OptionsMenu {
   position: relative;
   color: var(--text-color-base);
+  width: var(--options-menu-width);
 }
 
 .OptionsMenu__trigger {
@@ -2243,7 +2283,7 @@ a.IconButton {
   color: var(--options-menu-text-color);
   display: none;
   position: absolute;
-  font-size: var(--text-size-smaller);
+  font-size: var(--options-menu-item-font-size);
   list-style-type: none;
   margin: 0;
   padding: 0;
@@ -2349,12 +2389,18 @@ a.IconButton {
   --select-min-height: 33px;
   --select-width: 300px;
   --select-arrow-spacing: 10px;
+  --field-select-max-width: 100%;
+  --field-select-margin-bottom: var(--space-small);
 }
 
 .Field__select {
   display: flex;
   flex-direction: column;
-  margin-bottom: var(--space-small);
+  margin-bottom: var(--field-select-margin-bottom);
+}
+
+.Field__select + .Field__select {
+  margin-top: 0;
 }
 
 .Field__select--disabled {
@@ -2364,7 +2410,7 @@ a.IconButton {
 .Field__select--wrapper {
   position: relative;
   width: var(--select-width);
-  max-width: 100%;
+  max-width: var(--field-select-max-width);
 }
 
 .arrow-down {
@@ -2405,7 +2451,8 @@ a.IconButton {
 
 .Field__select--wrapper select:focus {
   border-color: var(--field-border-color-focus);
-  box-shadow: 0 0 0 1px var(--field-border-color-focus),
+  box-shadow:
+    0 0 0 1px var(--field-border-color-focus),
     0 0 5px var(--field-border-color-focus-glow),
     inset 0 1px 2px rgba(0, 0, 0, 0.05);
 }
@@ -2414,26 +2461,28 @@ a.IconButton {
   border-color: var(--field-border-color-focus-hover);
 }
 
-.Field__select--wrapper select:invalid,
+.Field__select--wrapper select:user-invalid,
 .Field--has-error select {
   border-width: 1px;
   border-color: var(--field-border-color-error);
 }
 
+.Field__select--wrapper select:user-invalid:hover,
 .Field__select--wrapper.Field--has-error select:hover {
   border-color: var(--field-border-color-error-hover);
   box-shadow: 0 0 0 1px var(--field-border-color-error-hover);
 }
 
-.Field__select--wrapper select:invalid:focus,
+.Field__select--wrapper select:user-invalid:focus,
 .Field__select--wrapper.Field--has-error select:focus {
   border-color: var(--field-border-color-error);
-  box-shadow: rgba(0, 0, 0, 0.05) 0 1px 2px 0 inset,
+  box-shadow:
+    rgba(0, 0, 0, 0.05) 0 1px 2px 0 inset,
     var(--field-border-color-error) 0 0 0 1px,
     var(--field-border-color-error-focus-glow) 0 0 5px 0;
 }
 
-.Field__select--wrapper select:invalid:focus:hover,
+.Field__select--wrapper select:user-invalid:focus:hover,
 .Field__select--wrapper.Field--has-error select:focus:hover {
   border-color: var(--field-border-color-error-hover);
 }
@@ -2672,7 +2721,7 @@ a.IconButton {
 
 .Toast {
   top: var(--top-bar-height);
-  position: fixed;
+  position: var(--toast-position, fixed);
   right: 0;
   left: 0;
   color: #0b0e11;
@@ -2943,22 +2992,31 @@ button.TooltipTabstop {
   --top-bar-accent-warning-other: var(--accent-danger-light);
   --top-bar-height: 70px;
   --top-bar-height-thin: 43px;
+  --top-bar-position: fixed;
+  --top-bar-padding-inline-start: 0;
+  --top-bar-menu-flex: auto;
+  --top-bar-button-max-width: none;
+  --top-bar-button-flex-direction: row;
+  --top-bar-button-font-size: var(--text-size-small);
+  --top-bar-item-padding: 0 var(--space-small);
+  --top-bar-border-bottom: solid 1px var(--top-bar-border-bottom-color);
 }
 
 .TopBar {
-  position: fixed;
+  position: var(--top-bar-position);
   width: 100%;
   height: var(--top-bar-height);
   top: 0;
   flex: none;
-  flex-direction: row;
   box-sizing: border-box;
   z-index: var(--z-index-top-bar);
   display: flex;
   align-items: center;
   background-color: var(--top-bar-background-color);
   color: var(--top-bar-text-color);
-  border-bottom: solid 1px var(--top-bar-border-bottom-color);
+  border-bottom: var(--top-bar-border-bottom);
+  -webkit-padding-start: var(--top-bar-padding-inline-start);
+          padding-inline-start: var(--top-bar-padding-inline-start);
 }
 
 .TopBar--thin .TopBar {
@@ -2969,12 +3027,15 @@ button.TooltipTabstop {
   list-style-type: none;
   display: flex;
   align-items: center;
-  flex: auto;
+  flex: var(--top-bar-menu-flex);
 }
 
 .TopBar li button {
   background: transparent;
   color: inherit;
+  max-width: var(--top-bar-button-max-width);
+  font-size: var(--top-bar-button-font-size);
+  flex-direction: var(--top-bar-button-flex-direction);
 }
 
 .TopBar > ul > li {
@@ -2989,7 +3050,7 @@ button.TooltipTabstop {
 }
 
 .TopBar > ul > li:not(.TopBar__menu-trigger) {
-  padding: 0 var(--space-small);
+  padding: var(--top-bar-item-padding);
   font-size: var(--text-size-small);
   height: var(--top-bar-height);
   display: flex;
@@ -3086,10 +3147,7 @@ button.TooltipTabstop {
   --top-bar-border-bottom-color: var(--gray-70);
   --top-bar-text-color: var(--accent-light);
   --top-bar-background-color-active: #0b0e11;
-}
-
-.cauldron--theme-dark .TopBar {
-  border-bottom: none;
+  --top-bar-border-bottom: none;
 }
 
 .cauldron--theme-dark .TopBar [aria-current='page'] {
@@ -3147,7 +3205,8 @@ button.TooltipTabstop {
   border-radius: 2px;
 }
 
-.SkipLink span {
+.SkipLink .SkipLink__item--first,
+.SkipLink .SkipLink__item--second {
   display: block;
 }
 
@@ -3352,6 +3411,9 @@ button.TooltipTabstop {
   --code-text-color: var(--accent-primary-active);
   --code-border-color: var(--stroke-light);
   --code-background-color: var(--background-light);
+  --code-padding: var(--space-smaller);
+  --code-border: 1px solid var(--code-border-color);
+  --code-display: block;
 }
 
 .cauldron--theme-dark {
@@ -3370,10 +3432,10 @@ button.TooltipTabstop {
 }
 
 .Code.hljs {
-  display: block;
-  padding: var(--space-smaller);
+  display: var(--code-display);
+  padding: var(--code-padding);
   background: var(--code-background-color);
-  border: 1px solid var(--code-border-color);
+  border: var(--code-border);
   border-radius: 3px;
   color: var(--code-text-color);
   word-break: break-all;
@@ -3586,10 +3648,17 @@ button.TooltipTabstop {
     var(--space-largest);
   --tab-panel-horizontal-padding: var(--space-large) var(--space-small);
   --tabs-active-text-color: var(--accent-primary-active);
+  --tab-height: 2.875rem;
+  --tab-font-size: inherit;
+  --tab-flex: initial;
+  --tab-panel-border: none;
+  --tabs-horizontal-border-bottom: 1px solid var(--tabs-border-color);
+  --tabs-width: fit-content;
 }
 
 .cauldron--theme-dark {
   --tabs-border-color: var(--accent-dark);
+  --tabs-horizontal-border-bottom: 1px solid var(--tabs-border-color);
   --tab-shadow-color: var(--accent-info);
   --tab-panel-background-color: var(--accent-medium);
   --tab-inactive-background-color: var(--accent-medium);
@@ -3601,8 +3670,7 @@ button.TooltipTabstop {
 }
 
 .Tabs {
-  width: -moz-fit-content;
-  width: fit-content;
+  width: var(--tabs-width);
 }
 
 .Tabs--vertical {
@@ -3621,7 +3689,7 @@ button.TooltipTabstop {
 
 .Tabs--horizontal {
   width: 100%;
-  border-bottom: 1px solid var(--tabs-border-color);
+  border-bottom: var(--tabs-horizontal-border-bottom);
   background-color: var(--tab-inactive-background-color);
 }
 
@@ -3643,12 +3711,14 @@ button.TooltipTabstop {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 2.875rem;
+  height: var(--tab-height);
   white-space: nowrap;
   list-style-type: none;
   background-color: var(--tab-inactive-background-color);
   color: var(--tab-inactive-text-color);
   padding: var(--space-small);
+  font-size: var(--tab-font-size);
+  flex: var(--tab-flex);
 }
 
 .Tabs--vertical .Tab {
@@ -3690,6 +3760,7 @@ button.TooltipTabstop {
   overflow-wrap: break-word;
   color: var(--tab-panel-color);
   background-color: var(--tab-panel-background-color);
+  border: var(--tab-panel-border);
 }
 
 .TabPanel > * {
@@ -3709,6 +3780,7 @@ button.TooltipTabstop {
   --tag-text-color: var(--gray-90);
   --tag-background-color: var(--background-light);
   --tag-border-color: var(--gray-30);
+  --tag-margin: 0;
 
   --tag-height: var(--button-height);
   --tag-small-height: 1.5rem;
@@ -3731,6 +3803,7 @@ button.TooltipTabstop {
   justify-content: center;
   align-items: center;
   padding: 0 var(--space-smallest);
+  margin: var(--tag-margin);
   min-height: var(--tag-height);
   font-size: var(--tag-font-size);
 }
@@ -4227,14 +4300,16 @@ button.TooltipTabstop {
   --panel-padding: var(--space-small);
   --panel-divider-border-color: var(--gray-40);
   --panel-content-color: var(--gray-80);
+  --panel-border: 1px solid var(--panel-border-color);
+  --panel-box-shadow: var(--drop-shadow-raised);
 }
 
 .Panel {
   padding: var(--panel-padding);
   margin: 0;
-  border: 1px solid var(--panel-border-color);
+  border: var(--panel-border);
   border-radius: 3px;
-  box-shadow: var(--drop-shadow-raised);
+  box-shadow: var(--panel-box-shadow);
   background-color: var(--panel-background-color);
   word-break: break-word;
   color: var(--panel-content-color);
@@ -4646,23 +4721,36 @@ fieldset.Panel {
   --progress-bar-background-color: var(--accent-dark);
   --progress-bar-fill-color: var(--accent-info-light);
   --progress-bar-animation-timing: 150ms;
+  --progress-bar-padding: 2px;
+  --progress-bar-border-radius: calc((var(--space-small) * 0.5) + 2px);
+  --progress-bar-fill-height: var(--space-small);
+  --progress-bar-fill-border-radius: calc(var(--space-small) * 0.5);
+  --progress-bar-fill-min-width: var(--space-small);
 }
 
 .ProgressBar {
   background-color: var(--progress-bar-background-color);
-  padding: 2px;
-  border-radius: calc((var(--space-small) * 0.5) + 2px);
+  padding: var(--progress-bar-padding);
+  border-radius: var(--progress-bar-border-radius);
   margin-bottom: var(--space-smallest);
 }
 
 .ProgressBar--fill {
-  border-radius: calc(var(--space-small) * 0.5);
+  border-radius: var(--progress-bar-fill-border-radius);
   background-color: var(--progress-bar-fill-color);
-  height: var(--space-small);
-  min-width: var(--space-small);
+  height: var(--progress-bar-fill-height);
+  min-width: var(--progress-bar-fill-min-width);
   transition: width linear var(--progress-bar-animation-timing);
 }
 
+.ProgressBar--thin {
+  --progress-bar-padding: 3px;
+  --progress-bar-border-radius: 3px;
+  --progress-bar-fill-height: var(--space-half);
+  --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;
@@ -5115,6 +5203,9 @@ fieldset.Panel {
   --accordion-trigger-box-shadow-hover: var(--accent-primary);
   --accordion-trigger-border-color: var(--gray-40);
   --accordion-trigger-icon-color: var(--gray-90);
+  --accordion-trigger-padding: calc(var(--space-small) - var(--space-half));
+  --accordion-trigger-text-decoration: underline solid
+    var(--accordion-trigger-text-color);
   --accordion-panel-background-color: var(--white);
   --accordion-panel-text-color: var(--gray-90);
   --accordion-panel-border-color: var(--gray-40);
@@ -5142,7 +5233,7 @@ fieldset.Panel {
 .Accordion__trigger,
 button.Accordion__trigger {
   background-color: var(--accordion-trigger-background-color);
-  padding: calc(var(--space-small) - var(--space-half));
+  padding: var(--accordion-trigger-padding);
   width: 100%;
   display: flex;
   align-items: center;
@@ -5151,8 +5242,8 @@ button.Accordion__trigger {
   font-size: var(--text-size-small);
   margin-top: var(--space-small);
   color: var(--accordion-trigger-text-color);
-  -webkit-text-decoration: underline solid var(--accordion-trigger-text-color);
-          text-decoration: underline solid var(--accordion-trigger-text-color);
+  -webkit-text-decoration: var(--accordion-trigger-text-decoration);
+          text-decoration: var(--accordion-trigger-text-decoration);
 }
 
 .Accordion__trigger[aria-expanded='true'] {
@@ -5226,7 +5317,7 @@ button.Accordion__trigger {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 0 var(--space-small);
-  padding: var(--space-large);
+  padding: var(--notice-padding, var(--space-large));
   align-items: start;
   border-radius: 4px;
   border: 1px solid var(--notice-border-color);
@@ -5329,6 +5420,7 @@ button.Accordion__trigger {
   --combobox-listbox-background-color: var(--accent-medium);
   --combobox-group-label-background-color: var(--accent-dark);
   --combobox-option-selected-icon-color: var(--accent-info);
+  --combobox-arrow-color: var(--text-color-light);
 }
 
 .Combobox :where(.TextFieldWrapper) {
@@ -5437,6 +5529,7 @@ button.Accordion__trigger {
   position: absolute;
   right: 0;
   pointer-events: none;
+  color: var(--combobox-arrow-color, currentColor);
 }
 
 .Combobox__arrow:before {
@@ -6313,3 +6406,66 @@ button.Accordion__trigger {
   .ActionListItem__description {
   color: var(--action-list-item-disabled-text-color);
 }
+
+/**
+ * Compact density preset for constrained viewports.
+ *
+ * Apply the `.cauldron--density-compact` class to the root element (e.g. <body>)
+ * alongside the theme class to get tighter sizing across all components.
+ * This is designed for embedded UIs like browser extension panels.
+ *
+ * Works orthogonally to theme classes:
+ *   <body class="cauldron--theme-dark cauldron--density-compact">
+ */
+
+.cauldron--density-compact {
+  /* TopBar: static positioning for embedded contexts, compact button layout */
+  --top-bar-position: static;
+  --top-bar-padding-inline-start: var(--space-small);
+  --top-bar-menu-flex: initial;
+  --top-bar-button-max-width: 80px;
+  --top-bar-button-flex-direction: column;
+  --top-bar-button-font-size: var(--text-size-smallest);
+  --top-bar-item-padding: 0;
+
+  /* Tabs: fill width, smaller font */
+  --tabs-width: auto;
+  --tab-font-size: var(--text-size-small);
+  --tab-flex: 1;
+
+  /* Tags: use small variant sizing by default */
+  --tag-height: var(--tag-small-height);
+  --tag-font-size: var(--text-size-smaller);
+
+  /* Dialog: viewport-aware positioning for short viewports (e.g. docked devtools) */
+  --dialog-vertical-offset: clamp(8px, calc(18vh - 50px), 100px);
+  --dialog-content-line-height: 1.4;
+
+  /* OptionsMenu: auto-width for narrow viewports */
+  --options-menu-width: auto;
+
+  /* Toast: static positioning (no fixed TopBar to anchor to) */
+  --toast-position: static;
+
+  /* Field select: constrained width */
+  --select-width: clamp(0px, 25rem, 100%);
+
+  /* Code: inline compact display */
+  --code-display: inline;
+  --code-padding: var(--space-quarter) var(--space-half);
+  --code-border: none;
+}
+
+/* TopBar buttons: vertical icon-above-label layout in compact mode */
+
+.cauldron--density-compact .TopBar li button:not(.Link) {
+  display: flex;
+  align-items: center;
+  white-space: normal;
+}
+
+/* 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": "6.26.0",
+  "version": "6.27.0-canary.06fc1451",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",