@deque/cauldron-styles 6.27.0-canary.f0603405 → 7.0.0

package/dist/index.css

@@ -265,7 +265,8 @@ button,
   line-height: normal;
   vertical-align: middle;
   text-align: center;
-  user-select: none;
+  -moz-user-select: none;
+       user-select: none;
   -webkit-user-drag: none;
   box-sizing: border-box;
   border: 0;
@@ -601,6 +602,11 @@ textarea:focus:hover,
     inset 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
+input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
+  color: var(--field-placeholder-color);
+  font-style: italic;
+}
+
 input::placeholder,
 textarea::placeholder {
   color: var(--field-placeholder-color);
@@ -919,7 +925,9 @@ textarea.Field--has-error:focus:hover,
   opacity: 0;
   top: 8px;
   left: 8px;
-  appearance: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
 }
 
 .Checkbox input[type='checkbox']:indeterminate ~ .Checkbox__overlay.Icon {
@@ -988,7 +996,9 @@ textarea.Field--has-error:focus:hover,
   opacity: 0;
   top: 8px;
   left: 8px;
-  appearance: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
 }
 
 .Field__label:hover ~ .Checkbox__overlay:not(.Checkbox__overlay--disabled),
@@ -1242,6 +1252,7 @@ textarea.Field--has-error:focus:hover,
   justify-items: center;
   justify-content: center;
   gap: var(--space-smallest);
+  min-width: -moz-max-content;
   min-width: max-content;
 }
 
@@ -1465,11 +1476,13 @@ button.Link {
   font-size: inherit;
   vertical-align: baseline;
   cursor: auto;
-  user-select: text;
+  -moz-user-select: text;
+       user-select: text;
 }
 
 .Button--thin {
   min-height: var(--button-thin-height);
+  min-width: -moz-max-content;
   min-width: max-content;
   font-size: var(--button-thin-text-size);
   padding: 0 var(--space-small);
@@ -1942,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;
 }
@@ -1962,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);
 }
 
@@ -2099,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;
   }
 }
@@ -2214,6 +2228,7 @@ a.IconButton {
 }
 
 .Link:where(:has(.Icon)) {
+  width: -moz-fit-content;
   width: fit-content;
   display: inline-flex;
   align-items: center;
@@ -2423,9 +2438,12 @@ a.IconButton {
   font-style: normal;
   font-size: var(--text-size-small);
   color: var(--field-content-color);
-  text-decoration: rgb(102, 102, 102);
+  -webkit-text-decoration: rgb(102, 102, 102);
+          text-decoration: rgb(102, 102, 102);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
-  appearance: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
 }
 
 .Field__select--wrapper select:not([disabled]):hover {
@@ -2444,8 +2462,6 @@ a.IconButton {
   border-color: var(--field-border-color-focus-hover);
 }
 
-/* autoprefixer: off */
-
 .Field__select--wrapper select:user-invalid,
 .Field--has-error select {
   border-width: 1px;
@@ -2472,8 +2488,6 @@ a.IconButton {
   border-color: var(--field-border-color-error-hover);
 }
 
-/* autoprefixer: on */
-
 :root {
   --menu-width: 257px;
 }
@@ -2605,7 +2619,9 @@ a.IconButton {
 .RadioCard input[type='radio'] {
   position: absolute;
   opacity: 0;
-  appearance: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   height: 1px;
   width: 1px;
 }
@@ -2716,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 {
@@ -2749,6 +2783,7 @@ a.IconButton {
   border: 0;
   height: calc(var(--text-size-small) + 9px);
   color: currentColor;
+  flex-shrink: 0;
 }
 
 .Toast__dismiss:focus {
@@ -2765,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 {
@@ -3000,7 +3038,8 @@ button.TooltipTabstop {
   background-color: var(--top-bar-background-color);
   color: var(--top-bar-text-color);
   border-bottom: var(--top-bar-border-bottom);
-  padding-inline-start: var(--top-bar-padding-inline-start);
+  -webkit-padding-start: var(--top-bar-padding-inline-start);
+          padding-inline-start: var(--top-bar-padding-inline-start);
 }
 
 .TopBar--thin .TopBar {
@@ -3189,7 +3228,8 @@ button.TooltipTabstop {
   border-radius: 2px;
 }
 
-.SkipLink span {
+.SkipLink .SkipLink__item--first,
+.SkipLink .SkipLink__item--second {
   display: block;
 }
 
@@ -5225,7 +5265,8 @@ button.Accordion__trigger {
   font-size: var(--text-size-small);
   margin-top: var(--space-small);
   color: var(--accordion-trigger-text-color);
-  text-decoration: var(--accordion-trigger-text-decoration);
+  -webkit-text-decoration: var(--accordion-trigger-text-decoration);
+          text-decoration: var(--accordion-trigger-text-decoration);
 }
 
 .Accordion__trigger[aria-expanded='true'] {
@@ -5238,7 +5279,8 @@ button.Accordion__trigger {
   box-shadow: inset 8px 0 0 -4px var(--accordion-trigger-box-shadow-hover);
   color: var(--accordion-trigger-text-color-hover);
   transition: all 0.2s ease-in-out;
-  text-decoration: underline solid var(--accordion-trigger-text-color-hover);
+  -webkit-text-decoration: underline solid var(--accordion-trigger-text-color-hover);
+          text-decoration: underline solid var(--accordion-trigger-text-color-hover);
 }
 
 .Accordion__trigger:hover .Icon {
@@ -5858,7 +5900,8 @@ button.Accordion__trigger {
 
 .TextEllipsis:where([role='button']) {
   text-align: inherit;
-  user-select: inherit;
+  -moz-user-select: inherit;
+       user-select: inherit;
 }
 
 .TextEllipsis--multiline {

package/package.json

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