@carbon/ibm-products 2.65.0-rc.0 → 2.66.0-rc.0

package/css/index.css

@@ -423,6 +423,27 @@
   transform: translate(var(--cds-popover-offset, 0rem), calc(100% + var(--cds-popover-offset, 0rem)));
 }
 
+.cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
+.cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  inset-inline-start: auto;
+}
+
+.cds--popover--bottom-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
+  inset-block-end: 0;
+  inset-inline-end: auto;
+  inset-inline-start: 0;
+  transform: translate(50%, calc(var(--cds-popover-offset, 0rem)));
+}
+
+.cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
+  inset-block-end: 0;
+  inset-inline-end: auto;
+  inset-inline-start: 0;
+  transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem)));
+}
+
 [dir=rtl] .cds--popover--bottom-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
 [dir=rtl] .cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
   inset-inline-start: 0;
@@ -772,7 +793,6 @@
   line-height: var(--cds-body-01-line-height, 1.42857);
   letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
   padding: var(--cds-tooltip-padding-block, 1rem) var(--cds-tooltip-padding-inline, 1rem);
-  color: var(--cds-text-inverse, #ffffff);
   max-inline-size: 18rem;
 }
 
@@ -840,6 +860,8 @@
   letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
   padding: 0.5rem 1rem;
   max-inline-size: 11rem;
+  text-wrap: auto;
+  word-break: break-word;
 }
 
 .cds--btn {
@@ -996,7 +1018,7 @@
 }
 .cds--btn--tertiary:disabled, .cds--btn--tertiary:hover:disabled, .cds--btn--tertiary:focus:disabled, .cds--btn--tertiary.cds--btn--disabled, .cds--btn--tertiary.cds--btn--disabled:hover, .cds--btn--tertiary.cds--btn--disabled:focus {
   background: transparent;
-  color: var(--cds-text-on-color-disabled, #8d8d8d);
+  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
   outline: none;
 }
 
@@ -1036,7 +1058,7 @@
 .cds--btn--ghost:disabled, .cds--btn--ghost:hover:disabled, .cds--btn--ghost:focus:disabled, .cds--btn--ghost.cds--btn--disabled, .cds--btn--ghost.cds--btn--disabled:hover, .cds--btn--ghost.cds--btn--disabled:focus {
   border-color: transparent;
   background: transparent;
-  color: var(--cds-text-on-color-disabled, #8d8d8d);
+  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
   outline: none;
 }
 .cds--btn--ghost:not([disabled]) svg {
@@ -1159,7 +1181,7 @@
 }
 .cds--btn--danger--tertiary:disabled, .cds--btn--danger--tertiary:hover:disabled, .cds--btn--danger--tertiary:focus:disabled, .cds--btn--danger--tertiary.cds--btn--disabled, .cds--btn--danger--tertiary.cds--btn--disabled:hover, .cds--btn--danger--tertiary.cds--btn--disabled:focus {
   background: transparent;
-  color: var(--cds-text-on-color-disabled, #8d8d8d);
+  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
   outline: none;
 }
 .cds--btn--danger--ghost {
@@ -1300,6 +1322,11 @@
   box-shadow: none;
 }
 
+.cds--btn--sm .cds--badge-indicator {
+  margin-block-start: 0.25rem;
+  margin-inline-end: 0.25rem;
+}
+
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--btn:focus {
     color: Highlight;
@@ -3955,6 +3982,7 @@ fieldset[disabled] .cds--form__helper-text {
   inset-block-start: 0.0625rem;
 }
 .cds--tabs .cds--tabs__nav-item {
+  position: relative;
   display: flex;
   flex: 1 0 auto;
   padding: 0;
@@ -4185,7 +4213,7 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tabs.cds--tabs--vertical:not(.cds--tabs--tall) .cds--tabs__nav-item-label {
   line-height: var(--cds-body-compact-01-line-height);
 }
-.cds--tabs.cds--tabs__icon--default .cds--tab--list, .cds--tabs.cds--tabs__icon--lg .cds--tab--list {
+.cds--tabs.cds--tabs__icon--default, .cds--tabs.cds--tabs__icon--lg, .cds--tabs.cds--tabs__icon--default .cds--tab--list, .cds--tabs.cds--tabs__icon--lg .cds--tab--list {
   overflow-x: visible;
 }
 .cds--tabs .cds--tabs__nav-item--icon-only {
@@ -4202,6 +4230,10 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tabs .cds--tabs__nav-item--icon-only .cds--tabs__nav-item-label, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon-only .cds--tabs__nav-item-label {
   line-height: 0;
 }
+.cds--tabs .cds--tabs__nav-item--icon-only:not(.cds--tabs__nav-item--icon-only__20) .cds--badge-indicator {
+  margin-block-start: 0.25rem;
+  margin-inline-end: 0.25rem;
+}
 .cds--tabs:not(.cds--tabs--contained) .cds--tabs__nav-item:not(.cds--tabs__nav-item--selected):not(.cds--tabs__nav-item--disabled):hover {
   border-block-end: 2px solid var(--cds-border-strong);
   color: var(--cds-text-primary, #161616);
@@ -8458,6 +8490,7 @@ a.cds--overflow-menu-options__btn::before {
   letter-spacing: var(--cds-heading-04-letter-spacing, 0);
 }
 .c4p--tearsheet .c4p--tearsheet__header-description {
+  display: inline-flex;
   margin-block-start: 1rem;
   max-inline-size: 100%;
   font-size: var(--cds-body-compact-01-font-size, 0.875rem);
@@ -8470,24 +8503,6 @@ a.cds--overflow-menu-options__btn::before {
     max-inline-size: 60%;
   }
 }
-.c4p--tearsheet .c4p--tearsheet__description-tooltip .cds--definition-term {
-  border-block-end: 0;
-  letter-spacing: inherit;
-  word-break: break-word;
-}
-.c4p--tearsheet .c4p--tearsheet__description-tooltip {
-  display: inline-flex;
-}
-.c4p--tearsheet .c4p--tearsheet__description-tooltip .cds--popover-content.cds--definition-tooltip {
-  max-inline-size: fit-content;
-}
-.c4p--tearsheet .c4p--tearsheet__description-text {
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-}
 .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header-description {
   margin-block-start: 0.5rem;
 }
@@ -10673,7 +10688,7 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--notifications-panel__container .c4p--notifications-panel__header-container {
   position: sticky;
   z-index: 2;
-  padding: 0.5rem 1rem 1rem;
+  padding: 0.5rem 1rem;
   background-color: var(--cds-layer-01, #f4f4f4);
   border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
   inset-block-start: 0;
@@ -10683,6 +10698,9 @@ button.c4p--add-select__global-filter-toggle--open {
   align-items: center;
   justify-content: space-between;
 }
+.c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__do-not-disturb-toggle {
+  padding-block-end: 0.5rem;
+}
 .c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__do-not-disturb-toggle .cds--toggle__label-text {
   position: absolute;
   overflow: hidden;
@@ -10716,7 +10734,7 @@ button.c4p--add-select__global-filter-toggle--open {
   padding: 0.5rem 1rem;
   background-color: var(--cds-layer-01, #f4f4f4);
   color: var(--cds-text-secondary, #525252);
-  inset-block-start: 4.8125rem;
+  inset-block-start: 3.0625rem;
 }
 .c4p--notifications-panel__container .c4p--notifications-panel__notification:hover,
 .c4p--notifications-panel__container .c4p--notifications-panel__notification:focus {
@@ -10922,6 +10940,10 @@ button.c4p--add-select__global-filter-toggle--open {
   margin: 0;
 }
 
+.c4p--notifications-panel__header-container:has(.c4p--notifications-panel__do-not-disturb-toggle) + .c4p--notifications-panel__main-section .c4p--notifications-panel__time-section-label {
+  inset-block-start: 4.8125rem;
+}
+
 .cds--breadcrumb {
   box-sizing: border-box;
   padding: 0;
@@ -10948,6 +10970,17 @@ button.c4p--add-select__global-filter-toggle--open {
   }
 }
 
+.cds--breadcrumb--sm {
+  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);
+  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
+}
+
+.cds--breadcrumb .cds--link {
+  font: inherit;
+}
+
 .cds--breadcrumb-item {
   position: relative;
   display: flex;
@@ -10955,6 +10988,10 @@ button.c4p--add-select__global-filter-toggle--open {
   margin-inline-end: 0.5rem;
 }
 
+.cds--breadcrumb--sm .cds--breadcrumb-item {
+  margin-inline-end: 0.25rem;
+}
+
 .cds--breadcrumb-item .cds--link:visited {
   color: var(--cds-link-primary, #0f62fe);
 }
@@ -10962,12 +10999,21 @@ button.c4p--add-select__global-filter-toggle--open {
   color: var(--cds-link-primary-hover, #0043ce);
 }
 
+.cds--breadcrumb-item .cds--link:active,
+.cds--breadcrumb-item .cds--link:visited:active:hover {
+  color: var(--cds-text-primary, #161616);
+}
+
 .cds--breadcrumb-item::after {
   color: var(--cds-text-primary, #161616);
   content: "/";
   margin-inline-start: 0.5rem;
 }
 
+.cds--breadcrumb--sm .cds--breadcrumb-item::after {
+  margin-inline-start: 0.25rem;
+}
+
 .cds--breadcrumb--no-trailing-slash .cds--breadcrumb-item:last-child::after {
   content: "";
 }
@@ -10994,17 +11040,29 @@ button.c4p--add-select__global-filter-toggle--open {
 .cds--breadcrumb-item .cds--overflow-menu {
   position: relative;
   block-size: 1.125rem;
-  inline-size: 1.25rem;
+  inline-size: 1rem;
 }
 .cds--breadcrumb-item .cds--overflow-menu:focus {
+  border: none;
+  box-shadow: none;
   outline: 1px solid var(--cds-focus, #0f62fe);
+  outline-offset: 0;
 }
 .cds--breadcrumb-item .cds--overflow-menu:hover {
   background: transparent;
 }
+.cds--breadcrumb-item .cds--overflow-menu:hover::after {
+  background: var(--cds-link-primary-hover, #0043ce);
+}
+.cds--breadcrumb-item .cds--overflow-menu:active::after {
+  background: var(--cds-text-primary, #161616);
+}
+.cds--breadcrumb-item .cds--overflow-menu:focus::after, .cds--breadcrumb-item .cds--overflow-menu:hover::after {
+  opacity: 1;
+}
 .cds--breadcrumb-item .cds--overflow-menu::after {
   position: absolute;
-  background: var(--cds-link-primary-hover, #0043ce);
+  background: var(--cds-focus, #0f62fe);
   block-size: 1px;
   content: "";
   inline-size: 0.75rem;
@@ -11018,16 +11076,12 @@ button.c4p--add-select__global-filter-toggle--open {
   }
 }
 
-.cds--breadcrumb-item .cds--overflow-menu:hover::after {
-  opacity: 1;
-}
-
 .cds--breadcrumb-item .cds--overflow-menu.cds--overflow-menu--open {
   background: transparent;
   box-shadow: none;
 }
 
-.cds--breadcrumb-item .cds--overflow-menu__icon {
+.cds--breadcrumb-item .cds--overflow-menu .cds--overflow-menu__icon {
   position: relative;
   fill: var(--cds-link-primary, #0f62fe);
   transform: translateY(4px);
@@ -11037,6 +11091,10 @@ button.c4p--add-select__global-filter-toggle--open {
   fill: var(--cds-link-primary-hover, #0043ce);
 }
 
+.cds--breadcrumb-item .cds--overflow-menu:active .cds--overflow-menu__icon {
+  fill: var(--cds-text-primary, #161616);
+}
+
 .cds--breadcrumb-menu-options:focus {
   outline: none;
 }
@@ -11058,6 +11116,20 @@ button.c4p--add-select__global-filter-toggle--open {
   inset-inline-start: initial;
 }
 
+.cds--breadcrumb .cds--overflow-menu.cds--btn--icon-only {
+  min-block-size: 1.125rem;
+  padding-inline: 0;
+}
+
+.cds--breadcrumb--sm .cds--breadcrumb-item .cds--overflow-menu {
+  block-size: 1rem;
+  inline-size: 1rem;
+  min-block-size: 1rem;
+}
+.cds--breadcrumb--sm .cds--breadcrumb-item .cds--overflow-menu .cds--overflow-menu__icon {
+  transform: translateY(3px);
+}
+
 .cds--breadcrumb.cds--skeleton .cds--link {
   position: relative;
   padding: 0;
@@ -11089,11 +11161,6 @@ button.c4p--add-select__global-filter-toggle--open {
   }
 }
 
-.cds--breadcrumb .cds--overflow-menu.cds--btn--icon-only {
-  min-block-size: 1.125rem;
-  padding-inline: 0;
-}
-
 @keyframes ai-skeleton-animation {
   0% {
     transform: translateX(-100%);
@@ -18600,6 +18667,10 @@ a.cds--side-nav__link--current::before {
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+.c4p--datagrid__sortableColumn {
+  /* stylelint-disable-next-line declaration-no-important */
+  padding-inline: 1rem !important;
+}
 .c4p--datagrid__sortableColumn .cds--table-header-label .header-title {
   display: inline-block;
   inline-size: auto;
@@ -22666,7 +22737,21 @@ th.c4p--datagrid__select-all-toggle-on.button {
 
 .c4p--string-formatter {
   display: inline-block;
-  text-align: start;
+}
+.c4p--string-formatter--truncate {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  line-height: inherit;
+  text-overflow: ellipsis;
+  word-break: break-word;
+}
+.c4p--string-formatter button.cds--definition-term {
+  border-block-end: none;
+  letter-spacing: inherit;
+}
+.c4p--string-formatter .cds--popover-container {
+  display: flex;
 }
 
 .c4p--string-formatter--content {
@@ -22679,7 +22764,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
   overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
-  max-inline-size: 80ch;
 }
 
 .c4p--string-formatter__tooltip > button {