@carbon/charts-react 1.9.0-rc.5 → 1.9.0-rc.6

package/dist/styles.css

@@ -88,6 +88,14 @@ video {
   vertical-align: baseline;
 }
 
+button,
+select,
+input,
+textarea {
+  border-radius: 0;
+  font-family: inherit;
+}
+
 /* HTML5 display-role reset for older browsers */
 article,
 aside,
@@ -1779,6 +1787,157 @@ em {
   --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
 }
 
+:root {
+  --cds-layout-size-height-xs: 1.5rem;
+  --cds-layout-size-height-sm: 2rem;
+  --cds-layout-size-height-md: 2.5rem;
+  --cds-layout-size-height-lg: 3rem;
+  --cds-layout-size-height-xl: 4rem;
+  --cds-layout-size-height-2xl: 5rem;
+  --cds-layout-size-height-min: 0px;
+  --cds-layout-size-height-max: 999999999px;
+  --cds-layout-density-padding-inline-condensed: 0.5rem;
+  --cds-layout-density-padding-inline-normal: 1rem;
+  --cds-layout-density-padding-inline-min: 0px;
+  --cds-layout-density-padding-inline-max: 999999999px;
+}
+
+.cds--layout--size-xs {
+  --cds-layout-size-height-context: var(--cds-layout-size-height-xs, 1.5rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
+}
+
+.cds--layout-constraint--size\:default-xs {
+  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
+}
+
+.cds--layout-constraint--size\:min-xs {
+  --cds-layout-size-height-min: var(--cds-layout-size-height-xs, 1.5rem);
+}
+
+.cds--layout-constraint--size\:max-xs {
+  --cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem);
+}
+
+.cds--layout--size-sm {
+  --cds-layout-size-height-context: var(--cds-layout-size-height-sm, 2rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
+}
+
+.cds--layout-constraint--size\:default-sm {
+  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
+}
+
+.cds--layout-constraint--size\:min-sm {
+  --cds-layout-size-height-min: var(--cds-layout-size-height-sm, 2rem);
+}
+
+.cds--layout-constraint--size\:max-sm {
+  --cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem);
+}
+
+.cds--layout--size-md {
+  --cds-layout-size-height-context: var(--cds-layout-size-height-md, 2.5rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
+}
+
+.cds--layout-constraint--size\:default-md {
+  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
+}
+
+.cds--layout-constraint--size\:min-md {
+  --cds-layout-size-height-min: var(--cds-layout-size-height-md, 2.5rem);
+}
+
+.cds--layout-constraint--size\:max-md {
+  --cds-layout-size-height-max: var(--cds-layout-size-height-md, 2.5rem);
+}
+
+.cds--layout--size-lg {
+  --cds-layout-size-height-context: var(--cds-layout-size-height-lg, 3rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
+}
+
+.cds--layout-constraint--size\:default-lg {
+  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
+}
+
+.cds--layout-constraint--size\:min-lg {
+  --cds-layout-size-height-min: var(--cds-layout-size-height-lg, 3rem);
+}
+
+.cds--layout-constraint--size\:max-lg {
+  --cds-layout-size-height-max: var(--cds-layout-size-height-lg, 3rem);
+}
+
+.cds--layout--size-xl {
+  --cds-layout-size-height-context: var(--cds-layout-size-height-xl, 4rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
+}
+
+.cds--layout-constraint--size\:default-xl {
+  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
+}
+
+.cds--layout-constraint--size\:min-xl {
+  --cds-layout-size-height-min: var(--cds-layout-size-height-xl, 4rem);
+}
+
+.cds--layout-constraint--size\:max-xl {
+  --cds-layout-size-height-max: var(--cds-layout-size-height-xl, 4rem);
+}
+
+.cds--layout--size-2xl {
+  --cds-layout-size-height-context: var(--cds-layout-size-height-2xl, 5rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
+}
+
+.cds--layout-constraint--size\:default-2xl {
+  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
+}
+
+.cds--layout-constraint--size\:min-2xl {
+  --cds-layout-size-height-min: var(--cds-layout-size-height-2xl, 5rem);
+}
+
+.cds--layout-constraint--size\:max-2xl {
+  --cds-layout-size-height-max: var(--cds-layout-size-height-2xl, 5rem);
+}
+
+.cds--layout--density-condensed {
+  --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
+  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
+}
+
+.cds--layout-constraint--density\:default-condensed {
+  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
+}
+
+.cds--layout-constraint--density\:min-condensed {
+  --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
+}
+
+.cds--layout-constraint--density\:max-condensed {
+  --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
+}
+
+.cds--layout--density-normal {
+  --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-normal, 1rem);
+  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
+}
+
+.cds--layout-constraint--density\:default-normal {
+  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
+}
+
+.cds--layout-constraint--density\:min-normal {
+  --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-normal, 1rem);
+}
+
+.cds--layout-constraint--density\:max-normal {
+  --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-normal, 1rem);
+}
+
 .cds--white {
   background: var(--cds-background);
   color: var(--cds-text-primary);
@@ -2492,6 +2651,8 @@ em {
 }
 
 .cds--accordion {
+  --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-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg)));
+  --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));
   box-sizing: border-box;
   padding: 0;
   border: 0;
@@ -2537,11 +2698,10 @@ em {
   position: relative;
   display: flex;
   width: 100%;
-  min-height: 2.5rem;
+  min-height: var(--cds-layout-size-height-local);
   flex-direction: row-reverse;
-  align-items: flex-start;
+  align-items: center;
   justify-content: flex-start;
-  padding: 0.625rem 0;
   margin: 0;
   color: var(--cds-text-primary, #161616);
   cursor: pointer;
@@ -2579,16 +2739,6 @@ em {
   }
 }
 
-.cds--accordion--lg .cds--accordion__heading {
-  min-height: 3rem;
-  align-items: center;
-}
-
-.cds--accordion--sm .cds--accordion__heading {
-  min-height: 2rem;
-  padding: 0.3125rem 0;
-}
-
 .cds--accordion__heading[disabled] {
   color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
   cursor: not-allowed;
@@ -2617,7 +2767,7 @@ li.cds--accordion__item--disabled:last-of-type {
   width: 1rem;
   height: 1rem;
   flex: 0 0 1rem;
-  margin: 2px 1rem 0 0;
+  margin: 0 var(--cds-layout-density-padding-inline-local) 0 0;
   fill: var(--cds-icon-primary, #161616);
   transform: rotate(-270deg) /*rtl:ignore*/;
   transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
@@ -2631,14 +2781,13 @@ li.cds--accordion__item--disabled:last-of-type {
   z-index: 1;
   width: 100%;
   padding-right: 1rem;
-  margin: 0 0 0 1rem;
+  margin: 0 0 0 var(--cds-layout-density-padding-inline-local);
   text-align: left;
 }
 
 .cds--accordion__content {
   display: none;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  padding-inline: var(--cds-layout-density-padding-inline-local);
   transition: padding cubic-bezier(0.2, 0, 0.38, 0.9) 110ms;
 }
 @media (min-width: 480px) {
@@ -2663,7 +2812,7 @@ li.cds--accordion__item--disabled:last-of-type {
 }
 
 .cds--accordion--start .cds--accordion__arrow {
-  margin: 2px 0 0 1rem;
+  margin: 2px 0 0 var(--cds-layout-density-padding-inline-local);
 }
 
 .cds--accordion--start .cds--accordion__title {
@@ -2671,7 +2820,7 @@ li.cds--accordion__item--disabled:last-of-type {
 }
 
 .cds--accordion--start .cds--accordion__content {
-  margin-left: 2rem;
+  margin-left: calc(var(--cds-layout-density-padding-inline-local) + 1rem);
 }
 
 .cds--accordion__item--collapsing .cds--accordion__content,
@@ -3182,6 +3331,12 @@ 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-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) * 1em);
+  --temp-padding-block-max: calc(
+    (var(--cds-layout-size-height-lg) - var(--temp-1lh)) / 2 - 0.0625rem
+  );
   box-sizing: border-box;
   padding: 0;
   border: 0;
@@ -3197,15 +3352,16 @@ li.cds--accordion__item--disabled:last-of-type {
   display: inline-flex;
   width: max-content;
   max-width: 20rem;
-  min-height: 3rem;
+  height: var(--cds-layout-size-height-local);
   flex-shrink: 0;
-  align-items: center;
   justify-content: space-between;
-  padding: calc(0.875rem - 3px) calc(4rem - 1px) calc(0.875rem - 3px) calc(1rem - 1px);
   margin: 0;
   border-radius: 0;
   cursor: pointer;
   outline: none;
+  padding-block-start: min((var(--cds-layout-size-height-local) - var(--temp-1lh)) / 2 - 0.0625rem, var(--temp-padding-block-max));
+  padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) * 3 + 1rem - 0.0625rem);
+  padding-inline-start: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
   text-align: left;
   text-decoration: none;
   transition: background 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9), outline 70ms cubic-bezier(0, 0, 0.38, 0.9);
@@ -3225,10 +3381,12 @@ li.cds--accordion__item--disabled:last-of-type {
 }
 .cds--btn .cds--btn__icon {
   position: absolute;
-  right: 1rem;
+  top: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
+  right: var(--cds-layout-density-padding-inline-local);
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;
+  margin-block-start: 0.0625rem;
 }
 
 .cds--btn::-moz-focus-inner {
@@ -3331,7 +3489,7 @@ li.cds--accordion__item--disabled:last-of-type {
   border-color: transparent;
   background-color: transparent;
   color: var(--cds-link-primary, #0f62fe);
-  padding: calc(0.875rem - 3px) 1rem;
+  padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
 }
 .cds--btn--ghost:hover {
   background-color: var(--cds-layer-hover);
@@ -3363,19 +3521,19 @@ li.cds--accordion__item--disabled:last-of-type {
   color: var(--cds-text-on-color-disabled, #8d8d8d);
   outline: none;
 }
-.cds--btn--ghost.cds--btn--sm {
-  padding: calc(0.375rem - 3px) 1rem;
-}
-.cds--btn--ghost.cds--btn--field, .cds--btn--ghost.cds--btn--md {
-  padding: calc(0.675rem - 3px) 1rem;
-}
 .cds--btn--ghost:not([disabled]) svg {
   fill: var(--cds-icon-primary, #161616);
 }
 
 .cds--btn--icon-only {
-  padding-right: 0.9375rem;
-  padding-left: 0.9375rem;
+  width: var(--cds-layout-size-height-local);
+  height: var(--cds-layout-size-height-local);
+  justify-content: center;
+  padding: 0;
+  padding-block-start: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
+}
+.cds--btn--icon-only > :first-child {
+  margin-block-start: 0.0625rem;
 }
 .cds--btn--icon-only .cds--btn__icon {
   position: static;
@@ -3407,15 +3565,12 @@ li.cds--accordion__item--disabled:last-of-type {
   cursor: not-allowed;
 }
 
-.cds--btn--field.cds--btn--icon-only,
-.cds--btn--md.cds--btn--icon-only {
-  padding-right: 0.6875rem;
-  padding-left: 0.6875rem;
+.cds--icon-tooltip--disabled .cds--tooltip-trigger__wrapper {
+  cursor: not-allowed;
 }
 
-.cds--btn--sm.cds--btn--icon-only {
-  padding-right: 0.4375rem;
-  padding-left: 0.4375rem;
+.cds--icon-tooltip--disabled .cds--btn--icon-only[disabled] {
+  pointer-events: none;
 }
 
 .cds--btn--danger {
@@ -3487,7 +3642,7 @@ li.cds--accordion__item--disabled:last-of-type {
   border-color: transparent;
   background-color: transparent;
   color: var(--cds-button-danger-secondary, #da1e28);
-  padding: calc(0.875rem - 3px) 1rem;
+  padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
 }
 .cds--btn--danger--ghost:hover {
   background-color: var(--cds-button-danger-hover, #b81921);
@@ -3516,46 +3671,12 @@ li.cds--accordion__item--disabled:last-of-type {
   color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
   outline: none;
 }
-.cds--btn--danger--ghost.cds--btn--sm {
-  padding: calc(0.375rem - 3px) 1rem;
-}
-.cds--btn--danger--ghost.cds--btn--field, .cds--btn--danger--ghost.cds--btn--md {
-  padding: calc(0.675rem - 3px) 1rem;
-}
-
-.cds--btn--sm {
-  min-height: 2rem;
-  padding: calc(0.375rem - 3px) calc(4rem - 4px) calc(0.375rem - 3px) calc(1rem - 4px);
-}
-
-.cds--btn--2xl:not(.cds--btn--icon-only) {
-  align-items: baseline;
-  padding-top: 1rem;
-  padding-right: 4rem;
-  padding-left: 1rem;
-  min-height: 5rem;
-}
-
-.cds--btn--xl:not(.cds--btn--icon-only) {
-  align-items: baseline;
-  padding-top: 1rem;
-  padding-right: 4rem;
-  padding-left: 1rem;
-  min-height: 4rem;
-}
-
-.cds--btn--field,
-.cds--btn--md {
-  min-height: 2.5rem;
-  padding: calc(0.675rem - 3px) calc(4rem - 4px) calc(0.675rem - 3px) calc(1rem - 4px);
-}
 
 .cds--btn--expressive {
   font-size: var(--cds-body-compact-02-font-size, 1rem);
   font-weight: var(--cds-body-compact-02-font-weight, 400);
   line-height: var(--cds-body-compact-02-line-height, 1.375);
   letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
-  min-height: 3rem;
 }
 
 .cds--btn--icon-only.cds--btn--expressive {
@@ -3856,6 +3977,7 @@ input[data-invalid] ~ .cds--form-requirement,
 .cds--date-picker-input__wrapper--warn ~ .cds--form-requirement,
 .cds--date-picker-input__wrapper--invalid ~ .cds--form-requirement,
 .cds--time-picker--invalid ~ .cds--form-requirement,
+.cds--time-picker--warning ~ .cds--form-requirement,
 .cds--text-input__field-wrapper[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,
@@ -4247,8 +4369,6 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--copy-btn {
   position: relative;
   display: flex;
-  width: 2.5rem;
-  height: 2.5rem;
   align-items: center;
   justify-content: center;
   padding: 0;
@@ -4658,11 +4778,13 @@ fieldset[disabled] .cds--form__helper-text {
   transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
+.cds--btn > .cds--snippet__icon {
+  margin-block-start: 0;
+}
+
 .cds--copy-btn {
   display: flex;
   overflow: visible;
-  width: 2.5rem;
-  height: 2.5rem;
   align-items: center;
   justify-content: center;
   padding: 0;
@@ -4705,16 +4827,13 @@ fieldset[disabled] .cds--form__helper-text {
   right: 0;
 }
 
-.cds--snippet--inline.cds--btn--md.cds--btn--icon-only {
-  padding-right: 0;
-  padding-left: 0;
-}
-
-.cds--snippet--inline.cds--btn--md {
-  min-height: 1.25rem;
+.cds--snippet--inline.cds--btn {
+  width: initial;
+  height: 1.25rem;
+  padding-inline: 0;
 }
 
-.cds--snippet--inline.cds--btn--primary:hover {
+.cds--snippet--inline.cds--btn.cds--btn--primary:hover {
   color: var(--cds-text-primary, #161616);
 }
 
@@ -4723,12 +4842,8 @@ fieldset[disabled] .cds--form__helper-text {
   right: 0.5rem;
 }
 
-.cds--snippet--multi .cds--copy-btn.cds--btn--md {
+.cds--snippet--multi .cds--copy-btn {
   z-index: 10;
-  width: 2rem;
-  height: 2rem;
-  min-height: 2rem;
-  padding: 0;
 }
 
 .cds--snippet-btn--expand {
@@ -4979,6 +5094,8 @@ fieldset[disabled] .cds--form__helper-text {
 
 /* stylelint-enable */
 .cds--text-input {
+  --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-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg)));
+  --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));
   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);
@@ -4986,8 +5103,8 @@ fieldset[disabled] .cds--form__helper-text {
   outline: 2px solid transparent;
   outline-offset: -2px;
   width: 100%;
-  height: 2.5rem;
-  padding: 0 1rem;
+  height: var(--cds-layout-size-height-local);
+  padding: 0 var(--cds-layout-density-padding-inline-local);
   border: none;
   border-bottom: 1px solid var(--cds-border-strong);
   background-color: var(--cds-field);
@@ -5024,14 +5141,6 @@ fieldset[disabled] .cds--form__helper-text {
   display: none;
 }
 
-.cds--text-input--lg {
-  height: 3rem;
-}
-
-.cds--text-input--sm {
-  height: 2rem;
-}
-
 .cds--password-input {
   padding-right: 2.5rem;
 }
@@ -5575,6 +5684,10 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--tag {
+  --cds-layout-size-height-xs: 1.125rem;
+  --cds-layout-size-height-sm: 1.125rem;
+  --cds-layout-size-height-md: 1.5rem;
+  --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-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-md)));
   font-size: var(--cds-label-01-font-size, 0.75rem);
   font-weight: var(--cds-label-01-font-weight, 400);
   line-height: var(--cds-label-01-line-height, 1.33333);
@@ -5584,16 +5697,25 @@ fieldset[disabled] .cds--form__helper-text {
   display: inline-flex;
   min-width: 2rem;
   max-width: 100%;
-  min-height: 1.5rem;
+  min-height: var(--cds-layout-size-height-local);
   align-items: center;
   justify-content: center;
-  padding: 0.25rem 0.5rem;
   margin: 0.25rem;
   border-radius: 0.9375rem;
   cursor: default;
+  padding-inline: 0.5rem;
   vertical-align: middle;
   word-break: break-word;
 }
+.cds--layout--size-xs .cds--tag {
+  --cds-layout-size-height: var(--cds-layout-size-height-xs);
+}
+.cds--layout--size-sm .cds--tag {
+  --cds-layout-size-height: var(--cds-layout-size-height-sm);
+}
+.cds--layout--size-md .cds--tag {
+  --cds-layout-size-height: var(--cds-layout-size-height-md);
+}
 .cds--tag.cds--tag--interactive:hover,
 .cds--tag .cds--tag__close-icon:hover {
   background-color: var(--cds-tag-hover-gray, #c6c6c6);
@@ -5764,8 +5886,8 @@ fieldset[disabled] .cds--form__helper-text {
 
 .cds--tag__close-icon {
   display: flex;
-  width: 1.5rem;
-  height: 1.5rem;
+  width: var(--cds-layout-size-height-local);
+  height: var(--cds-layout-size-height-local);
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
@@ -5819,18 +5941,11 @@ fieldset[disabled] .cds--form__helper-text {
   fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
 
-.cds--tag--sm {
-  min-height: 1.125rem;
-  padding: 0 0.5rem;
-}
-
 .cds--tag--sm.cds--tag--filter {
   padding-right: 0;
 }
 
 .cds--tag--sm .cds--tag__close-icon {
-  width: 1.125rem;
-  height: 1.125rem;
   margin-left: 0.3125rem;
 }
 
@@ -6739,13 +6854,18 @@ fieldset[disabled] .cds--form__helper-text {
   transform: rotate(180deg);
 }
 
+.cds--contained-list {
+  --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-xl)));
+  --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));
+}
+
 .cds--contained-list__header {
   position: sticky;
   z-index: 1;
   top: 0;
   display: flex;
   align-items: center;
-  padding-inline: 1rem;
+  padding-inline: var(--cds-layout-density-padding-inline-local);
 }
 
 .cds--contained-list__label {
@@ -6755,7 +6875,7 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--contained-list .cds--search {
   position: sticky;
   z-index: 1;
-  top: 48px;
+  top: var(--cds-layout-size-height-local);
 }
 .cds--contained-list .cds--search.cds--search--expandable .cds--search-input {
   background-color: var(--cds-field);
@@ -6794,46 +6914,6 @@ fieldset[disabled] .cds--form__helper-text {
   outline: none;
 }
 
-.cds--contained-list--on-page.cds--contained-list--sm .cds--contained-list__header {
-  height: 2rem;
-}
-
-.cds--contained-list--sm .cds--contained-list-item__content,
-.cds--contained-list--sm .cds--contained-list-item--clickable .cds--contained-list-item__content {
-  min-height: 2rem;
-  padding: calc(0.5rem - 0.125rem) 1rem;
-}
-
-.cds--contained-list--on-page.cds--contained-list--md .cds--contained-list__header {
-  height: 2.5rem;
-}
-
-.cds--contained-list--md .cds--contained-list-item__content,
-.cds--contained-list--md .cds--contained-list-item--clickable .cds--contained-list-item__content {
-  min-height: 2.5rem;
-  padding: calc(0.75rem - 0.125rem) 1rem;
-}
-
-.cds--contained-list--on-page.cds--contained-list--lg .cds--contained-list__header {
-  height: 3rem;
-}
-
-.cds--contained-list--lg .cds--contained-list-item__content,
-.cds--contained-list--lg .cds--contained-list-item--clickable .cds--contained-list-item__content {
-  min-height: 3rem;
-  padding: calc(1rem - 0.125rem) 1rem;
-}
-
-.cds--contained-list--on-page.cds--contained-list--xl .cds--contained-list__header {
-  height: 4rem;
-}
-
-.cds--contained-list--xl .cds--contained-list-item__content,
-.cds--contained-list--xl .cds--contained-list-item--clickable .cds--contained-list-item__content {
-  min-height: 4rem;
-  padding: calc(1.5rem - 0.125rem) 1rem;
-}
-
 .cds--contained-list--on-page + .cds--contained-list--on-page {
   margin-block-start: 1rem;
 }
@@ -6843,6 +6923,7 @@ fieldset[disabled] .cds--form__helper-text {
   font-weight: var(--cds-heading-compact-01-font-weight, 600);
   line-height: var(--cds-heading-compact-01-line-height, 1.28572);
   letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
+  height: var(--cds-layout-size-height-local);
   border-bottom: 1px solid var(--cds-border-subtle);
   background-color: var(--cds-background, #ffffff);
   color: var(--cds-text-primary, #161616);
@@ -6904,10 +6985,13 @@ fieldset[disabled] .cds--form__helper-text {
 
 .cds--contained-list-item__content,
 .cds--contained-list-item--clickable .cds--contained-list-item__content {
+  --temp-1lh: (var(--cds-body-01-line-height) * 1em);
   font-size: var(--cds-body-01-font-size, 0.875rem);
   font-weight: var(--cds-body-01-font-weight, 400);
   line-height: var(--cds-body-01-line-height, 1.42857);
   letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
+  min-height: var(--cds-layout-size-height-local);
+  padding: calc((var(--cds-layout-size-height-local) - var(--temp-1lh)) / 2) var(--cds-layout-density-padding-inline-local);
   color: var(--cds-text-primary, #161616);
 }
 
@@ -6922,8 +7006,8 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--contained-list--inset-rulers .cds--contained-list-item:not(:last-of-type)::before {
-  right: 1rem;
-  left: 1rem;
+  right: var(--cds-layout-density-padding-inline-local);
+  left: var(--cds-layout-density-padding-inline-local);
 }
 
 .cds--contained-list-item--clickable .cds--contained-list-item__content:not(:disabled):hover {
@@ -6991,20 +7075,14 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--content-switcher {
+  --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-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg)));
+  --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));
   display: flex;
   width: 100%;
-  height: 2.5rem;
+  height: var(--cds-layout-size-height-local);
   justify-content: space-evenly;
 }
 
-.cds--content-switcher--sm {
-  height: 2rem;
-}
-
-.cds--content-switcher--lg {
-  height: 3rem;
-}
-
 .cds--content-switcher-btn {
   font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
   outline: 2px solid transparent;
@@ -7016,9 +7094,6 @@ fieldset[disabled] .cds--form__helper-text {
   position: relative;
   display: inline-flex;
   overflow: hidden;
-  width: 100%;
-  align-items: center;
-  padding: 0.5rem 1rem;
   border: none;
   border-top: 0.0625rem solid var(--cds-border-inverse, #161616);
   border-bottom: 0.0625rem solid var(--cds-border-inverse, #161616);
@@ -7096,6 +7171,12 @@ fieldset[disabled] .cds--form__helper-text {
   border-color: var(--cds-border-disabled, #c6c6c6);
 }
 
+.cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn {
+  width: 100%;
+  align-items: center;
+  padding: 0.5rem var(--cds-layout-density-padding-inline-local);
+}
+
 .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child {
   border-left: 0.0625rem solid var(--cds-border-inverse, #161616);
   border-bottom-left-radius: 0.25rem;
@@ -7383,6 +7464,34 @@ fieldset[disabled] .cds--form__helper-text {
   vertical-align: middle;
 }
 
+.cds--data-table.cds--data-table--top-aligned-body.cds--data-table--lg tr:not([data-child-row]) td:not(.cds--table-expand) {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.cds--data-table.cds--data-table--top-aligned-body.cds--data-table--lg tr:not([data-child-row]) td:not(.cds--table-expand).cds--table-column-menu {
+  padding-top: 0.5rem;
+}
+.cds--data-table.cds--data-table--top-aligned-body.cds--data-table--lg tr:not([data-child-row]) td:not(.cds--table-expand).cds--table-column-checkbox:not(.cds--table-column-radio) {
+  padding-top: 0.8125rem;
+}
+.cds--data-table.cds--data-table--top-aligned-body td {
+  vertical-align: top;
+}
+
+.cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th:not(.cds--table-expand):not(.cds--table-sort__header) {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th:not(.cds--table-expand):not(.cds--table-sort__header).cds--table-column-menu {
+  padding-top: 0.5rem;
+}
+.cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th:not(.cds--table-expand):not(.cds--table-sort__header).cds--table-column-checkbox {
+  padding-top: 0.8125rem;
+}
+.cds--data-table.cds--data-table--top-aligned-header th {
+  vertical-align: top;
+}
+
 .cds--data-table th[align=right],
 .cds--data-table td[align=right] {
   text-align: right;
@@ -7663,7 +7772,8 @@ tr.cds--data-table--selected:last-of-type td {
   height: calc(100% + 1px);
 }
 
-.cds--data-table.cds--data-table--xs .cds--table-column-checkbox {
+.cds--data-table.cds--data-table--xs:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox,
+.cds--data-table.cds--data-table--xs:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox {
   padding-top: 0;
   padding-bottom: 0;
 }
@@ -7685,12 +7795,14 @@ tr.cds--data-table--selected:last-of-type td {
 }
 
 .cds--data-table--sm td,
-.cds--data-table--sm tbody tr th {
+.cds--data-table--sm tbody tr th,
+.cds--data-table--sm.cds--data-table--top-aligned-header th.cds--table-column-checkbox {
   padding-top: 0.4375rem;
   padding-bottom: 0.375rem;
 }
 
-.cds--data-table.cds--data-table--sm .cds--table-column-checkbox {
+.cds--data-table.cds--data-table--sm:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox,
+.cds--data-table.cds--data-table--sm:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox {
   padding-top: 0.1875rem;
   padding-bottom: 0.1875rem;
 }
@@ -7705,7 +7817,8 @@ tr.cds--data-table--selected:last-of-type td {
   height: 2.5rem;
 }
 
-.cds--data-table--md .cds--table-header-label {
+.cds--data-table--md .cds--table-header-label,
+.cds--data-table--md.cds--data-table--top-aligned-header th.cds--table-column-checkbox {
   padding-top: 0.4375rem;
   padding-bottom: 0.4375rem;
 }
@@ -7716,7 +7829,8 @@ tr.cds--data-table--selected:last-of-type td {
   padding-bottom: 0.375rem;
 }
 
-.cds--data-table.cds--data-table--md .cds--table-column-checkbox {
+.cds--data-table.cds--data-table--md:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox,
+.cds--data-table.cds--data-table--md:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox {
   padding-top: 0.1875rem;
   padding-bottom: 0.1875rem;
 }
@@ -7740,6 +7854,7 @@ tr.cds--data-table--selected:last-of-type td {
 .cds--data-table--xl td,
 .cds--data-table--xl tbody tr th {
   padding-top: 1rem;
+  padding-bottom: 1rem;
 }
 
 .cds--data-table--xl th,
@@ -8661,6 +8776,25 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
   border: 0;
 }
 
+.cds--data-table--top-aligned-body td .cds--table-expand__button,
+.cds--data-table--top-aligned-header th .cds--table-expand__button {
+  height: 2rem;
+  align-items: start;
+  padding-top: 0.5rem;
+}
+
+.cds--data-table--top-aligned-body.cds--data-table--xs td .cds--table-expand__button,
+.cds--data-table--top-aligned-header.cds--data-table--xs th .cds--table-expand__button {
+  height: 1.5rem;
+  padding-top: 0.25rem;
+}
+
+.cds--data-table--top-aligned-body.cds--data-table--md td .cds--table-expand__button,
+.cds--data-table--top-aligned-header.cds--data-table--md th .cds--table-expand__button {
+  padding-top: 0.5rem;
+  margin-top: -0.25rem;
+}
+
 .cds--table-expand__button:focus {
   box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe);
   outline: none;
@@ -8674,7 +8808,6 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
 
 .cds--data-table--xl .cds--table-expand__button {
   width: 2rem;
-  padding: 0;
 }
 
 tr.cds--parent-row.cds--expandable-row td.cds--table-expand + td::after {
@@ -9009,6 +9142,30 @@ th .cds--table-sort__flex {
   justify-content: space-between;
 }
 
+.cds--data-table--top-aligned-header th .cds--table-sort__flex {
+  align-items: start;
+}
+
+.cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th.cds--table-sort__header {
+  padding-top: 1rem;
+}
+
+.cds--data-table.cds--data-table--top-aligned-header.cds--data-table--sm th.cds--table-sort__header .cds--table-sort__flex .cds--table-header-label,
+.cds--data-table.cds--data-table--top-aligned-header.cds--data-table--xs th.cds--table-sort__header .cds--table-sort__flex .cds--table-header-label {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.cds--data-table.cds--data-table--top-aligned-header.cds--data-table--sm th.cds--table-sort__header {
+  padding-top: 0.4375rem;
+  padding-bottom: 0.4375rem;
+}
+
+.cds--data-table.cds--data-table--top-aligned-header.cds--data-table--xs th.cds--table-sort__header {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
 .cds--data-table--sort:not(.cds--data-table--xs):not(.cds--data-table--sm):not(.cds--data-table--md):not(.cds--data-table--xl) th .cds--table-sort__flex {
   /* IE11 workaround for align-items: center and min-height
       https://github.com/philipwalton/flexbugs/issues/231 */
@@ -13845,6 +14002,10 @@ optgroup.cds--select-optgroup:disabled,
   white-space: nowrap;
 }
 
+.cds--menu-item__shortcut {
+  display: flex;
+}
+
 .cds--menu--with-icons > .cds--menu-item,
 .cds--menu--with-icons > .cds--menu-item-group > ul > .cds--menu-item,
 .cds--menu--with-icons > .cds--menu-item-radio-group > ul > .cds--menu-item {
@@ -15543,6 +15704,10 @@ optgroup.cds--select-optgroup:disabled,
   background-color: var(--cds-layer-hover);
 }
 
+.cds--overflow-menu > :first-child {
+  margin-block-start: 0;
+}
+
 .cds--overflow-menu--sm {
   width: 2rem;
   height: 2rem;
@@ -16070,6 +16235,11 @@ span.cds--pagination__text.cds--pagination__items-count {
   box-sizing: inherit;
 }
 
+.cds--pagination__button > svg,
+.cds--btn--ghost.cds--pagination__button > svg {
+  margin-block-start: 0;
+}
+
 .cds--pagination--sm .cds--pagination__button,
 .cds--pagination--sm .cds--btn--ghost.cds--pagination__button {
   width: 2rem;
@@ -16809,6 +16979,10 @@ span.cds--pagination__text.cds--pagination__items-count {
   fill: var(--cds-icon-primary, #161616);
 }
 
+.cds--progress-bar {
+  --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));
+}
+
 .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);
@@ -16817,8 +16991,8 @@ span.cds--pagination__text.cds--pagination__items-count {
   display: flex;
   min-width: 3rem;
   justify-content: space-between;
-  margin-bottom: 0.5rem;
   color: var(--cds-text-primary, #161616);
+  margin-block-end: 0.5rem;
 }
 
 .cds--progress-bar__label-text {
@@ -16880,7 +17054,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 
 .cds--progress-bar__status-icon {
   flex-shrink: 0;
-  margin-left: 1rem;
+  margin-inline-start: var(--cds-layout-density-padding-inline-local);
 }
 
 .cds--progress-bar--finished .cds--progress-bar__bar,
@@ -16917,7 +17091,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--progress-bar--error.cds--progress-bar--inline .cds--progress-bar__label {
   flex-shrink: 1;
   justify-content: flex-start;
-  margin-right: 0;
+  margin-inline-end: 0;
 }
 
 @keyframes progress-bar-indeterminate {
@@ -16936,7 +17110,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--progress-bar--inline .cds--progress-bar__label {
   flex-shrink: 0;
   margin-bottom: 0;
-  margin-inline-end: 1rem;
+  margin-inline-end: var(--cds-layout-density-padding-inline-local);
 }
 
 .cds--progress-bar--inline .cds--progress-bar__track {
@@ -16959,7 +17133,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 
 .cds--progress-bar--indented .cds--progress-bar__label,
 .cds--progress-bar--indented .cds--progress-bar__helper-text {
-  padding-inline: 1rem;
+  padding-inline: var(--cds-layout-density-padding-inline-local);
 }
 
 .cds--tooltip {
@@ -17736,11 +17910,10 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 
 .cds--slider__range-label {
-  font-family: var(--cds-code-02-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace);
-  font-size: var(--cds-code-02-font-size, 0.875rem);
-  font-weight: var(--cds-code-02-font-weight, 400);
-  line-height: var(--cds-code-02-line-height, 1.42857);
-  letter-spacing: var(--cds-code-02-letter-spacing, 0.32px);
+  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);
   color: var(--cds-text-primary, #161616);
   white-space: nowrap;
 }
@@ -18527,10 +18700,15 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--tabs .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon {
   padding: 0.25rem;
   margin: -0.25rem;
-  cursor: pointer;
   line-height: 0;
   pointer-events: auto;
 }
+.cds--tabs .cds--tabs__nav-item--icon-left {
+  display: flex;
+  align-items: center;
+  padding-right: 0.5rem;
+  margin-top: -2px;
+}
 .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon {
   padding-left: 1rem;
 }
@@ -19317,10 +19495,21 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 
 .cds--time-picker__input {
+  position: relative;
   display: flex;
   flex-direction: column;
 }
 
+.cds--time-picker__error__icon {
+  position: absolute;
+  top: 50%;
+  right: 1rem;
+  display: flex;
+  height: 100%;
+  place-items: center;
+  transform: translateY(-50%);
+}
+
 .cds--time-picker .cds--select-input {
   width: auto;
   min-width: auto;
@@ -19348,6 +19537,10 @@ span.cds--pagination__text.cds--pagination__items-count {
   opacity: 1;
 }
 
+.cds--time-picker__input-field-error {
+  width: 6.175rem;
+}
+
 .cds--time-picker--light .cds--select-input {
   background-color: var(--cds-field-02, #ffffff);
 }
@@ -19888,6 +20081,10 @@ span.cds--pagination__text.cds--pagination__items-count {
   }
 }
 
+.cds--header__action > :first-child {
+  margin-block-start: 0;
+}
+
 .cds--header__action > svg.cds--navigation-menu-panel-collapse-icon,
 .cds--header__action--active > svg.cds--navigation-menu-panel-expand-icon {
   display: none;
@@ -20269,7 +20466,6 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
   width: 0;
 }
 
-.cds--side-nav.cds--side-nav--rail:not(.cds--side-nav--fixed):hover,
 .cds--side-nav--expanded {
   width: 16rem;
 }
@@ -20820,6 +21016,10 @@ a.cds--side-nav__link--current::before {
   }
 }
 
+.cds--header__action > :first-child {
+  margin-block-start: 0;
+}
+
 .cds--header__action > svg.cds--navigation-menu-panel-collapse-icon,
 .cds--header__action--active > svg.cds--navigation-menu-panel-expand-icon {
   display: none;
@@ -21201,7 +21401,6 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
   width: 0;
 }
 
-.cds--side-nav.cds--side-nav--rail:not(.cds--side-nav--fixed):hover,
 .cds--side-nav--expanded {
   width: 16rem;
 }