@deque/cauldron-styles 6.27.0 → 7.0.0

package/dist/index.css

@@ -1955,7 +1955,7 @@ a.IconButton {
   --dialog-footer-border: 1px solid var(--dialog-border-color);
   --dialog-header-height: 2.625rem;
   --dialog-close-button-size: var(--target-size-minimum);
-  --dialog-vertical-offset: 6.25rem;
+  --dialog-vertical-offset: 4rem;
   --dialog-bottom-spacing: 1.875rem;
   --dialog-content-line-height: inherit;
 }
@@ -1975,6 +1975,7 @@ a.IconButton {
   overflow-x: auto;
   position: fixed;
   top: 0;
+  z-index: var(--z-index-dialog-scrim);
   background-color: var(--scrim-background-color);
 }
 
@@ -2112,13 +2113,13 @@ a.IconButton {
 }
 
 @media (min-width: 20rem) {
-  .Dialog__inner {
+  .Modal--scrollable .Dialog__inner {
     max-height: calc(
       100vh - var(--dialog-vertical-offset) - var(--dialog-bottom-spacing)
     );
   }
 
-  .Dialog__content {
+  .Modal--scrollable .Dialog__content {
     overflow-y: auto;
   }
 }
@@ -2227,8 +2228,8 @@ a.IconButton {
 }
 
 .Link:where(:has(.Icon)) {
-  max-width: -moz-max-content;
-  max-width: max-content;
+  width: -moz-fit-content;
+  width: fit-content;
   display: inline-flex;
   align-items: center;
   gap: var(--space-half);
@@ -2461,18 +2462,19 @@ a.IconButton {
   border-color: var(--field-border-color-focus-hover);
 }
 
-.Field__select--wrapper select:invalid,
+.Field__select--wrapper select:user-invalid,
 .Field--has-error select {
   border-width: 1px;
   border-color: var(--field-border-color-error);
 }
 
+.Field__select--wrapper select:user-invalid:hover,
 .Field__select--wrapper.Field--has-error select:hover {
   border-color: var(--field-border-color-error-hover);
   box-shadow: 0 0 0 1px var(--field-border-color-error-hover);
 }
 
-.Field__select--wrapper select:invalid:focus,
+.Field__select--wrapper select:user-invalid:focus,
 .Field__select--wrapper.Field--has-error select:focus {
   border-color: var(--field-border-color-error);
   box-shadow:
@@ -2481,7 +2483,7 @@ a.IconButton {
     var(--field-border-color-error-focus-glow) 0 0 5px 0;
 }
 
-.Field__select--wrapper select:invalid:focus:hover,
+.Field__select--wrapper select:user-invalid:focus:hover,
 .Field__select--wrapper.Field--has-error select:focus:hover {
   border-color: var(--field-border-color-error-hover);
 }
@@ -2730,15 +2732,33 @@ a.IconButton {
   box-sizing: border-box;
   display: flex;
   padding: var(--space-smallest) var(--space-small);
+  max-height: calc(100vh - var(--top-bar-height));
 }
 
 .Toast.Toast--non-dismissible {
   position: static;
   margin-bottom: var(--space-small);
+  max-height: none;
 }
 
 .TopBar--thin .Toast {
   top: var(--top-bar-height-thin);
+  max-height: calc(100vh - var(--top-bar-height-thin));
+}
+
+.TopBar--thin .Toast.Toast--non-dismissible {
+  max-height: none;
+}
+
+.TopBar--thin .Toast .Toast__message-content {
+  max-height: calc(
+    100vh - var(--top-bar-height-thin) - 2 * var(--space-smallest)
+  );
+}
+
+.Toast.Toast--non-dismissible .Toast__message-content {
+  max-height: none;
+  overflow-y: visible;
 }
 
 .Toast.Toast--success {
@@ -2763,6 +2783,7 @@ a.IconButton {
   border: 0;
   height: calc(var(--text-size-small) + 9px);
   color: currentColor;
+  flex-shrink: 0;
 }
 
 .Toast__dismiss:focus {
@@ -2779,10 +2800,13 @@ a.IconButton {
 .Toast__message .Toast__message-content {
   border-top: 4px solid transparent;
   border-bottom: 4px solid transparent;
+  overflow-y: auto;
+  max-height: calc(100vh - var(--top-bar-height) - 2 * var(--space-smallest));
 }
 
 .Toast__message .Icon {
   margin-right: var(--space-smallest);
+  flex-shrink: 0;
 }
 
 .Toast__message .fa {
@@ -3204,7 +3228,8 @@ button.TooltipTabstop {
   border-radius: 2px;
 }
 
-.SkipLink span {
+.SkipLink .SkipLink__item--first,
+.SkipLink .SkipLink__item--second {
   display: block;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "6.27.0",
+  "version": "7.0.0",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",