@carbon/ibm-products 2.1.1 → 2.1.3

package/css/index.css

@@ -76,8 +76,6 @@
 .cds--copy-btn {
   position: relative;
   display: flex;
-  width: 2.5rem;
-  height: 2.5rem;
   align-items: center;
   justify-content: center;
   padding: 0;
@@ -487,11 +485,13 @@
   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;
@@ -534,16 +534,13 @@
   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);
 }
 
@@ -552,12 +549,8 @@
   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 {
@@ -807,7 +800,167 @@
 }
 
 /* stylelint-enable */
+: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--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, 1.28572) * 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;
@@ -823,15 +976,16 @@
   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);
@@ -851,10 +1005,12 @@
 }
 .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 {
@@ -957,7 +1113,7 @@
   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);
@@ -989,19 +1145,19 @@
   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;
@@ -1033,15 +1189,12 @@
   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 {
@@ -1113,7 +1266,7 @@
   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);
@@ -1142,46 +1295,12 @@
   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 {
@@ -1854,6 +1973,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,
@@ -1954,6 +2074,8 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .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);
@@ -1961,8 +2083,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);
@@ -1999,14 +2121,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;
 }
@@ -2898,10 +3012,15 @@ fieldset[disabled] .cds--form__helper-text {
 .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;
 }
@@ -3373,6 +3492,10 @@ p.c4p--about-modal__copyright-text:first-child {
   background-color: var(--cds-layer-hover);
 }
 
+.cds--overflow-menu > :first-child {
+  margin-block-start: 0;
+}
+
 .cds--overflow-menu--sm {
   width: 2rem;
   height: 2rem;
@@ -6836,11 +6959,13 @@ a.cds--overflow-menu-options__btn::before {
   padding: 1.5rem 2rem;
   border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
   margin: 0;
+  background-color: var(--cds-layer);
 }
 .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header {
   padding: 1rem;
   border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
   margin: 0;
+  background-color: var(--cds-layer);
 }
 .c4p--tearsheet .c4p--tearsheet__header-content {
   display: flex;
@@ -6931,10 +7056,13 @@ a.cds--overflow-menu-options__btn::before {
 .c4p--tearsheet .c4p--tearsheet__main {
   display: flex;
   flex-direction: row;
-  background-color: var(--cds-layer);
+  background-color: var(--cds-background, #ffffff);
   grid-column: 1/-1;
   grid-row: 1/-1;
 }
+.c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__main {
+  background-color: var(--cds-layer);
+}
 .c4p--tearsheet .c4p--tearsheet__main .c4p--tearsheet__influencer {
   border-right: none;
   border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
@@ -9711,6 +9839,10 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .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);
@@ -9720,16 +9852,25 @@ button.c4p--add-select__global-filter-toggle--open {
   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);
@@ -9900,8 +10041,8 @@ button.c4p--add-select__global-filter-toggle--open {
 
 .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;
@@ -9955,18 +10096,11 @@ button.c4p--add-select__global-filter-toggle--open {
   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;
 }
 
@@ -16218,6 +16352,14 @@ button.c4p--add-select__global-filter-toggle--open {
   padding: 0;
 }
 
+.c4p--datagrid .cds--action-list .cds--btn {
+  align-items: center;
+}
+
+.c4p--datagrid .cds--action-list .cds--btn__icon {
+  margin-top: 0;
+}
+
 /*
 * Licensed Materials - Property of IBM
 * 5724-Q36
@@ -16648,6 +16790,13 @@ button.c4p--add-select__global-filter-toggle--open {
   grid-template-columns: 1fr 1fr;
 }
 
+.c4p--datagrid-filter-flyout__trigger.cds--btn {
+  display: flex;
+  width: 3rem;
+  height: 3rem;
+  justify-content: center;
+}
+
 .c4p--datagrid-filter-flyout__trigger--open.cds--btn.cds--btn--icon-only {
   position: relative;
   background-color: var(--cds-layer-02, #ffffff);
@@ -16771,6 +16920,10 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .cds--btn.c4p--datagrid-filter-panel-open-button {
+  display: flex;
+  width: 3rem;
+  height: 3rem;
+  justify-content: center;
   border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
   border-bottom: none;
 }