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

package/dist/index.css

@@ -40,7 +40,7 @@
   --accent-secondary: var(--gray-20);
   --accent-secondary-active: var(--gray-30);
   --focus-light: #b51ad1;
-  --focus-dark: #eb94ff;
+  --focus-dark: #f5a4ff;
   --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-primary);
+  box-shadow: 0 0 0 1px var(--button-outline-color-secondary);
 }
 
 .Button--primary:focus:before,
@@ -1467,7 +1467,11 @@ 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 {
@@ -1482,6 +1486,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 +1497,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 +1506,6 @@ textarea,
 [role='menuitemcheckbox'],
 [role='menuitemradio'],
 [role='textbox'],
-[aria-haspopup='listbox'],
 [role='listbox'],
 [role='spinbutton'] {
   width: 100%;
@@ -1517,7 +1522,6 @@ textarea,
 [role='menuitemcheckbox'],
 [role='menuitemradio'],
 [role='textbox'],
-[aria-haspopup='listbox'],
 [role='listbox'],
 [role='spinbutton'] {
   border: 1px solid var(--field-border-color);
@@ -1529,7 +1533,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 +1548,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 +1559,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 +1570,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 +1579,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 +1591,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 +1602,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 +1616,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;
@@ -1749,7 +1763,7 @@ textarea.Field--has-error:focus:hover,
 .Field__text-input {
   padding: var(--space-smallest);
   box-sizing: border-box;
-  font-size: var(--text-size-small);
+  font-size: var(--field-font-size);
   color: var(--field-content-color);
   min-width: min(var(--input-min-width), 100%);
 }
@@ -1763,7 +1777,7 @@ textarea.Field--has-error:focus:hover,
 .Field__textarea {
   display: block;
   min-height: 56px;
-  font-size: var(--text-size-small);
+  font-size: var(--field-font-size);
   min-width: min(var(--input-min-width), 100%);
   padding: var(--space-half);
   max-width: 500px;
@@ -1783,11 +1797,18 @@ 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);
 }
@@ -1815,6 +1836,16 @@ 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);
@@ -4001,6 +4032,126 @@ 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);
@@ -4838,3 +4989,252 @@ 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.0",
+  "version": "5.8.1-canary.09258572",
   "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"
   }
-}
+}