@carbon/styles 1.24.0 → 1.25.0

package/css/styles.css

@@ -5053,7 +5053,7 @@ input[data-invalid]:not(:focus),
 .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:not(:focus),
 .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
 .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
-.cds--list-box[data-invalid]:not(:focus),
+.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused),
 .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
   outline: 2px solid var(--cds-support-error, #da1e28);
   outline-offset: -2px;
@@ -5064,7 +5064,7 @@ input[data-invalid]:not(:focus),
 .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:not(:focus),
 .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
 .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
-.cds--list-box[data-invalid]:not(:focus),
+.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused),
 .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
     outline-style: dotted;
   }
@@ -5081,6 +5081,7 @@ input[data-invalid] ~ .cds--form-requirement,
 .cds--text-input__field-wrapper--warning ~ .cds--form-requirement,
 .cds--text-input__field-wrapper--warning > .cds--text-input ~ .cds--form-requirement,
 .cds--text-area__wrapper[data-invalid] ~ .cds--form-requirement,
+.cds--text-area__wrapper--warn ~ .cds--form-requirement,
 .cds--select-input__wrapper[data-invalid] ~ .cds--form-requirement,
 .cds--select--warning .cds--select-input__wrapper ~ .cds--form-requirement,
 .cds--time-picker[data-invalid] ~ .cds--form-requirement,
@@ -5789,6 +5790,16 @@ fieldset[disabled] .cds--form__helper-text {
   -webkit-transition: max-height 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
   transition: max-height 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
+.cds--snippet--multi .cds--snippet-container:focus {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+  outline-offset: 0;
+}
+@media screen and (prefers-contrast) {
+  .cds--snippet--multi .cds--snippet-container:focus {
+    outline-style: dotted;
+  }
+}
 
 .cds--snippet--multi.cds--snippet--expand .cds--snippet-container {
   padding-bottom: 1rem;
@@ -8109,6 +8120,43 @@ fieldset[disabled] .cds--form__helper-text {
   fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
 
+.cds--combo-button__container {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-column-gap: 0.0625rem;
+     -moz-column-gap: 0.0625rem;
+          column-gap: 0.0625rem;
+}
+
+.cds--combo-button__container--sm .cds--combo-button__primary-action {
+  min-width: 7.9375rem;
+}
+
+.cds--combo-button__container--md .cds--combo-button__primary-action {
+  min-width: 7.4375rem;
+}
+
+.cds--combo-button__container--lg .cds--combo-button__primary-action {
+  min-width: 6.9375rem;
+}
+
+.cds--combo-button__primary-action .cds--btn {
+  width: 100%;
+}
+
+.cds--combo-button__trigger svg {
+  -webkit-transition: -webkit-transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  transition: -webkit-transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), -webkit-transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.cds--combo-button__container--open .cds--combo-button__trigger svg {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+
 .cds--contained-list__header {
   position: -webkit-sticky;
   position: sticky;
@@ -9655,9 +9703,8 @@ tr.cds--data-table--selected:last-of-type td {
 }
 
 .cds--batch-actions--active {
-  overflow: auto hidden;
-  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
-          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  -webkit-clip-path: polygon(0 0, 200% 0, 200% 200%, 0 200%);
+          clip-path: polygon(0 0, 200% 0, 200% 200%, 0 200%);
   pointer-events: all;
   -webkit-transform: translate3d(0, 0, 0);
           transform: translate3d(0, 0, 0);
@@ -12659,6 +12706,24 @@ button.cds--dropdown-text:focus {
 }
 
 .cds--file__drop-container {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+  display: inline-block;
+  padding: 0;
+  border: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  cursor: pointer;
+  text-align: start;
+  width: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -12677,6 +12742,15 @@ button.cds--dropdown-text:focus {
   line-height: var(--cds-body-compact-01-line-height, 1.28572);
   letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
 }
+.cds--file__drop-container *,
+.cds--file__drop-container *::before,
+.cds--file__drop-container *::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+}
+.cds--file__drop-container::-moz-focus-inner {
+  border: 0;
+}
 
 .cds--file__drop-container--drag-over {
   background: none;
@@ -13213,6 +13287,14 @@ button.cds--dropdown-text:focus {
   bottom: 0.5rem;
 }
 
+.cds--multi-select__wrapper.cds--list-box__wrapper--fluid--focus:not(.cds--multi-select--filterable__wrapper) .cds--list-box__field--wrapper--input-focused {
+  outline: none;
+}
+
+.cds--list-box__wrapper--fluid .cds--tag.cds--tag--filter {
+  margin-top: 1.25rem;
+}
+
 .cds--list-box__wrapper--fluid .cds--multi-select--filterable--input-focused {
   outline: none;
   outline-offset: 0;
@@ -15114,7 +15196,13 @@ optgroup.cds--select-optgroup:disabled,
   display: none;
 }
 
-.cds--text-area--fluid .cds--text-area--invalid + .cds--text-area__divider {
+.cds--text-area--fluid .cds--text-area--invalid,
+.cds--text-area--fluid .cds--text-area--warn {
+  resize: none;
+}
+
+.cds--text-area--fluid .cds--text-area__wrapper[data-invalid] .cds--text-area__divider,
+.cds--text-area--fluid .cds--text-area__wrapper--warn .cds--text-area__divider {
   display: block;
   border-style: solid;
   border-color: var(--cds-border-subtle);
@@ -15122,7 +15210,8 @@ optgroup.cds--select-optgroup:disabled,
   margin: 0 1rem;
 }
 
-.cds--text-area--fluid .cds--text-area--invalid + .cds--text-area__divider + .cds--form-requirement {
+.cds--text-area--fluid .cds--text-area__wrapper[data-invalid] .cds--form-requirement.cds--form-requirement,
+.cds--text-area--fluid .cds--text-area__wrapper--warn .cds--form-requirement.cds--form-requirement {
   position: relative;
   display: block;
   overflow: visible;
@@ -15130,10 +15219,23 @@ optgroup.cds--select-optgroup:disabled,
   padding: 0.5rem 2.5rem 0.5rem 1rem;
   margin: 0;
   background: var(--cds-field);
+}
+
+.cds--text-area--fluid .cds--text-area__wrapper--warn .cds--form-requirement.cds--form-requirement {
+  border-bottom: 1px solid var(--cds-border-strong);
+  color: var(--cds-text-primary, #161616);
+}
+
+.cds--text-area--fluid .cds--text-area__wrapper[data-invalid] .cds--form-requirement.cds--form-requirement {
+  border-bottom: none;
   color: var(--cds-text-error, #da1e28);
 }
 
-.cds--modal .cds--text-area--fluid .cds--text-area--invalid + .cds--text-area__divider + .cds--form-requirement {
+.cds--text-area--fluid .cds--text-area--warn {
+  border-bottom: none;
+}
+
+.cds--modal .cds--text-area--fluid .cds--text-area__wrapper[data-invalid] .cds--text-area__divider + .cds--form-requirement {
   background: var(--cds-field-02, #ffffff);
 }
 
@@ -15726,12 +15828,28 @@ optgroup.cds--select-optgroup:disabled,
   content: "▪";
 }
 
+.cds--menu-button__trigger:not(.cds--btn--ghost) {
+  min-width: 10rem;
+}
+
+.cds--menu-button__trigger svg {
+  -webkit-transition: -webkit-transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  transition: -webkit-transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), -webkit-transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.cds--menu-button__trigger--open svg {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+
 .cds--menu {
   -webkit-box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
           box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
   position: fixed;
   z-index: 9000;
-  min-width: 13rem;
+  min-width: 10rem;
   max-width: 18rem;
   padding: 0.25rem 0;
   background-color: var(--cds-layer);
@@ -15739,6 +15857,10 @@ optgroup.cds--select-optgroup:disabled,
   visibility: hidden;
 }
 
+.cds--menu--with-icons {
+  min-width: 12rem;
+}
+
 .cds--menu--open {
   visibility: visible;
 }
@@ -15774,8 +15896,8 @@ optgroup.cds--select-optgroup:disabled,
      -moz-column-gap: 0.5rem;
           column-gap: 0.5rem;
   cursor: pointer;
-  grid-template-columns: 0 1fr -webkit-max-content;
-  grid-template-columns: 0 1fr max-content;
+  grid-template-columns: 1fr -webkit-max-content;
+  grid-template-columns: 1fr max-content;
   padding-inline: 1rem;
   -webkit-transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
   transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
@@ -15811,6 +15933,10 @@ optgroup.cds--select-optgroup:disabled,
 }
 
 .cds--menu-item__icon {
+  display: none;
+}
+
+.cds--menu--with-icons .cds--menu-item__icon {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -16229,12 +16355,24 @@ optgroup.cds--select-optgroup:disabled,
 }
 
 /* stylelint-enable */
-.cds--multi-select .cds--tag {
-  min-width: auto;
-  margin: 0 0.5rem 0 0;
+.cds--multi-select .cds--list-box__field--wrapper {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  width: 100%;
+  height: calc(100% + 1px);
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.cds--multi-select .cds--list-box__field:focus {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
 }
 
-.cds--multi-select--filterable .cds--tag {
+.cds--multi-select .cds--tag {
+  min-width: auto;
   margin: 0 0.5rem 0 1rem;
 }
 
@@ -16285,17 +16423,20 @@ optgroup.cds--select-optgroup:disabled,
   outline: none;
 }
 
-.cds--multi-select--filterable--input-focused {
+.cds--multi-select--filterable--input-focused,
+.cds--multi-select .cds--list-box__field--wrapper--input-focused {
   outline: 2px solid var(--cds-focus, #0f62fe);
   outline-offset: -2px;
 }
 @media screen and (prefers-contrast) {
-  .cds--multi-select--filterable--input-focused {
+  .cds--multi-select--filterable--input-focused,
+.cds--multi-select .cds--list-box__field--wrapper--input-focused {
     outline-style: dotted;
   }
 }
 
-.cds--multi-select--filterable.cds--multi-select--selected .cds--text-input {
+.cds--multi-select--filterable.cds--multi-select--selected .cds--text-input,
+.cds--multi-select.cds--multi-select--selected .cds--list-box__field {
   padding-left: 0;
 }
 
@@ -18925,6 +19066,84 @@ span.cds--pagination__text.cds--pagination__items-count {
           transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 100%), -50%);
 }
 
+.cds--popover--tab-tip .cds--popover-content {
+  border-radius: 0;
+}
+
+.cds--popover--tab-tip__button {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+  display: inline-block;
+  padding: 0;
+  border: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  cursor: pointer;
+  text-align: start;
+  width: 100%;
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  width: 2rem;
+  height: 2rem;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+.cds--popover--tab-tip__button *,
+.cds--popover--tab-tip__button *::before,
+.cds--popover--tab-tip__button *::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+}
+.cds--popover--tab-tip__button::-moz-focus-inner {
+  border: 0;
+}
+.cds--popover--tab-tip__button:focus {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+}
+@media screen and (prefers-contrast) {
+  .cds--popover--tab-tip__button:focus {
+    outline-style: dotted;
+  }
+}
+.cds--popover--tab-tip__button:hover {
+  background-color: var(--cds-layer-hover);
+}
+
+.cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button {
+  background: var(--cds-layer);
+  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+}
+
+.cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button:not(:focus)::after {
+  position: absolute;
+  z-index: 6001;
+  bottom: 0;
+  width: 100%;
+  height: 2px;
+  background: var(--cds-layer);
+  content: "";
+}
+
+.cds--popover--tab-tip__button svg {
+  fill: var(--cds-icon-primary, #161616);
+}
+
 .cds--progress-bar__label {
   font-size: var(--cds-body-compact-01-font-size, 0.875rem);
   font-weight: var(--cds-body-compact-01-font-weight, 400);
@@ -20748,7 +20967,6 @@ span.cds--pagination__text.cds--pagination__items-count {
   line-height: var(--cds-body-compact-01-line-height, 1.28572);
   letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
   overflow: hidden;
-  max-width: 10rem;
   padding: 0.75rem 1rem 0.5rem;
   border-bottom: 2px solid var(--cds-border-subtle);
   color: var(--cds-text-secondary, #525252);
@@ -21075,6 +21293,15 @@ span.cds--pagination__text.cds--pagination__items-count {
   fill: var(--cds-support-error, #da1e28);
 }
 
+.cds--text-area__invalid-icon--warning {
+  fill: var(--cds-support-warning, #f1c21b);
+}
+
+.cds--text-area__invalid-icon--warning path[fill] {
+  fill: #000000;
+  opacity: 1;
+}
+
 .cds--text-area__counter-alert {
   position: absolute;
   overflow: hidden;