@carbon/styles 1.55.0-rc.0 → 1.55.1-rc.0

package/css/styles.css

@@ -8114,29 +8114,30 @@ fieldset[disabled] .cds--form__helper-text {
   background-color: var(--cds-layer-hover);
 }
 
-.cds--tag--disabled,
+.cds--tag--disabled:not(.cds--tag--operational),
 .cds--tag--filter.cds--tag--disabled,
 .cds--tag--interactive.cds--tag--disabled {
   background-color: var(--cds-layer);
   color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
   box-shadow: none;
+  outline: none;
 }
-.cds--tag--disabled.cds--tag--operational,
+.cds--tag--disabled:not(.cds--tag--operational).cds--tag--operational,
 .cds--tag--filter.cds--tag--disabled.cds--tag--operational,
 .cds--tag--interactive.cds--tag--disabled.cds--tag--operational {
   border: 1px solid var(--cds-layer);
 }
-.cds--tag--disabled.cds--tag--operational:hover,
+.cds--tag--disabled:not(.cds--tag--operational).cds--tag--operational:hover,
 .cds--tag--filter.cds--tag--disabled.cds--tag--operational:hover,
 .cds--tag--interactive.cds--tag--disabled.cds--tag--operational:hover {
   background-color: var(--cds-layer);
 }
-.cds--tag--disabled .cds--tag__close-icon:hover,
+.cds--tag--disabled:not(.cds--tag--operational) .cds--tag__close-icon:hover,
 .cds--tag--filter.cds--tag--disabled .cds--tag__close-icon:hover,
 .cds--tag--interactive.cds--tag--disabled .cds--tag__close-icon:hover {
   background-color: var(--cds-layer);
 }
-.cds--tag--disabled:hover,
+.cds--tag--disabled:not(.cds--tag--operational):hover,
 .cds--tag--filter.cds--tag--disabled:hover,
 .cds--tag--interactive.cds--tag--disabled:hover {
   cursor: not-allowed;
@@ -15049,8 +15050,8 @@ button.cds--dropdown-text:focus {
   border-block-end: 1px solid var(--cds-border-strong);
 }
 
-.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--list-box__invalid-icon,
-.cds--list-box__wrapper--fluid .cds--list-box--warning .cds--list-box__invalid-icon {
+.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--list-box[data-invalid] .cds--list-box__invalid-icon,
+.cds--list-box__wrapper--fluid .cds--list-box.cds--list-box--warning .cds--list-box__invalid-icon {
   inset-block-start: 5.0625rem;
   inset-inline-end: 1rem;
   pointer-events: none;
@@ -15164,6 +15165,11 @@ button.cds--dropdown-text:focus {
   inset-inline-end: 0.75rem;
 }
 
+.cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--slug::before,
+.cds--list-box__wrapper--slug .cds--list-box--warning .cds--slug::before {
+  display: none;
+}
+
 .cds--list-box__wrapper--fluid .cds--combo-box .cds--list-box__field {
   overflow: visible;
   padding: 0;
@@ -15646,6 +15652,22 @@ button.cds--dropdown-text:focus {
   inset-block-start: calc(100% + 0.0625rem);
 }
 
+.cds--number__controls:hover .cds--number__control-btn::after {
+  display: none;
+}
+
+.cds--number__input-wrapper--slug .cds--number__rule-divider {
+  display: none;
+}
+
+.cds--number__input-wrapper--slug .cds--number__control-btn:hover {
+  box-shadow: 0 -1px 0 var(--cds-ai-border-strong, #4589ff) inset;
+}
+
+.cds--number__controls:focus-within .cds--number__control-btn::after {
+  display: none;
+}
+
 .cds--number {
   position: relative;
   display: flex;
@@ -15811,7 +15833,6 @@ button.cds--dropdown-text:focus {
   align-items: center;
   justify-content: center;
   block-size: 100%;
-  border-block-end: 0.0625rem solid var(--cds-border-strong);
   color: var(--cds-icon-primary, #161616);
 }
 .cds--number__control-btn *,
@@ -15838,6 +15859,7 @@ button.cds--dropdown-text:focus {
 }
 .cds--number__control-btn:hover {
   background-color: var(--cds-field-hover);
+  box-shadow: 0 -1px 0 var(--cds-border-strong) inset;
   color: var(--cds-icon-primary, #161616);
   cursor: pointer;
 }
@@ -15860,20 +15882,27 @@ button.cds--dropdown-text:focus {
 }
 
 .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn {
-  border-block-end-color: var(--cds-focus, #0f62fe);
-  box-shadow: inset 0 2px var(--cds-focus, #0f62fe), inset 0 -1px var(--cds-focus, #0f62fe);
+  border-width: 2px 0;
+  border-style: solid;
+  border-color: var(--cds-focus, #0f62fe);
+  box-shadow: none;
+  outline-offset: -2px;
 }
 
-.cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type {
-  box-shadow: inset 0 2px var(--cds-focus, #0f62fe), inset 0 -1px var(--cds-focus, #0f62fe), inset -2px 0 var(--cds-focus, #0f62fe);
+.cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover {
+  box-shadow: -4px 0 0 -2px var(--cds-focus, #0f62fe) inset;
 }
 
 .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover {
-  box-shadow: inset 0 2px var(--cds-support-error, #da1e28), inset 0 -1px var(--cds-support-error, #da1e28), inset -2px 0 var(--cds-support-error, #da1e28);
+  box-shadow: -4px 0 0 -2px var(--cds-support-error, #da1e28) inset;
 }
 
 .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:hover {
-  box-shadow: inset 0 2px var(--cds-support-error, #da1e28), inset 0 -1px var(--cds-support-error, #da1e28);
+  border-width: 2px 0;
+  border-style: solid;
+  border-color: var(--cds-support-error, #da1e28);
+  box-shadow: none;
+  outline-offset: -2px;
 }
 
 .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:focus:hover {
@@ -16032,13 +16061,60 @@ button.cds--dropdown-text:focus {
 .cds--number__input-wrapper--slug .cds--slug {
   position: absolute;
   inset-block-start: 50%;
-  inset-inline-end: 5.5rem;
+  inset-inline-end: 6rem;
   transform: translateY(-50%);
 }
 
-.cds--number__input-wrapper--slug input[data-invalid] ~ .cds--slug,
-.cds--number__input-wrapper--slug.cds--number__input-wrapper--warning .cds--slug {
-  inset-inline-end: 7.5rem;
+.cds--number__input-wrapper--slug .cds--slug::before,
+.cds--number__input-wrapper--slug .cds--number__control-btn::before,
+.cds--number__input-wrapper--slug .cds--number__control-btn::after {
+  position: absolute;
+  background-color: var(--cds-border-subtle);
+  block-size: 1rem;
+  content: "";
+  inline-size: 0.0625rem;
+}
+
+.cds--number__input-wrapper--slug .cds--slug::before {
+  display: none;
+  inset-inline-start: -1rem;
+}
+
+.cds--number__control-btn::after {
+  display: block;
+  inset-inline-end: 0;
+}
+
+.cds--number__input-wrapper--slug .cds--number__control-btn::before {
+  display: block;
+  inset-inline-end: 2.5rem;
+}
+
+.cds--number__input-wrapper--slug .cds--number__control-btn:focus::before {
+  display: none;
+}
+
+.cds--number__control-btn:hover::after,
+.cds--number__control-btn:hover::before {
+  display: none;
+  inset-inline-end: 0;
+}
+
+.cds--number__input-wrapper:has(.cds--number__control-btn:hover) ~ .cds--number__input-wrapper--slug::after {
+  display: none;
+}
+
+.cds--number__control-btn:has(.up-icon)::after,
+.cds--number__control-btn:has(.up-icon)::before {
+  display: none;
+}
+
+.cds--number__input-wrapper--slug .cds--number__invalid {
+  inset-inline-end: 9rem;
+}
+
+.cds--number__input-wrapper--slug:has(.cds--number__invalid) .cds--slug::before {
+  display: block;
 }
 
 .cds--number .cds--number__input-wrapper--slug input[data-invalid],
@@ -16050,11 +16126,7 @@ button.cds--dropdown-text:focus {
 .cds--number__input-wrapper--slug input[type=number]:disabled {
   background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
   border-block-end-color: var(--cds-ai-border-strong, #4589ff);
-  padding-inline-end: 7rem;
-}
-
-.cds--number__input-wrapper--slug input[type=number]:not([data-invalid]):not(:has(~ .cds--slug--revert)) ~ .cds--number__controls .cds--number__control-btn {
-  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
+  padding-inline-end: 9.0625rem;
 }
 
 .cds--number.cds--skeleton {
@@ -16832,8 +16904,8 @@ optgroup.cds--select-optgroup:disabled,
   border-color: transparent;
 }
 
-.cds--select--fluid .cds--select--invalid .cds--select__invalid-icon,
-.cds--select--fluid .cds--select--warning .cds--select__invalid-icon {
+.cds--select--fluid .cds--select--invalid .cds--select-input__wrapper[data-invalid] .cds--select__invalid-icon,
+.cds--select--fluid .cds--select--warning .cds--select-input__wrapper .cds--select__invalid-icon {
   inset-block-start: 4.5625rem;
   inset-inline-end: 1rem;
   pointer-events: none;
@@ -16875,6 +16947,10 @@ optgroup.cds--select-optgroup:disabled,
   padding-inline-end: 4rem;
 }
 
+.cds--select--fluid .cds--select--slug:has(.cds--select__invalid-icon) .cds--slug::before {
+  display: none;
+}
+
 .cds--text-area {
   box-sizing: border-box;
   padding: 0;
@@ -17249,6 +17325,10 @@ optgroup.cds--select-optgroup:disabled,
   inset-inline-end: 1rem;
 }
 
+.cds--text-area--fluid .cds--text-area__wrapper--slug .cds--text-area--invalid {
+  border-block-end-color: transparent;
+}
+
 .cds--text-input--fluid.cds--text-input-wrapper {
   position: relative;
   background: var(--cds-field);
@@ -18187,14 +18267,14 @@ optgroup.cds--select-optgroup:disabled,
 }
 
 .cds--modal--slug .cds--modal-container {
-  background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
+  background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
   border: 1px solid transparent;
   background-color: var(--cds-layer);
   box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 24px 40px -24px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
 }
 
 .cds--modal--slug .cds--modal-container:has(.cds--modal-footer) {
-  background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) calc(0% + 64px), var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) calc(0% + 64px), var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
+  background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) calc(0% + 64px), var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) calc(0% + 64px), 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
   box-shadow: inset 0 -80px 0 -16px var(--cds-layer), inset 0 -160px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 24px 40px -24px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
 }
 
@@ -21373,7 +21453,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 
 .cds--slug .cds--slug-content {
-  background: linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) border-box;
+  background: linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) border-box;
   border: 1px solid transparent;
   border-radius: 0.5rem;
   box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), -40px 44px 60px -24px var(--cds-ai-popover-shadow-outer-01, rgba(0, 67, 206, 0.06)), -56px 64px 64px -24px var(--cds-ai-popover-shadow-outer-02, rgba(0, 0, 0, 0.04));
@@ -22263,43 +22343,127 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 .cds--tabs.cds--tabs--contained .cds--tabs__nav-item {
   background-color: var(--cds-layer-accent);
-}
-.cds--tabs.cds--tabs--contained .cds--tabs__nav-item + .cds--tabs__nav-item {
   box-shadow: -0.0625rem 0 0 0 var(--cds-border-strong);
   margin-inline-start: 0;
 }
+.cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected + div + .cds--tabs__nav-item {
+  box-shadow: -0.0625rem 0 0 0 transparent;
+}
 .cds--tabs .cds--tabs__nav-item .cds--tabs__nav-link {
   transition: color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), border-bottom-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
-.cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled) .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon:hover {
-  background-color: inherit;
+.cds--tabs.cds--tabs--dismissable .cds--tabs__nav-link {
+  padding-inline-end: 2.5rem;
 }
-.cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled) .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon svg {
-  padding: 0.25rem;
-  margin: -0.25rem;
-  block-size: 24px;
-  inline-size: 24px;
+.cds--tabs.cds--tabs--dismissable.cds--tabs--contained .cds--tabs__nav-link {
+  padding-inline-end: calc(3rem - 1px);
 }
-.cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled) .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon svg:hover {
-  background-color: var(--cds-layer-accent-hover);
+.cds--tabs .cds--tabs__nav-item--close {
+  position: relative;
+  display: flex;
+  align-items: center;
+  inset-inline-start: calc(-0.75rem - 1px);
+  margin-inline-start: calc(-1.5rem + 1px);
+}
+.cds--tabs:not(.cds--tabs--contained) .cds--tabs__nav-item--close--hidden {
+  position: absolute;
+  overflow: hidden;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  block-size: 1px;
+  clip: rect(0, 0, 0, 0);
+  inline-size: 1px;
+  visibility: inherit;
+  white-space: nowrap;
+  position: static;
+  inline-size: 0.1875rem;
+}
+.cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tabs__nav-item--close--hidden {
+  display: none;
+}
+.cds--tabs .cds--tabs__nav-item--close-icon {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+  display: inline-block;
+  padding: 0;
+  border: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  cursor: pointer;
+  text-align: start;
+  inline-size: 100%;
+  block-size: 1.5rem;
+  inline-size: 1.5rem;
+  padding-block: 0.25rem;
+  padding-inline: 0.25rem;
+  pointer-events: auto;
+}
+.cds--tabs .cds--tabs__nav-item--close-icon *,
+.cds--tabs .cds--tabs__nav-item--close-icon *::before,
+.cds--tabs .cds--tabs__nav-item--close-icon *::after {
+  box-sizing: inherit;
+}
+.cds--tabs .cds--tabs__nav-item--close-icon::-moz-focus-inner {
+  border: 0;
 }
-.cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled).cds--tabs__nav-item--selected .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon svg:hover {
+.cds--tabs .cds--tabs__nav-item--close-icon svg {
+  block-size: 1rem;
+  fill: var(--cds-text-secondary, #525252);
+  inline-size: 1rem;
+}
+.cds--tabs .cds--tabs__nav-item--close-icon svg:hover {
+  fill: var(--cds-text-primary, #161616);
+}
+.cds--tabs .cds--tabs__nav-item--close-icon:hover {
   background-color: var(--cds-layer-hover);
 }
-.cds--tabs .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled) .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon:hover {
-  background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
+.cds--tabs .cds--tabs__nav-item--close-icon:focus, .cds--tabs .cds--tabs__nav-item--close-icon:active {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+}
+@media screen and (prefers-contrast) {
+  .cds--tabs .cds--tabs__nav-item--close-icon:focus, .cds--tabs .cds--tabs__nav-item--close-icon:active {
+    outline-style: dotted;
+  }
+}
+.cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon svg {
+  fill: var(--cds-text-primary, #161616);
+}
+.cds--tabs .cds--tabs__nav-item--close-icon--selected svg {
+  fill: var(--cds-text-primary, #161616);
+}
+.cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon--disabled,
+.cds--tabs .cds--tabs__nav-item--close-icon--disabled,
+.cds--tabs .cds--tabs__nav-item--close-icon--disabled:hover {
+  background-color: inherit;
+  cursor: not-allowed;
+}
+.cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon--disabled svg,
+.cds--tabs .cds--tabs__nav-item--close-icon--disabled svg,
+.cds--tabs .cds--tabs__nav-item--close-icon--disabled:hover svg {
+  fill: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
+}
+.cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon--disabled:focus, .cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon--disabled:active,
+.cds--tabs .cds--tabs__nav-item--close-icon--disabled:focus,
+.cds--tabs .cds--tabs__nav-item--close-icon--disabled:active,
+.cds--tabs .cds--tabs__nav-item--close-icon--disabled:hover:focus,
+.cds--tabs .cds--tabs__nav-item--close-icon--disabled:hover:active {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
 }
 .cds--tabs .cds--tabs__nav-item--icon {
   display: flex;
   align-items: center;
   padding-inline-start: 0.5rem;
 }
-.cds--tabs .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon {
-  padding: 0.25rem;
-  margin: -0.25rem;
-  line-height: 0;
-  pointer-events: auto;
-}
 .cds--tabs .cds--tabs__nav-item--icon-left {
   display: flex;
   align-items: center;
@@ -22630,6 +22794,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--tile--clickable:focus {
   outline: 2px solid var(--cds-focus, #0f62fe);
   outline-offset: -2px;
+  text-decoration: none;
 }
 @media screen and (prefers-contrast) {
   .cds--tile--clickable:focus {
@@ -22931,13 +23096,13 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 
 .cds--tile--slug.cds--tile {
-  background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
+  background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
   border: 1px solid transparent;
-  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 24px 40px -24px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
+  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 8px 0 var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
 }
 
 .cds--tile--slug.cds--tile--expandable:hover {
-  background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
+  background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
 }
 
 .cds--tile--slug.cds--tile--selectable::before,
@@ -22957,7 +23122,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--tile--slug.cds--tile--selectable::before,
 .cds--tile--slug.cds--tile--clickable::before {
   background: linear-gradient(to top, var(--cds-ai-aura-hover-start, rgba(69, 137, 255, 0.32)) 0%, 15%, var(--cds-ai-aura-hover-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-aura-hover-background, #edf5ff), var(--cds-ai-aura-hover-background, #edf5ff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-ai-aura-hover-background, #edf5ff), var(--cds-ai-aura-hover-background, #edf5ff)) border-box;
-  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1));
+  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
 }
 
 .cds--tile--slug.cds--tile--selectable:hover::before,
@@ -22965,9 +23130,14 @@ span.cds--pagination__text.cds--pagination__items-count {
   opacity: 1;
 }
 
+.cds--tile--slug.cds--tile--selectable:focus,
+.cds--tile--slug.cds--tile--clickable:focus {
+  outline-offset: -1px;
+}
+
 .cds--tile--slug.cds--tile--selectable::after {
-  background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient(to bottom, var(--cds-border-inverse, #161616), var(--cds-border-inverse, #161616)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
-  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1));
+  background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient(to bottom, var(--cds-border-inverse, #161616), var(--cds-border-inverse, #161616)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
+  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 8px 0 var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
 }
 
 .cds--tile--slug.cds--tile--selectable:hover::after {