@deque/cauldron-styles 5.7.1 → 5.8.0-canary.55b0441c

package/dist/index.css

@@ -1467,6 +1467,7 @@ ul.semantic-only {
   --field-icon-focus-color: var(--focus-light);
   --field-error-text-color: var(--error);
   --field-error-border-color: var(--error);
+  --field-listbox-selected-background-color: var(--accent-secondary-active);
   --input-min-width: 250px;
 }
 
@@ -1482,6 +1483,7 @@ ul.semantic-only {
   --field-background-color-disabled: #5d676f;
   --field-required-text-color: var(--white);
   --field-label-text-color: var(--white);
+  --field-label-error-text-color: var(--error);
   --field-label-description-text-color: var(--accent-light);
   --field-icon-inactive-color: var(--white);
   --field-icon-active-color: rgba(212, 221, 224, 0.25);
@@ -1492,6 +1494,7 @@ ul.semantic-only {
   --field-icon-focus-color: var(--focus-dark);
   --field-error-text-color: var(--error);
   --field-error-border-color: var(--error);
+  --field-listbox-selected-background-color: var(--accent-dark);
 }
 
 input,
@@ -1500,7 +1503,6 @@ textarea,
 [role='menuitemcheckbox'],
 [role='menuitemradio'],
 [role='textbox'],
-[aria-haspopup='listbox'],
 [role='listbox'],
 [role='spinbutton'] {
   width: 100%;
@@ -1517,7 +1519,6 @@ textarea,
 [role='menuitemcheckbox'],
 [role='menuitemradio'],
 [role='textbox'],
-[aria-haspopup='listbox'],
 [role='listbox'],
 [role='spinbutton'] {
   border: 1px solid var(--field-border-color);
@@ -1529,7 +1530,6 @@ textarea:focus,
 [role='menuitemcheckbox']:focus,
 [role='menuitemradio']:focus,
 [role='textbox']:focus,
-[aria-haspopup='listbox']:focus,
 [role='listbox']:focus,
 [role='spinbutton']:focus {
   outline: 0;
@@ -1545,7 +1545,6 @@ textarea:hover,
 [role='menuitemcheckbox']:hover,
 [role='menuitemradio']:hover,
 [role='textbox']:hover,
-[aria-haspopup='listbox']:hover,
 [role='listbox']:hover,
 [role='spinbutton']:hover {
   border: 1px solid var(--field-border-color-hover);
@@ -1557,7 +1556,6 @@ textarea:focus:hover,
 [role='menuitemcheckbox']:focus:hover,
 [role='menuitemradio']:focus:hover,
 [role='textbox']:focus:hover,
-[aria-haspopup='listbox']:focus:hover,
 [role='listbox']:focus:hover,
 [role='spinbutton']:focus:hover {
   border: 1px solid var(--field-border-color-focus-hover);
@@ -1569,7 +1567,6 @@ textarea.Field--has-error,
 [role='menuitemcheckbox'].Field--has-error,
 [role='menuitemradio'].Field--has-error,
 [role='textbox'].Field--has-error,
-[aria-haspopup='listbox'].Field--has-error,
 [role='listbox'].Field--has-error,
 [role='spinbutton'].Field--has-error {
   border: 1px solid var(--field-border-color-error);
@@ -1579,7 +1576,9 @@ textarea.Field--has-error,
   color: var(--field-border-color-error);
 }
 
-.Icon--checkbox-unchecked.Checkbox__overlay:active.Field--has-error:not(.Checkbox__overlay--disabled) {
+.Icon--checkbox-unchecked.Checkbox__overlay:active.Field--has-error:not(
+    .Checkbox__overlay--disabled
+  ) {
   background-color: var(--field-icon-error-active-color);
 }
 
@@ -1589,7 +1588,6 @@ textarea.Field--has-error:hover,
 [role='menuitemcheckbox'].Field--has-error:hover,
 [role='menuitemradio'].Field--has-error:hover,
 [role='textbox'].Field--has-error:hover,
-[aria-haspopup='listbox'].Field--has-error:hover,
 [role='listbox'].Field--has-error:hover,
 [role='spinbutton'].Field--has-error:hover {
   border-color: var(--field-border-color-error-hover);
@@ -1601,7 +1599,6 @@ textarea.Field--has-error:focus,
 [role='menuitemcheckbox'].Field--has-error:focus,
 [role='menuitemradio'].Field--has-error:focus,
 [role='textbox'].Field--has-error:focus,
-[aria-haspopup='listbox'].Field--has-error:focus,
 [role='listbox'].Field--has-error:focus,
 [role='spinbutton'].Field--has-error:focus {
   border: 1px solid var(--field-border-color-error);
@@ -1616,12 +1613,26 @@ textarea.Field--has-error:focus:hover,
 [role='menuitemcheckbox'].Field--has-error:focus:hover,
 [role='menuitemradio'].Field--has-error:focus:hover,
 [role='textbox'].Field--has-error:focus:hover,
-[aria-haspopup='listbox'].Field--has-error:focus:hover,
 [role='listbox'].Field--has-error:focus:hover,
 [role='spinbutton'].Field--has-error:focus:hover {
   border-color: var(--field-border-color-error-hover);
 }
 
+[role='listbox'] > li,
+[role='listbox'] > [role='group'] > li {
+  list-style-type: none;
+}
+
+[role='listbox']:focus-within > li.ListboxOption--active,
+[role='listbox']:focus-within > [role='group'] > li.ListboxOption--active {
+  box-shadow: 0 0 0 2px var(--field-icon-focus-color);
+}
+
+[role='listbox']
+  li[role='option']:is([aria-selected='true'], [aria-checked='true']) {
+  background-color: var(--field-listbox-selected-background-color);
+}
+
 .Error {
   color: var(--field-error-text-color);
   text-align: left;
@@ -1929,7 +1940,6 @@ p .Link {
 
 .OptionsMenu {
   position: relative;
-  width: 34px;
   color: var(--text-color-base);
 }
 
@@ -3548,7 +3558,7 @@ button.TooltipTabstop {
   color: var(--table-header-text-color);
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
   padding: var(--table-space) var(--space-smallest);
 }
 
@@ -3613,6 +3623,10 @@ button.TooltipTabstop {
   border: 1px solid var(--gray-40);
 }
 
+.Table--border .TableHeader {
+  border-bottom: 2px solid var(--gray-40);
+}
+
 .cauldron--theme-dark .Table--border,
 .cauldron--theme-dark .Table--border .TableHeader,
 .cauldron--theme-dark .Table--border .TableFooter,
@@ -4345,6 +4359,14 @@ fieldset.Panel {
   }
 }
 
+:root {
+  --breadcrumb-separator-color: var(--gray-60);
+}
+
+.cauldron--theme-dark {
+  --breadcrumb-separator-color: var(--accent-light);
+}
+
 .Breadcrumb ol {
   display: block;
   word-break: break-all;
@@ -4355,8 +4377,8 @@ fieldset.Panel {
 }
 
 .Breadcrumb__Separator {
-  color: var(--gray-40);
   padding: 0 var(--space-half);
+  color: var(--breadcrumb-separator-color);
 }
 
 .Breadcrumb__Link {
@@ -4663,7 +4685,7 @@ fieldset.Panel {
 
 :root {
   --accordion-trigger-background-color: var(--white);
-  --accordion-trigger-background-color-expanded: var(--gray-20);
+  --accordion-trigger-background-color-expanded: var(--white);
   --accordion-trigger-text-color: var(--gray-90);
   --accordion-trigger-text-color-hover: var(--accent-primary);
   --accordion-trigger-box-shadow-hover: var(--accent-primary);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "5.7.1",
+  "version": "5.8.0-canary.55b0441c",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",
@@ -22,4 +22,4 @@
     "postcss-cli": "^7.1.1",
     "postcss-import": "^12.0.1"
   }
-}
+}