@deque/cauldron-styles 6.14.0 → 6.15.0-canary.05150a80

package/dist/index.css

@@ -139,6 +139,12 @@
   --target-size: 44px;
   --target-size-enhanced: var(--target-size);
   --target-size-minimum: 24px;
+
+  /* drop shadows */
+  --drop-shadow-overlay:
+    0 8px 8px -4px rgba(0, 0, 0, 0.04), 0 20px 24px -4px rgba(51, 51, 51, 0.08);
+  --drop-shadow-raised:
+    0 2px 4px -2px rgba(51, 51, 51, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
 }
 
 .cauldron--theme-dark {
@@ -1194,6 +1200,8 @@ textarea.Field--has-error:focus:hover,
   --button-background-color-secondary-active: var(--gray-30);
   --button-border-color-secondary: var(--gray-40);
 
+  --button-background-color-badge-active: var(--gray-20);
+
   --button-background-color-error: var(--error);
   --button-background-color-error-disabled: #db6379;
   --button-background-color-error-active: var(--accent-error-active);
@@ -1232,10 +1240,29 @@ textarea.Field--has-error:focus:hover,
   gap: var(--space-smallest);
 }
 
-.Button--tag {
+.Button--tag,
+.Button--badge {
   position: relative;
 }
 
+.Button--badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--space-small) 0 var(--space-smaller);
+  background-color: var(--badge-background-color);
+  color: var(--badge-text-color);
+  border: 1px solid var(--badge-border-color);
+  border-radius: var(--badge-height);
+  font-size: var(--text-size-body);
+  font-weight: var(--font-weight-normal);
+  min-height: var(--badge-height);
+}
+
+.Button--badge:not([disabled], [aria-disabled='true']):active {
+  background-color: var(--button-background-color-badge-active);
+}
+
 button.Link {
   cursor: pointer;
   font-size: inherit;
@@ -1255,7 +1282,8 @@ button.Link {
 .Button--tertiary:before,
 .Button--clear:before,
 .Button--error:before,
-.Button--tag:before {
+.Button--tag:before,
+.Button--badge:before {
   content: '';
   position: absolute;
   top: -2px;
@@ -1266,7 +1294,8 @@ button.Link {
   pointer-events: none;
 }
 
-.Button--tag:before {
+.Button--tag:before,
+.Button--badge:before {
   border-radius: var(--button-height);
 }
 
@@ -1283,7 +1312,8 @@ button.Link {
   box-shadow: 0 0 0 1px var(--button-outline-color-error);
 }
 
-.Button--tag:not([disabled]):not([aria-disabled='true']):hover:before {
+.Button--tag:not([disabled]):not([aria-disabled='true']):hover:before,
+.Button--badge:not([disabled]):not([aria-disabled='true']):hover:before {
   box-shadow: 0 0 0 1px var(--button-outline-color-secondary);
 }
 
@@ -1351,7 +1381,8 @@ button.Link {
   background-color: var(--button-background-color-error-active);
 }
 
-.Button--tag:is([disabled], [aria-disabled='true']) {
+.Button--tag:is([disabled], [aria-disabled='true']),
+.Button--badge:is([disabled], [aria-disabled='true']) {
   color: var(--disabled);
 }
 
@@ -1426,6 +1457,8 @@ button.Link {
   --button-background-color-secondary-active: var(--accent-light);
   --button-background-color-error-active: #fea7a6;
 
+  --button-background-color-badge-active: var(--badge-background-color);
+
   --button-focus-ring-color: var(--focus-dark);
   --field-label-text-color: var(--accent-light);
   --field-border-color-error: var(--accent-danger);
@@ -1462,7 +1495,8 @@ button.Link {
 .cauldron--theme-dark .Button--primary:is([disabled], [aria-disabled='true']),
 .cauldron--theme-dark .Button--secondary:is([disabled], [aria-disabled='true']),
 .cauldron--theme-dark .Button--error:is([disabled], [aria-disabled='true']),
-.cauldron--theme-dark .Button--tag:is([disabled], [aria-disabled='true']) {
+.cauldron--theme-dark .Button--tag:is([disabled], [aria-disabled='true']),
+.cauldron--theme-dark .Button--badge:is([disabled], [aria-disabled='true']) {
   color: var(--dark-workspace-color);
 }
 
@@ -1510,7 +1544,9 @@ button.Link {
 }
 
 .cauldron--theme-dark
-  .Button--tag:not([disabled]):not([aria-disabled='true']):hover:before {
+  .Button--tag:not([disabled]):not([aria-disabled='true']):hover:before,
+.cauldron--theme-dark
+  .Button--badge:not([disabled]):not([aria-disabled='true']):hover:before {
   box-shadow: 0 0 0 1px var(--dark-workspace-color),
     0 0 0 2px var(--accent-info);
 }
@@ -1861,7 +1897,7 @@ a.IconButton {
   border: 1px solid var(--dialog-border-color);
   z-index: var(--z-index-dialog);
   position: relative;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--drop-shadow-overlay);
 }
 
 .Dialog__header {
@@ -2107,10 +2143,10 @@ a.IconButton {
   min-width: 150px;
   max-height: 140px;
   overflow-y: auto;
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: var(--drop-shadow-overlay);
 }
 
-.OptionsMenu__list[aria-expanded='true'] {
+.OptionsMenu__list:is(.OptionsMenu--expanded) {
   display: block;
 }
 
@@ -2133,7 +2169,8 @@ a.IconButton {
 }
 
 .OptionsMenu__list-item:focus {
-  box-shadow: inset 0 0 0 1px var(--options-menu-hover-background-color),
+  box-shadow:
+    inset 0 0 0 1px var(--options-menu-hover-background-color),
     inset 0 0 0 3px var(--focus);
 }
 
@@ -2622,7 +2659,7 @@ a.IconButton {
   --tooltip-background-color: var(--gray-10);
   --tooltip-border-color: var(--gray-90);
   --tooltip-text-color: var(--gray-90);
-  --tooltip-box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 10px 0px;
+  --tooltip-box-shadow: var(--drop-shadow-overlay);
   --tooltip-info-background-color: var(--white);
   --tooltip-info-border-color: var(--accent-primary);
   --tooltip-info-text-color: var(--gray-90);
@@ -3141,7 +3178,7 @@ button.TooltipTabstop {
   padding: var(--space-large) var(--space-small) var(--space-small)
     var(--space-small);
   z-index: var(--z-index-loader);
-  box-shadow: 1px 1px 7px 0 rgba(0, 0, 0, 0.3);
+  box-shadow: var(--drop-shadow-overlay);
   font-size: var(--text-size-smaller);
   color: var(--text-color-base);
   text-align: center;
@@ -3623,7 +3660,7 @@ button.TooltipTabstop {
   --table-row-border-color: var(--gray-20);
   --table-space: var(--space-small);
   --table-header-sorting-border-color: var(--gray-90);
-  --table-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
+  --table-box-shadow: var(--drop-shadow-raised);
   --table-odd-row-background: var(--gray-10);
   --table-sort-hover-focus-ring-color: var(--gray-90);
 }
@@ -3810,7 +3847,7 @@ button.TooltipTabstop {
   font-size: var(--text-size-small);
   border-radius: 3px;
   border: 1px solid var(--data-list-border-color);
-  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--drop-shadow-raised);
   margin-bottom: var(--space-small);
 }
 
@@ -4074,7 +4111,7 @@ button.TooltipTabstop {
   margin: 0;
   border: 1px solid var(--panel-border-color);
   border-radius: 3px;
-  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--drop-shadow-raised);
   background-color: var(--panel-background-color);
   word-break: break-word;
   color: var(--panel-content-color);
@@ -4194,7 +4231,7 @@ fieldset.Panel {
   --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-box-shadow: var(--drop-shadow-overlay);
   --popover-font-size: var(--text-size-smaller);
   --popover-line-height: var(--text-size-normal);
   --popover-padding: 0 var(--space-small);
@@ -4679,7 +4716,7 @@ fieldset.Panel {
   border: 1px solid var(--two-column-panel-border-color);
   background-color: var(--two-column-panel-background-color);
   border-radius: var(--two-column-panel-border-radius);
-  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--drop-shadow-raised);
 }
 
 .TwoColumnPanel__Header {
@@ -4758,7 +4795,8 @@ fieldset.Panel {
   ul
   li
   a[aria-current]:not([aria-current='false']):last-child {
-  box-shadow: inset 4px 0 0 var(--tab-shadow-color),
+  box-shadow:
+    inset 4px 0 0 var(--tab-shadow-color),
     0px 1px 0px 0px var(--two-column-panel-border-color);
 }
 
@@ -4957,6 +4995,7 @@ fieldset.Panel {
   --accordion-panel-background-color: var(--white);
   --accordion-panel-text-color: var(--gray-90);
   --accordion-panel-border-color: var(--gray-40);
+  /* deprecated, not used */
   --accordion-box-shadow-color: rgba(0, 0, 0, 0.15);
 }
 
@@ -5023,7 +5062,10 @@ button.Accordion__trigger {
   border: 1px solid var(--accordion-panel-border-color);
   border-top: 0;
   border-radius: 0 0 3px 3px;
-  box-shadow: 0 2px 3px 0 var(--accordion-box-shadow-color);
+}
+
+.Accordion:has(> button[aria-expanded='true']) {
+  box-shadow: var(--drop-shadow-raised);
 }
 
 :root {
@@ -5153,6 +5195,8 @@ button.Accordion__trigger {
   --combobox-group-label-background-color: var(--gray-20);
   --combobox-group-label-font-size: var(--text-size-smaller);
   --combobox-option-selected-icon-color: var(--accent-primary);
+  --combobox-pill-height: 1.65rem;
+  --combobox-pill-icon-size: 18px;
 }
 
 .cauldron--theme-dark {
@@ -5259,6 +5303,10 @@ button.Accordion__trigger {
   margin-right: 1.25rem;
 }
 
+.Combobox .TextFieldWrapper input:is([disabled]) {
+  background-color: var(--field-background-color-disabled);
+}
+
 .Combobox__arrow {
   width: 2rem;
   display: flex;
@@ -5282,7 +5330,7 @@ button.Accordion__trigger {
   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);
+  box-shadow: var(--drop-shadow-overlay);
   background-color: var(--combobox-listbox-background-color);
   z-index: var(--z-index-listbox);
   max-width: var(--combobox-listbox-max-width, 100%);
@@ -5362,7 +5410,8 @@ button.Accordion__trigger {
 }
 
 .ComboboxOption--active {
-  box-shadow: inset 0 0 0 1px var(--combobox-listbox-background-color),
+  box-shadow:
+    inset 0 0 0 1px var(--combobox-listbox-background-color),
     inset 0 0 0 3px var(--focus);
 }
 
@@ -5400,6 +5449,26 @@ button.Accordion__trigger {
   text-align: center;
 }
 
+.Combobox--multiselect .TextFieldWrapper {
+  flex-wrap: wrap;
+  gap: var(--space-half);
+  padding-left: var(--space-half);
+  padding-right: var(--space-large);
+}
+
+.Combobox--multiselect .TextFieldWrapper input {
+  width: auto;
+}
+
+.ComboboxPill {
+  --tag-height: var(--combobox-pill-height);
+  --icon-size: var(--combobox-pill-icon-size);
+}
+
+.ComboboxPill + .ComboboxPill {
+  margin: 0;
+}
+
 :root {
   --timeline-mark-color: var(--accent-success-dark);
   --timeline-mark-border-color: #fff;
@@ -5678,7 +5747,7 @@ button.Accordion__trigger {
 .Drawer {
   position: fixed;
   max-height: var(--drawer-height, 100vh);
-  max-width: var(--drawer-height, 100vw);
+  max-width: var(--drawer-width, 100vw);
   z-index: var(--z-index-drawer);
   transition: transform ease-in-out 250ms;
 }
@@ -5748,6 +5817,7 @@ button.Accordion__trigger {
   border-top-left-radius: var(--space-small);
   border-top-right-radius: var(--space-small);
   padding: var(--space-large) var(--space-small);
+  box-shadow: var(--drop-shadow-overlay);
 }
 
 .BottomSheet__title {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "6.14.0",
+  "version": "6.15.0-canary.05150a80",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",