@deque/cauldron-styles 5.8.1-canary.9258572 → 5.8.1

package/dist/index.css

@@ -40,7 +40,7 @@
   --accent-secondary: var(--gray-20);
   --accent-secondary-active: var(--gray-30);
   --focus-light: #b51ad1;
-  --focus-dark: #f5a4ff;
+  --focus-dark: #eb94ff;
   --issue-critical: var(--accent-danger);
   --issue-serious: var(--accent-warning);
   --issue-moderate: #f0c4f8;
@@ -466,7 +466,7 @@ button.Link {
 }
 
 .Button--tag:not([disabled]):not([aria-disabled='true']):hover:before {
-  box-shadow: 0 0 0 1px var(--button-outline-color-secondary);
+  box-shadow: 0 0 0 1px var(--button-outline-color-primary);
 }
 
 .Button--primary:focus:before,
@@ -1467,11 +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);
-  --field-font-size: var(--text-size-small);
   --input-min-width: 250px;
-  --checkbox-size: var(--icon-size);
-  --radio-size: var(--icon-size);
 }
 
 .cauldron--theme-dark {
@@ -1486,7 +1482,6 @@ 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);
@@ -1497,7 +1492,6 @@ 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,
@@ -1506,6 +1500,7 @@ textarea,
 [role='menuitemcheckbox'],
 [role='menuitemradio'],
 [role='textbox'],
+[aria-haspopup='listbox'],
 [role='listbox'],
 [role='spinbutton'] {
   width: 100%;
@@ -1522,6 +1517,7 @@ textarea,
 [role='menuitemcheckbox'],
 [role='menuitemradio'],
 [role='textbox'],
+[aria-haspopup='listbox'],
 [role='listbox'],
 [role='spinbutton'] {
   border: 1px solid var(--field-border-color);
@@ -1533,6 +1529,7 @@ textarea:focus,
 [role='menuitemcheckbox']:focus,
 [role='menuitemradio']:focus,
 [role='textbox']:focus,
+[aria-haspopup='listbox']:focus,
 [role='listbox']:focus,
 [role='spinbutton']:focus {
   outline: 0;
@@ -1548,6 +1545,7 @@ 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);
@@ -1559,6 +1557,7 @@ 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);
@@ -1570,6 +1569,7 @@ 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,9 +1579,7 @@ 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);
 }
 
@@ -1591,6 +1589,7 @@ 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);
@@ -1602,6 +1601,7 @@ 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,26 +1616,12 @@ 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;
@@ -1763,7 +1749,7 @@ textarea.Field--has-error:focus:hover,
 .Field__text-input {
   padding: var(--space-smallest);
   box-sizing: border-box;
-  font-size: var(--field-font-size);
+  font-size: var(--text-size-small);
   color: var(--field-content-color);
   min-width: min(var(--input-min-width), 100%);
 }
@@ -1777,7 +1763,7 @@ textarea.Field--has-error:focus:hover,
 .Field__textarea {
   display: block;
   min-height: 56px;
-  font-size: var(--field-font-size);
+  font-size: var(--text-size-small);
   min-width: min(var(--input-min-width), 100%);
   padding: var(--space-half);
   max-width: 500px;
@@ -1797,18 +1783,11 @@ textarea.Field--has-error:focus:hover,
   font-weight: var(--font-weight-normal);
   line-height: 1;
   margin-top: var(--space-half);
+  margin-left: calc(24px + 2px + var(--space-half));
   cursor: default;
   display: flex;
 }
 
-.Checkbox__wrap .Field__labelDescription {
-  margin-left: calc(var(--checkbox-size) + 2px + var(--space-half));
-}
-
-.Radio__wrap .Field__labelDescription {
-  margin-left: calc(var(--radio-size) + 2px + var(--space-half));
-}
-
 .Field__labelDescription + .Error {
   margin-top: var(--space-smallest);
 }
@@ -1836,16 +1815,6 @@ textarea.Field--has-error:focus:hover,
   pointer-events: none;
 }
 
-.Radio__overlay svg {
-  height: var(--radio-size);
-  width: var(--radio-size);
-}
-
-.Checkbox__overlay svg {
-  height: var(--checkbox-size);
-  width: var(--checkbox-size);
-}
-
 .Radio__overlay:active:not(.Radio__overlay--disabled),
 .Checkbox__overlay:active:not(.Checkbox__overlay--disabled) {
   background-color: var(--field-icon-active-color);
@@ -4032,126 +4001,6 @@ fieldset.Panel {
   --panel-content-color: var(--accent-light);
 }
 
-:root {
-  --popover-background-color: var(--gray-10);
-  --popover-border-color: var(--gray-90);
-  --popover-text-color: var(--gray-90);
-  --popover-box-shadow: rgba(0, 0, 0, 0.35) 0 0 10px 0;
-  --popover-font-size: var(--text-size-smaller);
-  --popover-line-height: var(--text-size-normal);
-  --popover-padding: 0 var(--space-small);
-  --popover-alert-max-width: 12rem;
-  --popover-alert-padding: var(--space-small);
-  --popover-alert-apply-button-margin: var(--space-smallest) 0;
-}
-
-/* Dark theme variables */
-
-.cauldron--theme-dark {
-  --popover-background-color: var(--accent-medium);
-  --popover-border-color: var(--accent-light);
-  --popover-text-color: var(--white);
-}
-
-.Popover {
-  background-color: var(--popover-background-color);
-  border: 2px solid var(--popover-border-color);
-  box-shadow: var(--popover-box-shadow);
-  color: var(--popover-text-color);
-  font-size: var(--popover-font-size);
-  line-height: var(--popover-line-height);
-  padding: var(--popover-padding);
-  word-break: break-word;
-}
-
-.Popover--hidden {
-  visibility: hidden;
-  /* Take the tooltip out of the DOM layout flow so it doesn't reserve space when hidden */
-  position: fixed !important;
-}
-
-/* TooltipArrow needs some dimensions to accurately calculate its positioning */
-
-.Popover__popoverArrow {
-  height: 0.1px;
-  width: 0.1px;
-}
-
-.Popover__borderLeft {
-  position: absolute;
-  left: 4px;
-  top: var(--space-half);
-  height: calc(100% - (var(--space-half) * 2));
-  width: 3px;
-  background-color: var(--popover-border-color);
-}
-
-/* Adjust position to try to center the arrow in the tooltip's border */
-
-[class*='Popover--top'] .Popover__popoverArrow {
-  bottom: -1px;
-}
-
-[class*='Popover--bottom'] .Popover__popoverArrow {
-  top: -1px;
-}
-
-[class*='Popover--left'] .Popover__popoverArrow {
-  right: -1px;
-}
-
-[class*='Popover--right'] .Popover__popoverArrow {
-  left: 0;
-}
-
-/*
- * Default tooltip arrow styles
- */
-
-.Popover__popoverArrow:before {
-  content: '';
-  position: absolute;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 7px solid var(--popover-border-color);
-  border-bottom: none;
-  transform: translateX(-50%);
-  transform-origin: top;
-}
-
-[class*='Popover--bottom'] .Popover__popoverArrow:before {
-  transform: translateX(-50%) rotate(180deg);
-}
-
-[class*='Popover--left'] .Popover__popoverArrow:before {
-  transform: rotate(-90deg) translateY(-6px);
-}
-
-[class*='Popover--right'] .Popover__popoverArrow:before {
-  transform: rotate(90deg) translateY(100%);
-}
-
-/* Alert popover styles */
-
-.Popover--prompt {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  padding: var(--popover-alert-padding);
-  max-width: var(--popover-alert-max-width);
-}
-
-.Popover--prompt > .Button--thin {
-  width: 100%;
-  margin-left: 0;
-}
-
-.Popover__apply {
-  margin: var(--popover-alert-apply-button-margin);
-}
-
 :root {
   --issue-panel-border-color: var(--gray-40);
   --issue-panel-header-background-color: var(--gray-20);
@@ -4989,252 +4838,3 @@ button.Accordion__trigger {
   margin-top: 0;
   margin-bottom: var(--space-smallest);
 }
-
-:root {
-  --combobox-input-border-color: var(--field-border-color);
-  --combobox-input-background-color: var(--field-background-color);
-  --combobox-input-border-focus-color: var(--field-border-color-focus);
-  --combobox-input-border-hover-color: var(--field-border-color-focus-hover);
-  --combobox-input-border-focus-glow-color: var(
-    --field-border-color-focus-glow
-  );
-  --combobox-input-error-border-color: var(--field-border-color-error);
-  --combobox-input-error-focus-border-color: var(
-    --field-border-color-error-hover
-  );
-  --combobox-input-error-focus-border-glow-color: var(
-    --field-border-color-focus-glow
-  );
-  --combobox-input-font-size: var(--field-font-size);
-  --combobox-input-font-color: var(--field-content-color);
-  --combobox-listbox-border-color: var(--gray-40);
-  --combobox-listbox-background-color: #fff;
-  --combobox-option-font-color: var(--gray-90);
-  --combobox-option-hover-background-color: var(--gray-20);
-  --combobox-option-description-font-color: var(--gray-60);
-  --combobox-option-description-font-size: var(--text-size-smaller);
-  --combobox-option-min-height: 2.625rem;
-  --combobox-group-label-background-color: var(--gray-20);
-  --combobox-group-label-font-size: var(--text-size-smaller);
-  --combobox-option-selected-icon-color: var(--accent-success-dark);
-}
-
-.cauldron--theme-dark {
-  --combobox-input-border-color: var(--field-border-color);
-  --combobox-input-background-color: var(--field-background-color);
-  --combobox-input-border-focus-color: var(--field-border-color-focus);
-  --combobox-input-border-hover-color: var(--field-border-color-focus-hover);
-  --combobox-input-border-focus-glow-color: var(
-    --field-border-color-focus-glow
-  );
-  --combobox-input-error-border-color: var(--field-border-color-error);
-  --combobox-input-error-focus-border-color: var(
-    --field-border-color-error-hover
-  );
-  --combobox-input-error-focus-border-glow-color: var(
-    --field-border-color-focus-glow
-  );
-  --combobox-input-font-color: var(--field-content-color);
-  --combobox-option-font-color: var(--text-color-light);
-  --combobox-option-hover-background-color: var(--accent-dark);
-  --combobox-option-description-font-color: var(--accent-light);
-  --combobox-listbox-background-color: var(--accent-medium);
-  --combobox-group-label-background-color: var(--accent-dark);
-  --combobox-option-selected-icon-color: var(--accent-success-light);
-}
-
-.Combobox {
-  --field-listbox-selected-background-color: transparent;
-  position: relative;
-}
-
-.Combobox input:is(*, :focus, :hover) {
-  border: none;
-  box-shadow: none;
-  margin: initial;
-  padding: var(--space-smallest);
-}
-
-.Combobox__input {
-  position: relative;
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--combobox-input-border-color);
-  border-bottom: 1px solid var(--field-border-color-underline);
-  margin-bottom: var(--space-half);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
-  background-color: var(--combobox-input-background-color);
-}
-
-.cauldron--theme-dark .Combobox__input {
-  border: 1px solid var(--combobox-input-border-color);
-}
-
-.Combobox__input:hover,
-.cauldron--theme-dark .Combobox__input:hover {
-  border-color: var(--combobox-input-border-hover-color);
-}
-
-.Combobox__input input[type='text'] {
-  font-size: var(--combobox-input-font-size);
-  color: var(--combobox-input-font-color);
-  margin-right: 1.25rem;
-}
-
-.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),
-    0 0 5px var(--combobox-input-border-focus-glow-color),
-    inset 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-.Combobox__arrow {
-  width: 2rem;
-  display: flex;
-  justify-content: center;
-  position: absolute;
-  right: 0;
-  pointer-events: none;
-}
-
-.Combobox__arrow:before {
-  content: '';
-  display: inline-block;
-  border-top: 7px solid currentColor;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-radius: 2px;
-}
-
-.Combobox__listbox {
-  display: none;
-  position: absolute;
-  min-width: 100%;
-  border: 1px solid var(--combobox-listbox-border-color);
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-  background-color: var(--combobox-listbox-background-color);
-  z-index: var(--z-index-listbox);
-  max-width: var(--combobox-listbox-max-width, 100%);
-  max-height: var(
-    --combobox-listbox-max-height,
-    calc(var(--combobox-option-min-height) * 10)
-  );
-  overflow-y: auto;
-  animation: combobox-animate-in ease-out 150ms;
-}
-
-@keyframes combobox-animate-in {
-  from {
-    transform: translateY(-8px);
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@media (prefers-reduced-motion) {
-  .Combobox__listbox {
-    animation: none;
-  }
-}
-
-.Combobox__listbox:hover {
-  border-color: var(--combobox-listbox-border-color);
-}
-
-/* 
- * Note: Firefox doesn't yet have full support for :has, so .Combobox__listbox--open
- * 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;
-}
-
-.Combobox__listbox li {
-  list-style-type: none;
-}
-
-.Combobox__listbox > ul[role='group']:not(:last-child) {
-  border-bottom: 1px solid var(--combobox-listbox-border-color);
-}
-
-.ComboboxGroup__label {
-  background-color: var(--combobox-group-label-background-color);
-  padding: var(--space-smallest);
-  font-size: var(--combobox-group-label-font-size);
-  font-weight: var(--font-weight-medium);
-  border-bottom: 1px solid var(--combobox-listbox-border-color);
-}
-
-.ComboboxGroup--hidden {
-  display: none !important;
-}
-
-.ComboboxOption {
-  color: var(--combobox-option-font-color);
-  padding: var(--space-smallest);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: var(--space-half);
-  justify-content: space-between;
-  min-height: var(--combobox-option-min-height);
-}
-
-.ComboboxOption:not(:last-child) {
-  border-bottom: 1px solid var(--combobox-listbox-border-color);
-}
-
-.ComboboxOption--active {
-  box-shadow: inset 0 0 0 1px var(--combobox-listbox-background-color),
-    inset 0 0 0 3px var(--focus);
-}
-
-.ComboboxOption:is(:hover, [role='option'][aria-selected='true']:hover) {
-  background-color: var(--combobox-option-hover-background-color);
-}
-
-.ComboboxOption .Icon {
-  color: var(--combobox-option-selected-icon-color);
-}
-
-.ComboboxOption .Icon svg {
-  padding: 4px;
-  height: 1.6em;
-  width: 1.6em;
-  border: 2.5px solid currentColor;
-  border-radius: 50%;
-}
-
-.ComboboxOption__match {
-  text-decoration: underline;
-  font-style: normal;
-  font-weight: var(--font-weight-medium);
-}
-
-.ComboboxOption__description {
-  padding-top: var(--space-half);
-  padding-bottom: var(--space-quarter);
-  color: var(--combobox-option-description-font-color);
-  font-size: var(--combobox-option-description-font-size);
-}
-
-.Combobox__input--error {
-  border: 1px solid var(--combobox-input-error-border-color);
-}
-
-.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);
-}
-
-.ComboboxListbox__empty {
-  padding: var(--space-smaller);
-  text-align: center;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "5.8.1-canary.09258572",
+  "version": "5.8.1",
   "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"
   }
-}
+}