@deque/cauldron-styles 6.16.0-canary.86fe67a7 → 6.16.0-canary.95899edb

package/dist/index.css

@@ -579,7 +579,8 @@ textarea:focus,
 [role='spinbutton']:focus {
   outline: 0;
   border: 1px solid var(--field-border-color-focus);
-  box-shadow: 0 0 0 1px var(--field-border-color-focus),
+  box-shadow:
+    0 0 0 1px var(--field-border-color-focus),
     0 0 5px var(--field-border-color-focus-glow),
     inset 0 1px 2px rgba(0, 0, 0, 0.05);
 }
@@ -604,7 +605,8 @@ textarea:focus:hover,
 [role='listbox']:focus:hover,
 [role='spinbutton']:focus:hover {
   border: 1px solid var(--field-border-color-focus-hover);
-  box-shadow: 0 0 0 1px var(--field-border-color-focus-hover),
+  box-shadow:
+    0 0 0 1px var(--field-border-color-focus-hover),
     0 0 5px var(--field-border-color-focus-glow),
     inset 0 1px 2px rgba(0, 0, 0, 0.05);
 }
@@ -651,7 +653,8 @@ textarea.Field--has-error:hover,
 [role='listbox'].Field--has-error:hover,
 [role='spinbutton'].Field--has-error:hover {
   border-color: var(--field-border-color-error-hover);
-  box-shadow: 0 0 0 1px var(--field-border-color-error),
+  box-shadow:
+    0 0 0 1px var(--field-border-color-error),
     inset 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
@@ -664,7 +667,8 @@ textarea.Field--has-error:focus,
 [role='listbox'].Field--has-error:focus,
 [role='spinbutton'].Field--has-error:focus {
   border: 1px solid var(--field-border-color-error);
-  box-shadow: 0 0 0 1px var(--field-border-color-error),
+  box-shadow:
+    0 0 0 1px var(--field-border-color-error),
     0 0 5px var(--field-border-color-error-focus-glow),
     inset 0 1px 2px rgba(0, 0, 0, 0.05);
 }
@@ -696,13 +700,22 @@ textarea.Field--has-error:focus:hover,
   color: var(--field-listbox-selected-text-color);
 }
 
-.Error {
+.Error,
+.Field__error {
+  --icon-size: var(--text-size-base);
   color: var(--field-error-text-color);
+  display: flex;
+  gap: var(--space-half);
   text-align: left;
   font-size: var(--text-size-smallest);
   font-weight: var(--font-weight-normal);
 }
 
+.Field__error {
+  font-size: var(--text-size-small);
+  margin-bottom: var(--space-smallest);
+}
+
 .Checkbox__wrap .Error {
   margin-top: var(--space-half);
   border-top: 1px solid var(--field-error-border-color);
@@ -771,12 +784,21 @@ textarea.Field--has-error:focus:hover,
   align-items: center;
   text-align: left;
   color: var(--field-label-text-color);
-  margin-bottom: var(--space-half);
+  margin-bottom: var(--space-smallest);
   font-size: var(--text-size-small);
   font-weight: var(--font-weight-medium);
   cursor: default;
 }
 
+.Field__description {
+  display: flex;
+  align-items: center;
+  text-align: left;
+  font-size: var(--text-size-small);
+  color: var(--field-label-description-text-color);
+  margin-bottom: var(--space-smallest);
+}
+
 .Field__label + .Checkbox__wrap {
   margin-top: var(--space-half);
 }
@@ -1195,7 +1217,7 @@ textarea.Field--has-error:focus:hover,
   --button-background-color-primary-active: var(--accent-primary-active);
 
   --button-background-color-secondary: var(--gray-20);
-  --button-background-color-secondary-disabled: var(--gray-30);
+  --button-background-color-secondary-disabled: var(--gray-20);
   --button-outline-color-secondary: var(--gray-90);
   --button-background-color-secondary-active: var(--gray-30);
   --button-border-color-secondary: var(--gray-40);
@@ -4101,7 +4123,7 @@ button.TooltipTabstop {
   --panel-border-color: var(--gray-40);
   --panel-background-color: var(--white);
   --panel-heading-color: var(--gray-90);
-  --panel-padding: var(--space-small);
+  --panel-padding: var(--space-large);
   --panel-divider-border-color: var(--gray-40);
   --panel-content-color: var(--gray-80);
 }
@@ -4110,7 +4132,7 @@ button.TooltipTabstop {
   padding: var(--panel-padding);
   margin: 0;
   border: 1px solid var(--panel-border-color);
-  border-radius: 3px;
+  border-radius: 16px;
   box-shadow: var(--drop-shadow-raised);
   background-color: var(--panel-background-color);
   word-break: break-word;
@@ -5834,3 +5856,74 @@ button.Accordion__trigger {
   padding-bottom: var(--space-small);
   margin-bottom: var(--space-small);
 }
+
+:root {
+  --page-header-overline-color: var(--gray-60);
+}
+
+.cauldron--theme-dark {
+  --page-header-overline-color: var(--accent-light);
+}
+
+.PageHeader__overline {
+  margin: 0 0 var(--space-smallest) 0;
+  padding: 0;
+  color: var(--page-header-overline-color);
+  font-size: var(--text-size-base);
+}
+
+:root {
+  --section-header-description-color: var(--gray-60);
+}
+
+.cauldron--theme-dark {
+  --section-header-description-color: var(--accent-light);
+}
+
+.SectionHeader {
+  container-type: inline-size;
+}
+
+.SectionHeader__content {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-areas:
+    'heading'
+    'description'
+    'children';
+}
+
+.SectionHeader__actions {
+  margin-top: var(--space-small);
+  grid-area: children;
+}
+
+.SectionHeader .SectionHeader__content .SectionHeader__description {
+  margin: var(--space-smallest) 0 0 0;
+  padding: 0;
+  color: var(--section-header-description-color);
+  font-size: var(--text-size-base);
+  grid-area: description;
+}
+
+.SectionHeader :is(h1, h2, h3, h4, h5, h6) {
+  font-weight: var(--font-weight-medium);
+  margin: 0;
+  padding: 0;
+}
+
+@container (min-width: 48rem) {
+  .SectionHeader__content {
+    grid-template-columns: 1fr auto;
+    grid-template-areas:
+      'heading children'
+      'description children';
+    align-items: start;
+  }
+
+  .SectionHeader__actions {
+    margin: 0;
+    align-self: center;
+    justify-self: end;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "6.16.0-canary.86fe67a7",
+  "version": "6.16.0-canary.95899edb",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",