@deque/cauldron-styles 6.15.0-canary.ef3cca6b → 6.16.0

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 {
@@ -1891,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 {
@@ -2137,7 +2143,7 @@ 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:is(.OptionsMenu--expanded) {
@@ -2163,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);
 }
 
@@ -2652,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);
@@ -3171,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;
@@ -3653,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);
 }
@@ -3840,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);
 }
 
@@ -4104,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);
@@ -4224,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);
@@ -4709,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 {
@@ -4788,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);
 }
 
@@ -4987,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);
 }
 
@@ -5053,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 {
@@ -5183,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 {
@@ -5289,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;
@@ -5312,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%);
@@ -5392,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);
 }
 
@@ -5430,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;
@@ -5710,7 +5749,8 @@ button.Accordion__trigger {
   max-height: var(--drawer-height, 100vh);
   max-width: var(--drawer-width, 100vw);
   z-index: var(--z-index-drawer);
-  transition: transform ease-in-out 250ms;
+  transition: transform var(--drawer-animation-timing-function, ease-out)
+    var(--drawer-animation-timing, 250ms);
 }
 
 .Drawer--top,
@@ -5778,6 +5818,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.15.0-canary.ef3cca6b",
+  "version": "6.16.0",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",