@carbon/styles 1.56.0 → 1.57.0-rc.0

package/css/styles.css

@@ -4181,8 +4181,7 @@ li.cds--accordion__item--disabled:last-of-type {
 .cds--popover--bottom-right > .cds--popover > .cds--popover-caret,
 .cds--popover--bottom-end > .cds--popover > .cds--popover-caret {
   block-size: var(--cds-popover-caret-height, 0.375rem);
-  -webkit-clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
-          clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
+  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
   inline-size: var(--cds-popover-caret-width, 0.75rem);
   inset-block-end: 0;
   inset-inline-start: 50%;
@@ -4203,8 +4202,7 @@ li.cds--accordion__item--disabled:last-of-type {
 .cds--popover--bottom-right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
 .cds--popover--bottom-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
   block-size: var(--cds-popover-caret-height, 0.375rem);
-  -webkit-clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
-          clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
+  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
   inline-size: var(--cds-popover-caret-width, 0.75rem);
 }
 
@@ -4261,8 +4259,7 @@ li.cds--accordion__item--disabled:last-of-type {
 .cds--popover--top-right > .cds--popover > .cds--popover-caret,
 .cds--popover--top-end > .cds--popover > .cds--popover-caret {
   block-size: var(--cds-popover-caret-height, 0.375rem);
-  -webkit-clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
-          clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
+  clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
   inline-size: var(--cds-popover-caret-width, 0.75rem);
   inset-block-start: 0;
   inset-inline-start: 50%;
@@ -4283,8 +4280,7 @@ li.cds--accordion__item--disabled:last-of-type {
 .cds--popover--top-right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
 .cds--popover--top-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
   block-size: var(--cds-popover-caret-height, 0.375rem);
-  -webkit-clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
-          clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
+  clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
   inline-size: var(--cds-popover-caret-width, 0.75rem);
 }
 
@@ -4335,8 +4331,7 @@ li.cds--accordion__item--disabled:last-of-type {
 .cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
 .cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
   block-size: var(--cds-popover-caret-width, 0.75rem);
-  -webkit-clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
-          clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
+  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
   inline-size: var(--cds-popover-caret-height, 0.375rem);
   inset-block-start: 50%;
   inset-inline-start: 100%;
@@ -4358,8 +4353,7 @@ li.cds--accordion__item--disabled:last-of-type {
 .cds--popover--right-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
 .cds--popover--right-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
   block-size: var(--cds-popover-caret-width, 0.75rem);
-  -webkit-clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
-          clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
+  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
   inline-size: var(--cds-popover-caret-height, 0.375rem);
 }
 
@@ -4410,8 +4404,7 @@ li.cds--accordion__item--disabled:last-of-type {
 .cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
 .cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
   block-size: var(--cds-popover-caret-width, 0.75rem);
-  -webkit-clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
-          clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
   inline-size: var(--cds-popover-caret-height, 0.375rem);
   inset-block-start: 50%;
   inset-inline-end: 100%;
@@ -4433,8 +4426,7 @@ li.cds--accordion__item--disabled:last-of-type {
 .cds--popover--left-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
 .cds--popover--left-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
   block-size: var(--cds-popover-caret-width, 0.75rem);
-  -webkit-clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
-          clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
   inline-size: var(--cds-popover-caret-height, 0.375rem);
 }
 
@@ -9888,8 +9880,7 @@ fieldset[disabled] .cds--form__helper-text {
   box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe), inset 0 0 0 3px var(--cds-focus-inset, #ffffff);
 }
 .cds--content-switcher-btn:focus::after {
-  -webkit-clip-path: inset(3px 3px 3px 3px);
-          clip-path: inset(3px 3px 3px 3px);
+  clip-path: inset(3px 3px 3px 3px);
 }
 .cds--content-switcher-btn:hover {
   color: var(--cds-text-primary, #161616);
@@ -11683,14 +11674,11 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
   block-size: 3rem;
   inline-size: 100%;
   transform: translate3d(0, 0, 0);
-  transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), -webkit-clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
   transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
-  transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9), -webkit-clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
 .cds--batch-actions ~ .cds--toolbar-content {
-  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
-          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
 }
 
 .cds--toolbar-content .cds--search .cds--search-input {
@@ -12020,12 +12008,9 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
 
 .cds--batch-actions--active ~ .cds--toolbar-search-container,
 .cds--batch-actions--active ~ .cds--toolbar-content {
-  -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
-          clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
+  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
   transform: translate3d(0, 48px, 0);
-  transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), -webkit-clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
   transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
-  transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9), -webkit-clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
 .cds--batch-actions {
@@ -12034,17 +12019,14 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
   align-items: center;
   justify-content: space-between;
   background-color: var(--cds-background-brand, #0f62fe);
-  -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
-          clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
+  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
   inset-block-end: 0;
   inset-inline-end: 0;
   inset-inline-start: 0;
   opacity: 0;
   pointer-events: none;
   transform: translate3d(0, 48px, 0);
-  transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9), -webkit-clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
   transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9), opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
-  transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9), opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9), -webkit-clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
   will-change: transform;
 }
 
@@ -12059,8 +12041,7 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
 
 .cds--batch-actions--active {
   z-index: 1;
-  -webkit-clip-path: polygon(0 0, 300% 0, 300% 300%, 0 300%);
-          clip-path: polygon(0 0, 300% 0, 300% 300%, 0 300%);
+  clip-path: polygon(0 0, 300% 0, 300% 300%, 0 300%);
   opacity: 1;
   pointer-events: all;
   transform: translate3d(0, 0, 0);
@@ -15561,13 +15542,15 @@ button.cds--dropdown-text:focus {
 }
 
 .cds--multi-select--filterable--input-focused,
-.cds--multi-select .cds--list-box__field--wrapper--input-focused {
+.cds--multi-select .cds--list-box__field--wrapper--input-focused:has(button[aria-expanded=false]),
+.cds--multi-select.cds--multi-select--selected .cds--list-box__field--wrapper--input-focused:has(button[aria-expanded=true]) {
   outline: 2px solid var(--cds-focus, #0f62fe);
   outline-offset: -2px;
 }
 @media screen and (prefers-contrast) {
   .cds--multi-select--filterable--input-focused,
-  .cds--multi-select .cds--list-box__field--wrapper--input-focused {
+  .cds--multi-select .cds--list-box__field--wrapper--input-focused:has(button[aria-expanded=false]),
+  .cds--multi-select.cds--multi-select--selected .cds--list-box__field--wrapper--input-focused:has(button[aria-expanded=true]) {
     outline-style: dotted;
   }
 }
@@ -18191,7 +18174,7 @@ optgroup.cds--select-optgroup:disabled,
 }
 
 .cds--modal-scroll-content > *:last-child {
-  padding-block-end: 1.5rem;
+  margin-block-end: 1.5rem;
 }
 
 .cds--modal-footer {
@@ -20827,7 +20810,6 @@ span.cds--pagination__text.cds--pagination__items-count {
   transform: translate(50%, calc(-100% - var(--cds-popover-offset, 0rem)));
 }
 .cds--slider__thumb-wrapper--lower > .cds--popover > .cds--popover-caret {
-  inset-inline-end: 0;
   inset-inline-start: revert;
   transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem)));
 }
@@ -20849,7 +20831,6 @@ span.cds--pagination__text.cds--pagination__items-count {
   transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem)));
 }
 .cds--slider__thumb-wrapper--upper > .cds--popover > .cds--popover-caret {
-  inset-inline-start: 0;
   transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
 }
 
@@ -21144,6 +21125,10 @@ span.cds--pagination__text.cds--pagination__items-count {
   inset-inline-start: 100%;
 }
 
+.cds--popover-container.cds--slider__thumb-wrapper {
+  position: absolute;
+}
+
 /* stylelint-disable */
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--slider__thumb {
@@ -21468,8 +21453,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--slug > .cds--toggletip > .cds--popover > .cds--popover-caret,
 .cds--slug > .cds--toggletip.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
   background: transparent;
-  -webkit-clip-path: none;
-          clip-path: none;
+  clip-path: none;
 }
 
 .cds--slug > .cds--toggletip:is(.cds--popover--top,
@@ -21517,8 +21501,7 @@ span.cds--pagination__text.cds--pagination__items-count {
   border: 1px solid var(--cds-ai-border-start, rgba(166, 200, 255, 0.64));
   background: var(--cds-background, #ffffff);
   block-size: 0.75rem;
-  -webkit-clip-path: polygon(98% 0, 0 0, -52% 150%) border-box;
-          clip-path: polygon(98% 0, 0 0, -52% 150%) border-box;
+  clip-path: polygon(98% 0, 0 0, -52% 150%) border-box;
   content: "";
   inline-size: 0.75rem;
   transform: rotate(45deg);
@@ -22046,6 +22029,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 
 .cds--structured-list-svg {
   display: inline-block;
+  margin-block-start: 0.125rem;
   transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
   vertical-align: top;
 }
@@ -22112,6 +22096,11 @@ span.cds--pagination__text.cds--pagination__items-count {
   }
 }
 
+.cds--structured-list__icon {
+  margin-block-start: 0.125rem;
+  vertical-align: top;
+}
+
 .cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(0, 1fr));