@carbon/styles 1.38.0 → 1.39.0

package/css/styles.css

@@ -3912,8 +3912,8 @@ li.cds--accordion__item--disabled:last-of-type {
   position: absolute;
   z-index: 6000;
   display: none;
-  background-color: var(--cds-popover-background-color, var(--cds-layer));
   border-radius: var(--cds-popover-border-radius, 2px);
+  background-color: var(--cds-popover-background-color, var(--cds-layer));
   color: var(--cds-popover-text-color, var(--cds-text-primary, #161616));
   inline-size: -moz-max-content;
   inline-size: max-content;
@@ -4301,8 +4301,8 @@ li.cds--accordion__item--disabled:last-of-type {
   cursor: pointer;
   text-align: start;
   inline-size: 100%;
-  border-block-end: 1px dotted var(--cds-border-strong);
   border-radius: 0;
+  border-block-end: 1px dotted var(--cds-border-strong);
   color: var(--cds-text-primary, #161616);
 }
 .cds--definition-term *,
@@ -4338,7 +4338,7 @@ li.cds--accordion__item--disabled:last-of-type {
 }
 
 .cds--btn {
-  --cds-layout-size-height-local: clamp(var(--cds-layout-size-height-min), var(--cds-layout-size-height, var(--cds-layout-size-height-lg)), var(--cds-layout-size-height-max));
+  --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-lg)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-2xl)));
   --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
   --temp-1lh: (
     var(--cds-body-compact-01-line-height, 1.28572) * 1em
@@ -4365,8 +4365,8 @@ li.cds--accordion__item--disabled:last-of-type {
   display: inline-flex;
   flex-shrink: 0;
   justify-content: space-between;
-  margin: 0;
   border-radius: 0;
+  margin: 0;
   cursor: pointer;
   inline-size: -moz-max-content;
   inline-size: max-content;
@@ -4881,6 +4881,7 @@ li.cds--accordion__item--disabled:last-of-type {
 .cds--overflow-menu--sm {
   block-size: 2rem;
   inline-size: 2rem;
+  min-block-size: 2rem;
 }
 
 .cds--overflow-menu--lg {
@@ -5792,11 +5793,11 @@ fieldset[disabled] .cds--form__helper-text {
 
 .cds--form-item.cds--checkbox-wrapper {
   position: relative;
-  margin-block-end: 0.25rem;
+  margin-block-end: 0.375rem;
 }
 
 .cds--form-item.cds--checkbox-wrapper:first-of-type {
-  margin-block-start: 0.1875rem;
+  margin-block-start: 0;
 }
 
 .cds--label + .cds--form-item.cds--checkbox-wrapper {
@@ -5830,8 +5831,8 @@ fieldset[disabled] .cds--form__helper-text {
   position: relative;
   display: flex;
   cursor: pointer;
-  min-block-size: 1.5rem;
-  padding-block-start: 0.1875rem;
+  min-block-size: 1.25rem;
+  padding-block-start: 0.125rem;
   padding-inline-start: 1.25rem;
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -5855,7 +5856,7 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--checkbox-label-text {
-  padding-inline-start: 0.375rem;
+  padding-inline-start: 0.625rem;
 }
 
 .cds--checkbox-label::before,
@@ -5866,14 +5867,15 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--checkbox-label::before {
   position: absolute;
   border: 1px solid var(--cds-icon-primary, #161616);
-  margin: 0.125rem 0.125rem 0.125rem 0.1875rem;
+  border-radius: 2px;
   background-color: transparent;
   block-size: 1rem;
-  border-radius: 2px;
   content: "";
   inline-size: 1rem;
   inset-block-start: 0.125rem;
   inset-inline-start: 0;
+  margin-block: 0.0625rem 0.125rem;
+  margin-inline: 0.1875rem 0;
 }
 
 .cds--checkbox-label::after {
@@ -5884,7 +5886,7 @@ fieldset[disabled] .cds--form__helper-text {
   border-inline-start: 1.5px solid var(--cds-icon-inverse, #ffffff);
   content: "";
   inline-size: 0.5625rem;
-  inset-block-start: 0.46875rem;
+  inset-block-start: 0.40625rem;
   inset-inline-start: 0.4375rem;
   margin-block-start: -0.1875rem;
   transform: scale(0) rotate(-45deg);
@@ -6124,9 +6126,9 @@ fieldset[disabled] .cds--form__helper-text {
   box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
   z-index: 6000;
   padding: 0.1875rem 1rem;
+  border-radius: 0.125rem;
   background-color: var(--cds-background-inverse, #393939);
   block-size: auto;
-  border-radius: 0.125rem;
   color: var(--cds-text-inverse, #ffffff);
   font-weight: 400;
   inline-size: -moz-max-content;
@@ -6245,8 +6247,8 @@ fieldset[disabled] .cds--form__helper-text {
   display: inline;
   padding: 0;
   border: 1px solid transparent;
-  background-color: var(--cds-layer);
   border-radius: 4px;
+  background-color: var(--cds-layer);
   color: var(--cds-text-primary, #161616);
   cursor: pointer;
 }
@@ -6290,9 +6292,9 @@ fieldset[disabled] .cds--form__helper-text {
   box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
   z-index: 6000;
   padding: 0.1875rem 1rem;
+  border-radius: 0.125rem;
   background-color: var(--cds-background-inverse, #393939);
   block-size: auto;
-  border-radius: 0.125rem;
   color: var(--cds-text-inverse, #ffffff);
   font-weight: 400;
   inline-size: -moz-max-content;
@@ -6463,7 +6465,6 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--snippet--multi .cds--snippet-container pre {
-  overflow-x: auto;
   padding-block-end: 1.5rem;
   padding-inline-end: 2.5rem;
 }
@@ -6472,21 +6473,17 @@ fieldset[disabled] .cds--form__helper-text {
   padding-inline-end: 0;
 }
 
-.cds--snippet--multi.cds--snippet--expand .cds--snippet-container pre {
-  overflow-x: auto;
-}
-
-.cds--snippet--multi.cds--snippet--has-right-overflow .cds--snippet-container pre::after {
+.cds--snippet--multi.cds--snippet--has-right-overflow::after {
   position: absolute;
   background-image: linear-gradient(to right, transparent, var(--cds-layer));
   block-size: 100%;
   content: "";
   inline-size: 1rem;
   inset-block-start: 0;
-  inset-inline-end: 0;
+  inset-inline-end: 1rem;
 }
 
-[dir=rtl] .cds--snippet--multi.cds--snippet--has-right-overflow .cds--snippet-container pre::after {
+[dir=rtl] .cds--snippet--multi.cds--snippet--has-right-overflow::after {
   background-image: linear-gradient(to left, transparent, var(--cds-layer));
 }
 
@@ -6652,7 +6649,7 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--snippet--light.cds--snippet--single::after,
-.cds--snippet--light.cds--snippet--multi .cds--snippet-container pre::after {
+.cds--snippet--light.cds--snippet--multi::after {
   background-image: linear-gradient(to right, rgba(var(--cds-layer), 0), var(--cds-layer));
 }
 
@@ -6993,9 +6990,9 @@ fieldset[disabled] .cds--form__helper-text {
   box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
   z-index: 6000;
   padding: 0.1875rem 1rem;
+  border-radius: 0.125rem;
   background-color: var(--cds-background-inverse, #393939);
   block-size: auto;
-  border-radius: 0.125rem;
   color: var(--cds-text-inverse, #ffffff);
   font-weight: 400;
   inline-size: -moz-max-content;
@@ -7437,8 +7434,8 @@ fieldset[disabled] .cds--form__helper-text {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  margin: 0.25rem;
   border-radius: 0.9375rem;
+  margin: 0.25rem;
   cursor: default;
   max-inline-size: 100%;
   min-block-size: var(--cds-layout-size-height-local);
@@ -7631,10 +7628,10 @@ fieldset[disabled] .cds--form__helper-text {
   justify-content: center;
   padding: 0;
   border: 0;
+  border-radius: 50%;
   margin: 0 0 0 0.125rem;
   background-color: transparent;
   block-size: var(--cds-layout-size-height-local);
-  border-radius: 50%;
   color: currentColor;
   cursor: pointer;
   inline-size: var(--cds-layout-size-height-local);
@@ -8215,9 +8212,9 @@ fieldset[disabled] .cds--form__helper-text {
   align-items: center;
   justify-content: space-between;
   padding: 0.5rem;
+  border-radius: 0.75rem;
   background-color: var(--cds-background-inverse, #393939);
   block-size: 1.5rem;
-  border-radius: 0.75rem;
   color: var(--cds-text-inverse, #ffffff);
   inline-size: auto;
   inset-block-start: auto;
@@ -8235,8 +8232,8 @@ fieldset[disabled] .cds--form__helper-text {
   margin-inline-start: 0.25rem;
 }
 .cds--list-box__selection--multi > svg:hover {
-  background-color: var(--cds-button-secondary-hover, #474747);
   border-radius: 50%;
+  background-color: var(--cds-button-secondary-hover, #474747);
 }
 
 .cds--list-box--disabled .cds--list-box__selection--multi {
@@ -9431,7 +9428,6 @@ fieldset[disabled] .cds--form__helper-text {
   align-items: flex-end;
 }
 .cds--radio-button-group--vertical .cds--radio-button__label {
-  line-height: 1.25;
   margin-inline-end: 0;
 }
 .cds--radio-button-group--vertical .cds--radio-button__label:not(:last-of-type) {
@@ -9453,16 +9449,19 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--radio-button__label {
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-  font-weight: var(--cds-body-compact-01-font-weight, 400);
-  line-height: var(--cds-body-compact-01-line-height, 1.28572);
-  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
   display: flex;
   align-items: center;
   cursor: pointer;
   margin-inline-end: 1rem;
 }
 
+.cds--radio-button__label-text {
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-compact-01-font-weight, 400);
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
+}
+
 .cds--radio-button__appearance {
   box-sizing: border-box;
   padding: 0;
@@ -9473,12 +9472,12 @@ fieldset[disabled] .cds--form__helper-text {
   vertical-align: baseline;
   flex-shrink: 0;
   border: 1px solid var(--cds-icon-primary, #161616);
+  border-radius: 50%;
   background-color: transparent;
   block-size: 1.125rem;
-  border-radius: 50%;
   inline-size: 1.125rem;
   margin-block: 0.0625rem 0.125rem;
-  margin-inline: 0.125rem 0.5rem;
+  margin-inline: 0.125rem 0.625rem;
 }
 .cds--radio-button__appearance *,
 .cds--radio-button__appearance *::before,
@@ -9486,6 +9485,10 @@ fieldset[disabled] .cds--form__helper-text {
   box-sizing: inherit;
 }
 
+.cds--radio-button-group--vertical .cds--radio-button__appearance {
+  margin-block: 0;
+}
+
 .cds--radio-button:checked + .cds--radio-button__label .cds--radio-button__appearance {
   display: flex;
   align-items: center;
@@ -9495,9 +9498,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--radio-button:checked + .cds--radio-button__label .cds--radio-button__appearance::before {
   position: relative;
   display: inline-block;
+  border-radius: 50%;
   background-color: var(--cds-icon-primary, #161616);
   block-size: 100%;
-  border-radius: 50%;
   content: "";
   inline-size: 100%;
   transform: scale(0.5);
@@ -9633,11 +9636,15 @@ fieldset[disabled] .cds--form__helper-text {
   margin-inline-end: 1rem;
 }
 
-.cds--radio-button-group--vertical .cds--radio-button-wrapper:not(:last-of-type) {
-  margin-block-end: 0.5rem;
+.cds--radio-button-group--vertical .cds--radio-button-wrapper {
+  margin-block-end: 0.375rem;
   margin-inline-end: 0;
 }
 
+.cds--radio-button-group--vertical .cds--radio-button-wrapper .cds--radio-button__label {
+  padding-block-start: 0.125rem;
+}
+
 .cds--radio-button-group--label-right .cds--radio-button__label,
 .cds--radio-button-wrapper.cds--radio-button-wrapper--label-right .cds--radio-button__label {
   flex-direction: row;
@@ -9939,9 +9946,18 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--table-column-checkbox .cds--checkbox-label {
+  min-block-size: 1.5rem;
   padding-inline-start: 0;
 }
 
+.cds--table-column-checkbox .cds--checkbox-label::before {
+  margin-block-start: 0.125rem;
+}
+
+.cds--table-column-checkbox .cds--checkbox-label::after {
+  inset-block-start: 0.46875rem;
+}
+
 .cds--data-table th.cds--table-column-checkbox {
   position: static;
   background: var(--cds-layer-accent);
@@ -12140,8 +12156,8 @@ th .cds--table-sort__flex {
   box-sizing: border-box;
   padding: 0;
   border: 0;
-  animation: none;
   border-radius: 0;
+  animation: none;
   direction: ltr;
   inline-size: 19.6875rem;
   max-block-size: 0;
@@ -14600,13 +14616,13 @@ button.cds--dropdown-text:focus {
   display: inline-flex;
   box-sizing: border-box;
   border: 0;
+  border-radius: 0;
   -moz-appearance: textfield;
   -webkit-appearance: textfield;
           appearance: textfield;
   background-color: var(--cds-field);
   block-size: 2.5rem;
   border-block-end: 0.0625rem solid var(--cds-border-strong);
-  border-radius: 0;
   color: var(--cds-text-primary, #161616);
   font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
   font-weight: 400;
@@ -15367,13 +15383,13 @@ button.cds--dropdown-text:focus {
   outline-offset: -2px;
   display: block;
   border: none;
+  border-radius: 0;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   background-color: var(--cds-field);
   block-size: 2.5rem;
   border-block-end: 1px solid var(--cds-border-strong);
-  border-radius: 0;
   color: var(--cds-text-primary, #161616);
   cursor: pointer;
   font-family: inherit;
@@ -15760,7 +15776,7 @@ optgroup.cds--select-optgroup:disabled,
   letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
   outline: 2px solid transparent;
   outline-offset: -2px;
-  padding: 0.6875rem 1rem;
+  padding: 0.6875rem var(--cds-layout-density-padding-inline-local);
   border: none;
   background-color: var(--cds-field);
   block-size: 100%;
@@ -15817,6 +15833,7 @@ optgroup.cds--select-optgroup:disabled,
 }
 
 .cds--text-area__wrapper {
+  --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
   position: relative;
   display: flex;
   inline-size: 100%;
@@ -15826,7 +15843,7 @@ optgroup.cds--select-optgroup:disabled,
   position: absolute;
   fill: var(--cds-support-error, #da1e28);
   inset-block-start: 0.75rem;
-  inset-inline-end: 1rem;
+  inset-inline-end: var(--cds-layout-density-padding-inline-local);
 }
 
 .cds--text-area__invalid-icon--warning {
@@ -19009,8 +19026,8 @@ span.cds--pagination__text.cds--pagination__items-count {
   position: relative;
   z-index: 1;
   flex-shrink: 0;
-  block-size: 1rem;
   border-radius: 50%;
+  block-size: 1rem;
   fill: var(--cds-interactive, #0f62fe);
   inline-size: 1rem;
   margin-block-start: 0.625rem;
@@ -19452,9 +19469,9 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--slider__thumb {
   position: absolute;
   z-index: 3;
+  border-radius: 50%;
   background: var(--cds-layer-selected-inverse, #161616);
   block-size: 0.875rem;
-  border-radius: 50%;
   box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent;
   inline-size: 0.875rem;
   outline: none;
@@ -21090,17 +21107,17 @@ span.cds--pagination__text.cds--pagination__items-count {
 
 .cds--toggle__switch {
   position: relative;
+  border-radius: 0.75rem;
   background-color: var(--cds-toggle-off, #8d8d8d);
   block-size: 1.5rem;
-  border-radius: 0.75rem;
   inline-size: 3rem;
   transition: background-color 70ms cubic-bezier(0.2, 0, 1, 0.9);
 }
 .cds--toggle__switch::before {
   position: absolute;
+  border-radius: 50%;
   background-color: var(--cds-icon-on-color, #ffffff);
   block-size: 1.125rem;
-  border-radius: 50%;
   content: "";
   inline-size: 1.125rem;
   inset-block-start: 0.1875rem;
@@ -21230,10 +21247,10 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--toggle--skeleton .cds--toggle__skeleton-circle {
   position: relative;
   overflow: hidden;
+  border-radius: 50%;
   background: var(--cds-skeleton-background, #e8e8e8);
   border-radius: 50%;
   block-size: 1.125rem;
-  border-radius: 50%;
   inline-size: 1.125rem;
 }
 .cds--toggle--skeleton .cds--toggle__skeleton-circle::before {
@@ -22095,6 +22112,10 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
   list-style-type: none;
 }
 
+.cds--side-nav__divider hr {
+  border: none;
+}
+
 .cds--side-nav__submenu {
   box-sizing: border-box;
   padding: 0;
@@ -23119,6 +23140,10 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
   list-style-type: none;
 }
 
+.cds--side-nav__divider hr {
+  border: none;
+}
+
 .cds--side-nav__submenu {
   box-sizing: border-box;
   padding: 0;