@deque/cauldron-styles 6.0.0 → 6.1.0-canary.33d6b541

package/dist/index.css

@@ -423,6 +423,8 @@ p {
   --button-text-color-light: var(--white);
   --button-focus-ring-color: var(--focus-light);
   --button-thin-height: 23px;
+
+  --button-height: 36px;
 }
 
 .Button--primary,
@@ -436,7 +438,7 @@ p {
   padding: 0 16px;
   position: relative;
   text-align: center;
-  min-height: 36px;
+  min-height: var(--button-height);
   min-width: 100px;
   display: inline-grid;
   grid-auto-flow: column;
@@ -512,7 +514,7 @@ button.Link {
   background-color: var(--button-background-color-primary-disabled);
 }
 
-.Button--primary:active {
+.Button--primary:not([disabled]):not([aria-disabled='true']):active {
   background: var(--button-background-color-primary-active);
 }
 
@@ -528,7 +530,7 @@ button.Link {
   background-color: var(--button-background-color-secondary-disabled);
 }
 
-.Button--secondary:active {
+.Button--secondary:not([disabled]):not([aria-disabled='true']):active {
   background-color: var(--button-background-color-secondary-active);
 }
 
@@ -545,7 +547,7 @@ button.Link {
   background-color: var(--button-background-color-error-disabled);
 }
 
-.Button--error:active {
+.Button--error:not([disabled]):not([aria-disabled='true']):active {
   background-color: var(--button-background-color-error-active);
 }
 
@@ -642,12 +644,15 @@ button.Link {
   color: var(--dark-workspace-color);
 }
 
-.cauldron--theme-dark .Button--primary:active,
-.cauldron--theme-dark .Button--secondary:active {
+.cauldron--theme-dark
+  .Button--primary:not([disabled]):not([aria-disabled='true']):active,
+.cauldron--theme-dark
+  .Button--secondary:not([disabled]):not([aria-disabled='true']):active {
   color: var(--accent-medium);
 }
 
-.cauldron--theme-dark .Button--error:active {
+.cauldron--theme-dark
+  .Button--error:not([disabled]):not([aria-disabled='true']):active {
   background-color: #fea7a6;
   color: var(--accent-medium);
 }
@@ -685,38 +690,37 @@ button.Link {
 }
 
 :root {
+  /* Primary */
+  --icon-button-primary-color: var(--button-text-color-light);
   --icon-button-background-color-primary: var(
     --button-background-color-primary
   );
-  --icon-button-background-color-primary-disabled: var(
-    --button-background-color-primary-disabled
-  );
   --icon-button-background-color-primary-active: var(
     --button-background-color-primary-active
   );
   --icon-button-outline-color-primary: var(--button-outline-color-primary);
 
+  --icon-button-large-height: var(--button-height);
+
+  /* Secondary */
+  --icon-button-secondary-color: var(--button-text-color-dark);
   --icon-button-background-color-secondary: var(
     --button-background-color-secondary
   );
-  --icon-button-background-color-secondary-disabled: var(
-    --button-background-color-secondary-disabled
-  );
   --icon-button-background-color-secondary-active: var(
     --button-background-color-secondary-active
   );
   --icon-button-outline-color-secondary: var(--button-outline-color-secondary);
   --icon-button-border-color-secondary: var(--gray-40);
 
+  /* Error */
   --icon-button-background-color-error: var(--button-background-color-error);
-  --icon-button-background-color-error-disabled: var(
-    --button-background-color-error-disabled
-  );
+  --icon-button-outline-color-error: var(--button-outline-color-error);
   --icon-button-background-color-error-active: var(
     --button-background-color-error-active
   );
-  --icon-button-outline-color-error: var(--button-outline-color-error);
 
+  /* Deprecated variables */
   --icon-button-content-color-light-disabled: #ccc;
   --icon-button-background-color-light: #dadada;
   --icon-button-background-color-light-active: #c2c2c2;
@@ -727,6 +731,12 @@ button.Link {
   --icon-button-background-color-dark-disabled: var(--accent-medium);
   --icon-button-background-color-dark-active: var(--accent-dark);
   --icon-button-outline-color-dark: var(--icon-button-background-color-dark);
+  --icon-button-background-color-secondary-disabled: var(
+    --button-background-color-secondary-disabled
+  );
+  --icon-button-background-color-error-disabled: var(
+    --button-background-color-error-disabled
+  );
 }
 
 .IconButton {
@@ -778,21 +788,26 @@ a.IconButton {
   pointer-events: none;
 }
 
-.IconButton--secondary[aria-disabled='true'],
-.IconButton--secondary[disabled] {
+.IconButton--large {
+  height: var(--icon-button-large-height);
+  width: var(--icon-button-large-height);
+}
+
+.IconButton--secondary:is([aria-disabled='true'], [disabled]),
+.IconButton--secondary:is([aria-disabled='true'], [disabled]):active {
   color: var(--disabled);
   background-color: var(--button-background-color-secondary-disabled);
   cursor: default;
 }
 
-.IconButton--primary[aria-disabled='true'],
-.IconButton--primary[disabled] {
+.IconButton--primary:is([aria-disabled='true'], [disabled]),
+.IconButton--primary:is([aria-disabled='true'], [disabled]):active {
   background-color: var(--button-background-color-primary-disabled);
   cursor: default;
 }
 
-.IconButton--error[aria-disabled='true'],
-.IconButton--error[disabled] {
+.IconButton--error:is([aria-disabled='true'], [disabled]),
+.IconButton--error:is([aria-disabled='true'], [disabled]):active {
   color: var(--button-text-color-light);
   background-color: var(--button-background-color-error-disabled);
   cursor: default;
@@ -804,7 +819,7 @@ a.IconButton {
 
 .IconButton--primary {
   background-color: var(--icon-button-background-color-primary);
-  color: var(--button-text-color-light);
+  color: var(--icon-button-primary-color);
 }
 
 .IconButton--primary:not([disabled]):not([aria-disabled='true']):hover:before {
@@ -818,10 +833,12 @@ a.IconButton {
 .IconButton--secondary {
   border: 1px solid var(--icon-button-border-color-secondary);
   background-color: var(--icon-button-background-color-secondary);
-  color: var(--button-text-color-dark);
+  color: var(--icon-button-secondary-color);
 }
 
-.IconButton--secondary:not([disabled]):not([aria-disabled='true']):hover:before {
+.IconButton--secondary:not([disabled]):not(
+    [aria-disabled='true']
+  ):hover:before {
   box-shadow: 0 0 0 1px var(--icon-button-outline-color-secondary);
 }
 
@@ -845,57 +862,91 @@ a.IconButton {
 /* Dark Theme */
 
 .cauldron--theme-dark {
-  --icon-button-border-color-secondary: var(--accent-medium);
-  --icon-button-background-color-secondary: var(--accent-medium);
-  --icon-button-background-color-primary: var(--gray-20);
   --icon-button-icon-color: var(--white);
-}
-
-.cauldron--theme-dark .IconButton--error {
-  background-color: var(--accent-dark);
-  color: var(--white);
+  --icon-button-outline-shadow-color: var(--accent-medium);
+  --icon-button-disabled-color: var(--dark-workspace-color);
+  --icon-button-active-color: var(--accent-medium);
+
+  /* Primary */
+  --icon-button-primary-color: var(--white);
+  --icon-button-background-color-primary: var(--accent-medium);
+  --icon-button-background-color-primary-active: var(--accent-info-active);
+  --icon-button-outline-color-primary: var(--accent-info);
+  --icon-button-border-color-primary: var(--accent-info);
+
+  /* Secondary */
+  --icon-button-border-color-secondary: var(--accent-light);
+  --icon-button-background-color-secondary: var(--accent-medium);
+  --icon-button-secondary-color: var(--white);
+  --icon-button-background-color-secondary-active: var(--accent-light);
+  --icon-button-outline-color-secondary: var(--accent-light);
+
+  /* Error */
+  --icon-button-background-color-error: var(--accent-medium);
+  --icon-button-border-color-error: var(--accent-danger);
+  --icon-button-outline-color-error: var(--accent-danger);
+  --icon-button-background-color-error-active: var(
+    --button-background-color-error-active
+  );
 }
 
 .cauldron--theme-dark .IconButton--primary {
-  color: var(--gray-90);
+  border: 2px solid var(--icon-button-border-color-primary);
 }
 
-.cauldron--theme-dark .IconButton--primary[aria-disabled='true'],
-.cauldron--theme-dark .IconButton--primary[disabled] {
-  background-color: var(--gray-20);
-  color: var(--gray-40);
+.cauldron--theme-dark .IconButton--secondary {
+  border-width: 2px;
 }
 
-.cauldron--theme-dark .IconButton--secondary[aria-disabled='true'],
-.cauldron--theme-dark .IconButton--secondary[disabled] {
-  color: #5d676f;
+.cauldron--theme-dark .IconButton--error {
+  border: 2px solid var(--icon-button-border-color-error);
 }
 
-.cauldron--theme-dark .IconButton--secondary {
-  color: var(--white);
+.cauldron--theme-dark
+  .IconButton--primary:is([aria-disabled='true'], [disabled]),
+.cauldron--theme-dark
+  .IconButton--secondary:is([aria-disabled='true'], [disabled]),
+.cauldron--theme-dark
+  .IconButton--error:is([aria-disabled='true'], [disabled]) {
+  color: var(--icon-button-disabled-color);
 }
 
-.cauldron--theme-dark .IconButton--error {
-  background-color: var(--accent-danger);
-  color: var(--accent-dark);
+.cauldron--theme-dark .IconButton--primary:active,
+.cauldron--theme-dark .IconButton--secondary:active,
+.cauldron--theme-dark .IconButton--error:active {
+  color: var(--icon-button-active-color);
 }
 
-.cauldron--theme-dark .IconButton--primary:active {
-  background-color: #e5ebec;
+.cauldron--theme-dark
+  .IconButton:is([aria-disabled='true'], [disabled]):active {
+  color: var(--icon-button-disabled-color);
 }
 
-.cauldron--theme-dark .IconButton--secondary:active {
-  background-color: var(--accent-dark);
+.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--primary:not([disabled]):not([aria-disabled='true']):hover:before {
-  box-shadow: 0 0 0 1px var(--accent-light);
+  .IconButton--secondary: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--secondary:not([disabled]):not([aria-disabled='true']):hover:before {
-  box-shadow: 0 0 0 1px var(--white);
+  .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),
+    0 0 0 4px var(--button-focus-ring-color, --focus);
 }
 
 :root {
@@ -1010,8 +1061,8 @@ a.IconButton {
 }
 
 .Dialog__close svg {
-  height: 100%;
-  width: 100%;
+  /* match icon size with height/width of button */
+  --icon-size: 100%;
 }
 
 .cauldron--theme-dark .Dialog__close {
@@ -1228,6 +1279,7 @@ ul.semantic-only {
 .cauldron--theme-dark {
   --field-background-color: var(--accent-medium);
   --field-content-color: var(--white);
+  --field-border-color: #74818b;
   --field-border-color-hover: var(--accent-info-light);
   --field-border-color-focus: var(--accent-info);
   --field-border-color-focus-hover: var(--accent-info-light);
@@ -1289,7 +1341,7 @@ textarea:focus,
 [role='spinbutton']:focus {
   outline: 0;
   border: 1px solid var(--field-border-color-focus);
-  box-shadow: 0 0 0 2px 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);
 }
@@ -1314,6 +1366,9 @@ textarea:focus:hover,
 [role='listbox']:focus:hover,
 [role='spinbutton']:focus:hover {
   border: 1px solid var(--field-border-color-focus-hover);
+  box-shadow: 0 0 0 1px var(--field-border-color-focus-hover),
+    0 0 5px var(--field-border-color-focus-glow),
+    inset 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 input.Field--has-error,
@@ -1325,6 +1380,8 @@ textarea.Field--has-error,
 [role='listbox'].Field--has-error,
 [role='spinbutton'].Field--has-error {
   border: 1px solid var(--field-border-color-error);
+  box-shadow: 0 0 0 1px var(--field-border-color-error),
+    inset 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .Checkbox__overlay.Field--has-error {
@@ -1357,9 +1414,9 @@ textarea.Field--has-error:focus,
 [role='listbox'].Field--has-error:focus,
 [role='spinbutton'].Field--has-error:focus {
   border: 1px solid var(--field-border-color-error);
-  box-shadow: 0 0 0 1px var(--field-border-color-error-hover),
-    inset 0 2px 3px 0 rgba(0, 0, 0, 0.05),
-    0 0 5px 0 var(--field-border-color-error-focus-glow);
+  box-shadow: 0 0 0 1px var(--field-border-color-error),
+    0 0 5px var(--field-border-color-error-focus-glow),
+    inset 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 input.Field--has-error:focus:hover,
@@ -1627,11 +1684,13 @@ textarea.Field--has-error:focus:hover,
 .Radio__overlay--disabled.Icon--radio-checked,
 .Checkbox__overlay--disabled.Icon--checkbox-checked {
   color: var(--field-icon-checked-disabled-color);
+  cursor: default;
 }
 
 .Checkbox__overlay--disabled.Icon--checkbox-unchecked,
 .Radio__overlay--disabled.Icon--radio-unchecked {
   color: var(--field-icon-unchecked-disabled-color);
+  cursor: default;
 }
 
 .Field__label:hover ~ .Radio__overlay:not(.Radio__overlay--disabled),
@@ -3052,21 +3111,25 @@ button.TooltipTabstop {
 }
 
 :root {
-  --tabs-border-color: #b3bfc6;
+  --tabs-border-color: var(--stroke-light);
   --tab-shadow-color: var(--accent-primary);
-  --tab-inactive-background-color: var(--gray-20);
-  --tab-inactive-text-color: var(--gray-60);
-  --tab-active-background-color: var(--white);
+  --tab-inactive-background-color: #fff;
+  --tab-inactive-text-color: var(--gray-80);
+  --tab-active-background-color: #fff;
+  --tab-hover-background-color: var(--gray-20);
+  --tab-panel-color: var(--gray-80);
   --tabs-active-text-color: var(--gray-90);
 }
 
 .cauldron--theme-dark {
-  --tabs-border-color: #5d676f;
+  --tabs-border-color: var(--stroke-dark);
   --tab-shadow-color: var(--accent-info);
   --tab-inactive-background-color: var(--accent-medium);
   --tab-inactive-text-color: var(--accent-light);
-  --tab-active-background-color: var(--accent-dark);
-  --tabs-active-text-color: var(--white);
+  --tab-active-background-color: var(--accent-medium);
+  --tab-hover-background-color: var(--accent-dark);
+  --tab-panel-color: var(--accent-light);
+  --tabs-active-text-color: #fff;
 }
 
 .Tabs {
@@ -3083,6 +3146,13 @@ button.TooltipTabstop {
   display: inline-block;
 }
 
+.Tabs--horizontal {
+  width: 100%;
+  border: 1px solid var(--tabs-border-color);
+  background-color: var(--tab-inactive-background-color);
+  border-bottom: 0;
+}
+
 .Tablist {
   display: flex;
   flex-direction: row;
@@ -3093,6 +3163,10 @@ button.TooltipTabstop {
   flex-direction: column;
 }
 
+.Tabs--horizontal .Tablist {
+  border-left: 0;
+}
+
 .Tab {
   display: flex;
   justify-content: center;
@@ -3116,32 +3190,40 @@ button.TooltipTabstop {
   border-right: none;
 }
 
+.Tabs--horizontal .Tab {
+  border-top: 0;
+}
+
 .cauldron--theme-light .Tabs--vertical .Tab:last-child {
   border-bottom: 1px solid var(--tabs-border-color);
 }
 
 .Tab:hover {
   cursor: pointer;
-  background-color: var(--tab-active-background-color);
+  background-color: var(--tab-hover-background-color);
   color: var(--tabs-active-text-color);
 }
 
 .Tab--active {
   color: var(--tabs-active-text-color);
   background-color: var(--tab-active-background-color);
-  font-weight: bold;
+  font-weight: var(--font-weight-medium);
   text-decoration: none;
   box-shadow: inset 0 4px 0 var(--tab-shadow-color);
   z-index: 1;
 }
 
+.Tab--active:hover {
+  background-color: var(--tab-active-background-color);
+}
+
 .Tabs--vertical .Tab--active {
   box-shadow: inset 4px 0 0 var(--tab-shadow-color);
 }
 
 .TabPanel {
   overflow-wrap: break-word;
-  color: var(--tabs-active-text-color);
+  color: var(--tab-panel-color);
   background-color: var(--tab-active-background-color);
   border: 1px solid var(--tabs-border-color);
   padding: 1rem;
@@ -3251,7 +3333,16 @@ button.TooltipTabstop {
   background: var(--table-header-background-color);
   font-weight: var(--font-weight-medium);
   color: var(--table-header-text-color);
-  border-bottom: 3px solid var(--table-row-border-color);
+  border-bottom: 2px solid var(--table-row-border-color);
+}
+
+.TableBody .TableHeader {
+  border-bottom-width: 1px;
+  border-right: 2px solid var(--table-row-border-color);
+}
+
+.TableBody .TableRow:last-child .TableHeader {
+  border-bottom: none;
 }
 
 .TableHeader[aria-sort] {
@@ -3338,6 +3429,11 @@ button.TooltipTabstop {
   border-bottom: 2px solid var(--gray-40);
 }
 
+.Table--border .TableBody .TableHeader {
+  border-bottom-width: 1px;
+  border-right: 2px solid var(--table-row-border-color);
+}
+
 .cauldron--theme-dark .Table--border,
 .cauldron--theme-dark .Table--border .TableHeader,
 .cauldron--theme-dark .Table--border .TableFooter,
@@ -3473,15 +3569,62 @@ button.TooltipTabstop {
   }
 }
 
-.Stepper {
-  --step-indicator-size: 2em;
-  --step-line-height: 0.53em;
-  --step-line-offset: 1.33em;
+:root {
+  --step-indicator-size: 1.75rem;
+  --step-line-height: 0.5rem;
+  --step-line-offset: 1.438rem;
+
+  --step-indicator-content-size: 1rem;
+
+  --step-label-color: var(--gray-60);
+  --step-line-color: var(--accent-light);
+  --step-indicator-background: var(--accent-light);
+  --step-indicator-color: var(--gray-90);
+
+  --step-current-indicator-background: #fff;
+  --step-current-indicator-color: var(--accent-dark);
+  --step-current-indicator-shadow: 0 0 0 2px var(--accent-dark);
+  --step-current-complete-line-border-color: var(--accent-dark);
+
+  --step-complete-indicator-background: var(--accent-dark);
+  --step-complete-indicator-color: #fff;
+
+  --step-current-label-color: var(--gray-90);
+  --step-complete-indicator-svg-color: var(--accent-success);
+
+  --stepper-color: var(--gray-90);
+}
+
+/* Dark theme variables */
+
+.cauldron--theme-dark {
+  --step-label-color: var(--accent-light);
+  --step-line-color: var(--accent-medium);
+  --step-indicator-color: #fff;
+  --step-indicator-background: var(--accent-medium);
+
+  --step-current-indicator-background: #fff;
+  --step-current-indicator-color: var(--accent-dark);
+  --step-current-indicator-shadow: 0 0 0 2px var(--accent-dark),
+    0 0 0 4px var(--accent-info);
+  --step-current-complete-line-border-color: var(--accent-info);
 
+  --step-complete-indicator-background: var(--accent-info);
+  --step-complete-indicator-color: var(--accent-dark);
+
+  --step-current-label-color: #fff;
+  --step-complete-indicator-svg-color: #000;
+
+  --stepper-color: var(--accent-light);
+  --stepper-background-color: var(--accent-dark);
+}
+
+.Stepper {
   display: flex;
   padding: var(--space-medium);
   align-items: flex-start;
-  color: var(--gray-90);
+  color: var(--stepper-color);
+  background-color: var(--stepper-background-color);
   counter-reset: stepper;
   list-style-type: none;
   margin: 0 auto;
@@ -3499,7 +3642,7 @@ button.TooltipTabstop {
   left: calc(-50% + var(--step-line-offset));
   right: calc(50% + var(--step-line-offset));
   flex: 1 1 auto;
-  border-top: var(--step-line-height) solid var(--accent-light);
+  border-top: var(--step-line-height) solid var(--step-line-color);
 }
 
 .Stepper__step:first-child .Stepper__step-line {
@@ -3516,16 +3659,16 @@ button.TooltipTabstop {
   width: var(--step-indicator-size);
   height: var(--step-indicator-size);
   border-radius: 50%;
-  background: var(--accent-light);
-  color: var(--gray-90);
+  background: var(--step-indicator-background);
+  color: var(--step-indicator-color);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
 
-.Stepper__step-indicator::before {
-  font-size: var(--text-size-smallest);
+.Stepper__step-indicator:before {
+  font-size: var(--text-size-small);
   counter-increment: stepper;
   content: counter(stepper);
 }
@@ -3535,62 +3678,46 @@ button.TooltipTabstop {
   width: 100%;
   padding-top: var(--space-smallest);
   font-size: var(--text-size-smaller);
+  color: var(--step-label-color);
 }
 
 /*
   status-specific styles
 */
 
-.Stepper__step--current .Stepper__step-indicator {
-  background: var(--white);
-  color: var(--accent-dark);
-  box-shadow: 0 0 0 2px var(--accent-dark);
-}
-
-.Stepper__step--current .Stepper__step-label {
-  font-weight: var(--font-weight-bold);
-}
-
-.Stepper__step--current .Stepper__step-line,
-.Stepper__step--complete .Stepper__step-line {
-  border-color: var(--accent-dark);
-}
-
-.Stepper__step--complete .Stepper__step-indicator {
-  background: var(--accent-dark);
-  color: var(--white);
+.Stepper__step--current-indicator {
+  background: var(--step-current-indicator-background);
+  color: var(--step-current-indicator-color);
+  box-shadow: var(--step-current-indicator-shadow);
 }
 
-/* Dark Theme */
-
-.cauldron--theme-dark .Stepper {
-  color: var(--accent-light);
-  background-color: var(--accent-dark);
+.Stepper__step--current-indicator:before {
+  font-weight: var(--font-weight-medium);
 }
 
-.cauldron--theme-dark .Stepper__step-line {
-  border-top: var(--step-line-height) solid var(--accent-medium);
+.Stepper__step--current-label {
+  font-weight: var(--font-weight-medium);
+  color: var(--step-current-label-color);
 }
 
-.cauldron--theme-dark .Stepper__step-indicator {
-  color: var(--white);
-  background: var(--accent-medium);
+.Stepper__step--current-line,
+.Stepper__step--complete-line {
+  border-color: var(--step-current-complete-line-border-color);
 }
 
-.cauldron--theme-dark .Stepper__step--current .Stepper__step-indicator {
-  background: var(--white);
-  color: var(--accent-dark);
-  box-shadow: 0 0 0 2px var(--accent-dark), 0 0 0 4px var(--accent-info);
+.Stepper__step--complete-indicator {
+  background: var(--step-complete-indicator-background);
+  color: var(--step-complete-indicator-color);
 }
 
-.cauldron--theme-dark .Stepper__step--current .Stepper__step-line,
-.cauldron--theme-dark .Stepper__step--complete .Stepper__step-line {
-  border-color: var(--accent-info);
+.Stepper__step--complete-indicator:before {
+  content: '';
 }
 
-.cauldron--theme-dark .Stepper__step--complete .Stepper__step-indicator {
-  background: var(--accent-info);
-  color: var(--accent-dark);
+.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 {
@@ -3871,7 +3998,6 @@ fieldset.Panel {
   align-items: center;
   background-color: var(--top-nav-background-color);
   color: var(--top-nav-text-color);
-  border-bottom: 1px solid var(--top-nav-border-bottom-color);
 }
 
 .NavBar > ul {
@@ -3879,6 +4005,7 @@ fieldset.Panel {
   list-style-type: none;
   display: flex;
   z-index: var(--z-index-top-nav);
+  border-bottom: 1px solid var(--top-nav-border-bottom-color);
 }
 
 .NavBar > ul > li {
@@ -3890,7 +4017,6 @@ fieldset.Panel {
   display: flex;
   align-items: center;
   background-color: var(--top-nav-background-color);
-  border-bottom: 1px solid var(--top-nav-border-bottom-color);
   border-right: 1px solid var(--top-nav-box-shadow-color);
   transition: background-color 0.3s ease;
 }
@@ -3995,6 +4121,12 @@ fieldset.Panel {
   margin-right: var(--space-smallest);
 }
 
+@media (max-width: 64rem) {
+  .NavBar {
+    padding: 0 var(--space-small);
+  }
+}
+
 @media (max-width: 61.25rem) {
   .NavBar > ul > li {
     font-size: var(--text-size-small);
@@ -4710,8 +4842,11 @@ button.Accordion__trigger {
   border: 1px solid var(--combobox-input-border-color);
 }
 
-.Combobox__input:hover,
-.cauldron--theme-dark .Combobox__input:hover {
+.cauldron--theme-dark .Combobox__input--error {
+  border: 1px solid var(--combobox-input-error-border-color);
+}
+
+.Combobox__input:hover {
   border-color: var(--combobox-input-border-hover-color);
 }
 
@@ -4723,7 +4858,7 @@ button.Accordion__trigger {
 
 .Combobox__input:focus-within {
   border: 1px solid var(--combobox-input-border-focus-color);
-  box-shadow: 0 0 0 2px var(--combobox-input-border-focus-color),
+  box-shadow: 0 0 0 1px var(--combobox-input-border-focus-color),
     0 0 5px var(--combobox-input-border-focus-glow-color),
     inset 0 1px 2px rgba(0, 0, 0, 0.05);
 }
@@ -4866,16 +5001,102 @@ button.Accordion__trigger {
 
 .Combobox__input--error {
   border: 1px solid var(--combobox-input-error-border-color);
+  box-shadow: 0 0 0 1px var(--combobox-input-error-border-color),
+    inset 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .Combobox__input--error:focus-within {
   border: 1px solid var(--combobox-input-error-border-color);
-  box-shadow: 0 0 0 1px var(--combobox-input-error-focus-border-color),
-    inset 0 2px 3px 0 rgba(0, 0, 0, 0.05),
-    0 0 5px 0 var(--combobox-input-error-focus-border-glow-color);
+  box-shadow: 0 0 0 1px var(--combobox-input-error-border-color),
+    0 0 5px var(--field-border-color-error-focus-glow),
+    inset 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.Combobox__input--error:focus-within:hover {
+  border: 1px solid var(--combobox-input-error-border-color);
+  box-shadow: 0 0 0 1px var(--combobox-input-error-border-color),
+    0 0 5px var(--field-border-color-error-focus-glow),
+    inset 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.Combobox__input--error:hover {
+  border: 1px solid var(--combobox-input-error-border-color);
+  box-shadow: 0 0 0 1px var(--combobox-input-error-border-color),
+    inset 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .ComboboxListbox__empty {
   padding: var(--space-smaller);
   text-align: center;
 }
+
+:root {
+  --timeline-mark-color: var(--accent-success-dark);
+  --timeline-mark-border-color: #fff;
+  --timeline-separator-color: var(--gray-40);
+  --timeline-icon-size: 18px;
+}
+
+.cauldron--theme-dark {
+  --timeline-mark-color: var(--accent-success-light);
+  --timeline-mark-border-color: var(--accent-medium);
+  --timeline-separator-color: #54636f;
+}
+
+.Timeline {
+  margin: 0;
+  padding: 0;
+}
+
+.Timeline:is(ol) {
+  list-style-type: none;
+}
+
+.TimelineItem {
+  display: flex;
+  margin-left: var(--space-smaller);
+}
+
+.TimelineItem:not(:last-child) {
+  min-height: 3.75rem;
+  padding-bottom: var(--space-half);
+}
+
+.TimelineItem:not(:last-child) .TimelineItem__details {
+  padding-bottom: var(--space-smaller);
+}
+
+.TimelineItem__separator {
+  display: flex;
+  flex-direction: column;
+  width: var(--timeline-icon-size);
+  --icon-size: var(--timeline-icon-size);
+}
+
+.TimelineItem__separator:empty:before,
+.TimelineItem__separator > * {
+  transform: translateX(calc(-50% + 2px));
+  margin-bottom: var(--space-smallest);
+  max-width: var(--timeline-icon-size);
+}
+
+.TimelineItem__separator:empty:before {
+  content: '';
+  display: block;
+  height: 8px;
+  width: 8px;
+  margin-top: var(--space-half);
+  border-radius: 50%;
+  background-color: var(--timeline-mark-color);
+}
+
+.TimelineItem:not(:last-child) .TimelineItem__separator:after {
+  content: '';
+  display: block;
+  flex: 1;
+  width: 6px;
+  border-radius: 3px;
+  background-color: var(--timeline-separator-color);
+  border: 1px solid var(--timeline-mark-border-color);
+  transform: translateX(-1px);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "6.0.0",
+  "version": "6.1.0-canary.33d6b541",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",