@deque/cauldron-styles 6.16.0 → 6.17.0-canary.64502018

package/dist/index.css

@@ -546,8 +546,6 @@ ul.semantic-only {
 input,
 select,
 textarea,
-[role='menuitemcheckbox'],
-[role='menuitemradio'],
 [role='textbox'],
 [role='listbox'],
 [role='spinbutton'] {
@@ -561,8 +559,6 @@ textarea,
 .cauldron--theme-dark input,
 select,
 textarea,
-[role='menuitemcheckbox'],
-[role='menuitemradio'],
 [role='textbox'],
 [role='listbox'],
 [role='spinbutton'] {
@@ -572,14 +568,13 @@ textarea,
 input:focus,
 select:focus,
 textarea:focus,
-[role='menuitemcheckbox']:focus,
-[role='menuitemradio']:focus,
 [role='textbox']:focus,
 [role='listbox']: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);
 }
@@ -587,8 +582,6 @@ textarea:focus,
 input:hover,
 select:hover,
 textarea:hover,
-[role='menuitemcheckbox']:hover,
-[role='menuitemradio']:hover,
 [role='textbox']:hover,
 [role='listbox']:hover,
 [role='spinbutton']:hover {
@@ -598,13 +591,13 @@ textarea:hover,
 input:focus:hover,
 select:focus:hover,
 textarea:focus:hover,
-[role='menuitemcheckbox']:focus:hover,
 [role='menuitemradio']:focus:hover,
 [role='textbox']: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);
 }
@@ -623,8 +616,6 @@ textarea::placeholder {
 input.Field--has-error,
 select.Field--has-error,
 textarea.Field--has-error,
-[role='menuitemcheckbox'].Field--has-error,
-[role='menuitemradio'].Field--has-error,
 [role='textbox'].Field--has-error,
 [role='listbox'].Field--has-error,
 [role='spinbutton'].Field--has-error {
@@ -645,26 +636,24 @@ textarea.Field--has-error,
 input.Field--has-error:hover,
 select.Field--has-error:hover,
 textarea.Field--has-error:hover,
-[role='menuitemcheckbox'].Field--has-error:hover,
-[role='menuitemradio'].Field--has-error:hover,
 [role='textbox'].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);
 }
 
 input.Field--has-error:focus,
 select.Field--has-error:focus,
 textarea.Field--has-error:focus,
-[role='menuitemcheckbox'].Field--has-error:focus,
-[role='menuitemradio'].Field--has-error:focus,
 [role='textbox'].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);
 }
@@ -672,8 +661,6 @@ textarea.Field--has-error:focus,
 input.Field--has-error:focus:hover,
 select.Field--has-error:focus:hover,
 textarea.Field--has-error:focus:hover,
-[role='menuitemcheckbox'].Field--has-error:focus:hover,
-[role='menuitemradio'].Field--has-error:focus:hover,
 [role='textbox'].Field--has-error:focus:hover,
 [role='listbox'].Field--has-error:focus:hover,
 [role='spinbutton'].Field--has-error:focus:hover {
@@ -696,13 +683,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 +767,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 +1200,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);
@@ -3982,8 +3987,8 @@ button.TooltipTabstop {
 
   --step-current-indicator-background: #fff;
   --step-current-indicator-color: var(--accent-dark);
-  --step-current-indicator-shadow: 0 0 0 2px var(--accent-dark),
-    0 0 0 4px var(--accent-info);
+  --step-current-indicator-shadow:
+    0 0 0 2px var(--accent-dark), 0 0 0 4px var(--accent-info);
   --step-current-complete-line-border-color: var(--accent-info);
 
   --step-complete-indicator-background: var(--accent-info);
@@ -4002,7 +4007,6 @@ button.TooltipTabstop {
   align-items: flex-start;
   color: var(--stepper-color);
   background-color: var(--stepper-background-color);
-  counter-reset: stepper;
   list-style-type: none;
   margin: 0 auto;
 }
@@ -4046,8 +4050,7 @@ button.TooltipTabstop {
 
 .Stepper__step-indicator:before {
   font-size: var(--text-size-small);
-  counter-increment: stepper;
-  content: counter(stepper);
+  content: counter(list-item);
 }
 
 .Stepper__step-label {
@@ -5834,3 +5837,321 @@ 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;
+  }
+}
+
+:root {
+  --empty-state-border-color: var(--gray-30);
+}
+
+.cauldron--theme-dark {
+  --empty-state-border-color: var(--accent-light);
+}
+
+.EmptyState > :where(h1, h2, h3, h4, h5, h6) {
+  font-size: var(--text-size-heading-3);
+  line-height: var(--line-height-heading-3);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.EmptyState > :where(h1, h2, h3, h4, h5, h6) + :where(p) {
+  margin-top: 0.25rem;
+  margin-bottom: 0;
+}
+
+.EmptyState__primary {
+  padding-top: var(--space-small);
+}
+
+.EmptyState__secondary {
+  margin-top: var(--space-small);
+  padding-top: var(--space-small);
+  border-top: 1px solid var(--empty-state-border-color);
+}
+
+:root {
+  --action-menu-border-color: var(--gray-30);
+  --action-menu-background-color: #fff;
+}
+
+.cauldron--theme-dark {
+  --action-menu-background-color: var(--accent-medium);
+}
+
+.ActionMenu {
+  border: 1px solid var(--action-menu-border-color);
+  background-color: var(--action-menu-background-color);
+  padding: var(--space-smallest) 0;
+  border-radius: 8px;
+  width: var(--action-menu-width);
+  min-width: var(--action-menu-min-width, 10rem);
+  max-height: var(--action-menu-height);
+  box-shadow: var(--drop-shadow-overlay);
+  overflow-y: auto;
+}
+
+:root {
+  --action-list-background-color: #fff;
+  --action-list-text-color: var(--gray-90);
+  --action-list-group-label-font-size: var(--text-size-base);
+  --action-list-item-hover-background-color: var(--gray-20);
+  --action-list-item-description-color: var(--gray-60);
+  --action-list-item-icon-color: var(--gray-60);
+  --action-list-item-disabled-text-color: var(--gray-40);
+}
+
+.cauldron--theme-dark {
+  --action-list-background-color: var(--accent-medium);
+  --action-list-text-color: #fff;
+  --action-list-item-description-color: var(--accent-light);
+  --action-list-item-icon-color: var(--accent-light);
+  --action-list-item-hover-background-color: var(--accent-dark);
+  --action-list-item-disabled-text-color: rgba(255, 255, 255, 0.25);
+}
+
+.ActionList,
+.ActionList:hover,
+.ActionList:focus,
+.ActionList:focus:hover {
+  color: var(--action-list-text-color);
+  border: none;
+  box-shadow: none;
+  background: none;
+  margin: 0;
+}
+
+.ActionList li {
+  list-style-type: none;
+}
+
+.ActionMenu > .ActionList {
+  outline: none;
+}
+
+.ActionListGroup,
+.ActionListSeparator {
+  padding-bottom: var(--space-smallest);
+  margin-bottom: var(--space-smallest);
+  border-bottom: 1px solid var(--action-menu-border-color);
+}
+
+.ActionList > li:last-child .ActionListGroup {
+  border-bottom: 0;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.ActionListGroup > li:first-child {
+  font-weight: var(--font-weight-medium);
+  font-size: var(--action-list-group-label-font-size);
+  padding: var(--space-smallest) var(--space-small);
+}
+
+.ActionList:focus {
+  outline: none;
+}
+
+:where(.ActionList:focus-within) .ActionListItem--active {
+  position: relative;
+  box-shadow: inset 0 0 0 2px var(--focus);
+  z-index: 1;
+}
+
+.ActionListItem {
+  padding: var(--space-smallest);
+}
+
+.ActionListItem {
+  --icon-size: 1rem;
+  --icon-spacing: 1.2rem;
+  display: grid;
+  align-items: center;
+  gap: var(--space-half);
+  margin: 0 var(--space-smallest);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.ActionListItem:is([aria-disabled='true']) {
+  color: var(--action-list-item-disabled-text-color);
+  cursor: not-allowed;
+}
+
+.ActionListItem:hover:not([aria-disabled='true']) {
+  background-color: var(--action-list-item-hover-background-color);
+}
+
+.ActionListItem__selection,
+.ActionListItem__leadingIcon,
+.ActionListItem__trailingIcon {
+  width: var(--icon-spacing);
+}
+
+:where(.ActionListItem:not([aria-disabled='true']))
+  :is(
+    .ActionListItem__selection,
+    .ActionListItem__leadingIcon,
+    .ActionListItem__trailingIcon
+  ) {
+  color: var(--action-list-item-icon-color);
+}
+
+.ActionListItem:has(> .ActionListItem__selection) {
+  grid-template-columns: var(--icon-spacing) auto;
+}
+
+:where(.ActionListItem:has(.ActionListItem__description))
+  :is(
+    .ActionListItem__selection,
+    .ActionListItem__leadingIcon,
+    .ActionListItem__trailingIcon
+  ) {
+  grid-row: span 2;
+  align-self: start;
+}
+
+:where(.ActionListItem:has(> .ActionListItem__selection))
+  .ActionListItem__description,
+:where(
+    .ActionListItem:has(> .ActionListItem__leadingIcon):has(
+        > .ActionListItem__description
+      )
+  )
+  .ActionListItem__description {
+  grid-column: 2;
+}
+
+:where(
+    .ActionListItem:has(> .ActionListItem__selection):has(
+        > .ActionListItem__leadingIcon
+      )
+  )
+  .ActionListItem__description {
+  grid-column: 3;
+}
+
+:where(
+    .ActionListItem:has(> .ActionListItem__trailingIcon):has(
+        > .ActionListItem__description
+      )
+  )
+  .ActionListItem__description {
+  grid-row: 2;
+}
+
+.ActionListItem:has(> .ActionListItem__leadingIcon) {
+  grid-template-columns: var(--icon-spacing) auto;
+}
+
+.ActionListItem:has(> .ActionListItem__trailingIcon) {
+  grid-template-columns: auto var(--icon-spacing);
+}
+
+.ActionListItem:has(> .ActionListItem__leadingIcon):has(
+    > .ActionListItem__trailingIcon
+  ) {
+  grid-template-columns: var(--icon-spacing) auto var(--icon-spacing);
+}
+
+.ActionListItem:has(> .ActionListItem__selection):has(
+    > .ActionListItem__leadingIcon
+  ) {
+  grid-template-columns: var(--icon-spacing) var(--icon-spacing) auto;
+}
+
+.ActionListItem:has(> .ActionListItem__selection):has(
+    > .ActionListItem__trailingIcon
+  ) {
+  grid-template-columns: var(--icon-spacing) auto var(--icon-spacing);
+}
+
+.ActionListItem:has(> .ActionListItem__selection):has(
+    > .ActionListItem__leadingIcon
+  ):has(> .ActionListItem__trailingIcon) {
+  grid-template-columns: var(--icon-spacing) var(--icon-spacing) auto var(
+      --icon-spacing
+    );
+}
+
+:where(.ActionListItem:not([aria-checked='true'])) .ActionListItem__selection {
+  visibility: hidden;
+}
+
+.ActionListItem__description {
+  color: var(--action-list-item-description-color);
+}
+
+:where(.ActionListItem:is([aria-disabled='true']))
+  .ActionListItem__description {
+  color: var(--action-list-item-disabled-text-color);
+}

package/package.json

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