@carbon/styles 1.114.0 → 1.115.0

package/scss/components/tag/_tag.scss

@@ -10,6 +10,8 @@
 @use '../../type' as *;
 @use '../../motion' as *;
 @use '../../config' as *;
+@use '../../border-radius' as *;
+@use '../../feature-flags' as *;
 @use '../../utilities/component-tokens' as *;
 @use '../../utilities/convert';
 @use '../../utilities/high-contrast-mode' as *;
@@ -55,6 +57,10 @@
     vertical-align: middle;
     word-break: break-word;
 
+    @if enabled('enable-v12-release') {
+      border-radius: $border-radius-04;
+    }
+
     &.#{$prefix}--tag--lg {
       padding-inline-start: $spacing-04;
     }
@@ -249,7 +255,8 @@
     @include tag-theme(
       $background-inverse,
       $text-inverse,
-      $background-inverse-hover
+      $background-inverse-hover,
+      $close-focus-color: $focus-inverse
     );
   }
 
@@ -266,10 +273,12 @@
   .#{$prefix}--tag--outline:not(.#{$prefix}--tag--operational):not(span):not(
       [disabled]
     ) {
-    @include tag-theme($background, $text-primary, $layer-hover);
-
-    outline: 1px solid $background-inverse;
-    outline-offset: -1px;
+    @include tag-theme(
+      $background,
+      $text-primary,
+      $layer-hover,
+      $outline-color: $background-inverse
+    );
   }
 
   .#{$prefix}--tag--disabled:not(.#{$prefix}--tag--operational),
@@ -280,16 +289,21 @@
     box-shadow: none;
     outline: none;
 
+    .#{$prefix}--tag__label {
+      background-color: $layer;
+      color: $text-disabled;
+    }
+  }
+
+  .#{$prefix}--tag--disabled:not(.#{$prefix}--tag--operational):not(
+      .#{$prefix}--tag--filter
+    ),
+  .#{$prefix}--tag--interactive.#{$prefix}--tag--disabled {
     @media (any-hover: hover) {
       &:hover {
         cursor: not-allowed;
       }
     }
-
-    .#{$prefix}--tag__label {
-      background-color: $layer;
-      color: $text-disabled;
-    }
   }
 
   .#{$prefix}--tag--selectable.#{$prefix}--tag--disabled,
@@ -328,6 +342,10 @@
       background-color $duration-fast-01 motion(standard, productive),
       box-shadow $duration-fast-01 motion(standard, productive);
 
+    @if enabled('enable-v12-release') {
+      border-radius: $border-radius-04;
+    }
+
     svg {
       fill: currentColor;
     }
@@ -355,15 +373,10 @@
 
   .#{$prefix}--tag__close-icon:focus {
     z-index: 99999;
-    border-radius: 50%;
     box-shadow: inset 0 0 0 1px $focus;
     outline: none;
   }
 
-  .#{$prefix}--tag--high-contrast .#{$prefix}--tag__close-icon:focus {
-    box-shadow: inset 0 0 0 1px $focus-inverse;
-  }
-
   @media (any-hover: hover) {
     .#{$prefix}--tag--filter.#{$prefix}--tag--disabled
       .#{$prefix}--tag__close-icon:hover {
@@ -383,6 +396,18 @@
     margin-inline-start: convert.to-rem(5px);
   }
 
+  @if enabled('enable-v12-release') {
+    .#{$prefix}--tag--sm,
+    .#{$prefix}--tag.#{$prefix}--layout--size-sm {
+      border-radius: $border-radius-02;
+    }
+
+    .#{$prefix}--tag--sm .#{$prefix}--tag__close-icon,
+    .#{$prefix}--tag.#{$prefix}--layout--size-sm .#{$prefix}--tag__close-icon {
+      border-radius: $border-radius-02;
+    }
+  }
+
   // Skeleton state
   .#{$prefix}--tag.#{$prefix}--skeleton {
     @include skeleton;
@@ -466,9 +491,14 @@
     max-inline-size: convert.to-rem(158px);
   }
 
+  .#{$prefix}--tag > span {
+    min-inline-size: 0;
+  }
+
   .#{$prefix}--interactive--tag-children {
     display: inline-flex;
     max-inline-size: convert.to-rem(200px);
+    min-inline-size: 0;
     place-items: center;
   }
 
@@ -476,7 +506,7 @@
     .#{$prefix}--tag__custom-icon
     + span
     > .#{$prefix}--interactive--tag-children {
-    max-inline-size: convert.to-rem(184px);
+    max-inline-size: 100%;
   }
 
   .#{$prefix}--tag .#{$prefix}--definition-term {

package/scss/components/text-input/_text-input.scss

@@ -14,11 +14,12 @@
 @use '../../theme' as *;
 @use '../../type' as *;
 @use '../../spacing' as *;
+@use '../../border-radius' as *;
+@use '../../feature-flags' as *;
 @use '../../motion' as *;
 @use '../../utilities/ai-gradient' as *;
 @use '../../utilities/component-reset';
 @use '../../utilities/placeholder-colors' as *;
-@use '../../utilities/tooltip' as *;
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/convert';
 @use '../../utilities/layout';
@@ -42,14 +43,28 @@
     background-color: $field;
     block-size: layout.size('height');
     border-block-end: 1px solid $border-strong;
+    caret-color: $text-primary;
     color: $text-primary;
     font-family: inherit;
-
     inline-size: 100%;
     transition:
       background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
 
+    @if enabled('enable-v12-release') {
+      border: 1px solid transparent;
+      border-radius: $border-radius-04;
+      // (gray-20 → gray-50)
+      background:
+        linear-gradient($field, $field) padding-box,
+        linear-gradient(
+            to bottom,
+            $border-subtle calc(100% - 4px),
+            $border-strong 100%
+          )
+          border-box;
+    }
+
     &:focus,
     &:active {
       @include focus-outline('outline');
@@ -100,12 +115,6 @@
     opacity: 1;
   }
 
-  // TODO: deprecate this style block
-  .#{$prefix}--text-input--password__visibility {
-    @include tooltip--trigger('icon', 'bottom');
-    @include tooltip--placement('icon', 'bottom', 'center');
-  }
-
   .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger {
     @include focus-outline('reset');
 
@@ -122,6 +131,10 @@
     inset-inline-end: 0;
     min-block-size: auto;
     transition: outline $duration-fast-01 motion(standard, productive);
+
+    @if enabled('enable-v12-release') {
+      border-radius: $border-radius-04;
+    }
   }
 
   .#{$prefix}--toggle-password-tooltip .#{$prefix}--popover {
@@ -169,12 +182,6 @@
     ~ .#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger
     svg {
     fill: $icon-disabled;
-
-    @media (any-hover: hover) {
-      &:hover {
-        fill: $icon-disabled;
-      }
-    }
   }
 
   .#{$prefix}--text-input--password__visibility__toggle:disabled.#{$prefix}--tooltip__trigger {
@@ -185,16 +192,6 @@
     cursor: default;
   }
 
-  @media (any-hover: hover) {
-    .#{$prefix}--text-input--password__visibility__toggle:disabled.#{$prefix}--tooltip__trigger:hover {
-      svg {
-        fill: $icon-disabled;
-      }
-
-      cursor: default;
-    }
-  }
-
   .#{$prefix}--text-input__counter-alert {
     position: absolute;
     overflow: hidden;
@@ -212,9 +209,7 @@
   .#{$prefix}--text-input:disabled {
     @include focus-outline('reset');
 
-    background-color: $field;
-
-    border-block-end: 1px solid transparent;
+    background: $field;
     color: $text-disabled;
     cursor: not-allowed;
     // Needed to fix disabled text in Safari #6673
@@ -247,100 +242,6 @@
     @include skeleton;
   }
 
-  // Deprecated -- Styles have been moved to `fluid-text-input.scss`
-  // V12 - Remove this block
-  //-----------------------------
-  // Fluid Text Input
-  //-----------------------------
-  .#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper {
-    position: relative;
-    background: $field;
-    transition:
-      background-color $duration-fast-01 motion(standard, productive),
-      outline $duration-fast-01 motion(standard, productive);
-  }
-
-  .#{$prefix}--form--fluid .#{$prefix}--label {
-    position: absolute;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    margin: 0;
-    block-size: convert.to-rem(16px);
-    inset-block-start: convert.to-rem(13px);
-    inset-inline-start: $spacing-05;
-  }
-
-  .#{$prefix}--form--fluid .#{$prefix}--form__helper-text {
-    display: none;
-  }
-
-  .#{$prefix}--form--fluid .#{$prefix}--text-input {
-    padding: convert.to-rem(32px) $spacing-05 convert.to-rem(13px);
-    min-block-size: convert.to-rem(64px);
-  }
-
-  .#{$prefix}--text-input__divider,
-  .#{$prefix}--form--fluid .#{$prefix}--text-input__divider {
-    display: none;
-  }
-
-  .#{$prefix}--form--fluid .#{$prefix}--text-input--invalid,
-  .#{$prefix}--form--fluid .#{$prefix}--text-input--warning {
-    border-block-end: none;
-  }
-
-  .#{$prefix}--form--fluid
-    .#{$prefix}--text-input--invalid
-    + .#{$prefix}--text-input__divider,
-  .#{$prefix}--form--fluid
-    .#{$prefix}--text-input--warning
-    + .#{$prefix}--text-input__divider {
-    display: block;
-    border-style: solid;
-    border-color: $border-subtle;
-    margin: 0 1rem;
-    border-block-end: none;
-  }
-
-  .#{$prefix}--form--fluid .#{$prefix}--text-input__invalid-icon {
-    inset-block-start: convert.to-rem(80px);
-  }
-
-  .#{$prefix}--form--fluid
-    .#{$prefix}--text-input__field-wrapper[data-invalid]
-    > .#{$prefix}--text-input--invalid,
-  .#{$prefix}--form--fluid
-    .#{$prefix}--text-input__field-wrapper--warning
-    > .#{$prefix}--text-input--warning {
-    outline: none;
-  }
-
-  .#{$prefix}--form--fluid .#{$prefix}--text-input__field-wrapper--warning {
-    border-block-end: 1px solid $border-strong;
-  }
-
-  .#{$prefix}--form--fluid
-    .#{$prefix}--text-input__field-wrapper[data-invalid]:not(:focus) {
-    @include focus-outline('invalid');
-  }
-
-  .#{$prefix}--form--fluid
-    .#{$prefix}--text-input__field-wrapper[data-invalid]:focus-within,
-  .#{$prefix}--form--fluid
-    .#{$prefix}--text-input__field-wrapper--warning:focus-within {
-    @include focus-outline('outline');
-  }
-
-  .#{$prefix}--form--fluid
-    .#{$prefix}--text-input__field-wrapper[data-invalid]
-    > .#{$prefix}--text-input--invalid:focus,
-  .#{$prefix}--form--fluid
-    .#{$prefix}--text-input__field-wrapper--warning
-    > .#{$prefix}--text-input--warning:focus {
-    outline: none;
-  }
-
   //-----------------------------
   // Inline Text Input
   //-----------------------------
@@ -418,6 +319,14 @@
     border-block-end-color: $border-subtle;
   }
 
+  @if enabled('enable-v12-release') {
+    .#{$prefix}--text-input-wrapper--readonly .#{$prefix}--text-input,
+    .#{$prefix}--text-input-wrapper--readonly
+      .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger {
+      border-radius: $border-radius-00;
+    }
+  }
+
   // Styles for AILabel rendered inside TextInput
   .#{$prefix}--text-input__field-wrapper--decorator
     .#{$prefix}--text-input__field-inner-wrapper--decorator
@@ -449,6 +358,29 @@
       :has(~ .#{$prefix}--slug--revert)
     ) {
     @include ai-gradient;
+
+    @if enabled('enable-v12-release') {
+      // Reset the bottom-edge color override from @include ai-gradient so the
+      // border-box gradient layer controls all four sides uniformly.
+      background:
+        linear-gradient(
+            0deg,
+            $ai-aura-start-sm 0%,
+            15%,
+            $ai-aura-end 50%,
+            transparent 100%
+          )
+          padding-box,
+        linear-gradient($field, $field) padding-box,
+        // (ai-border-start → ai-border-end), mirroring the default v12 border gradient
+        linear-gradient(
+            to bottom,
+            $ai-border-start calc(100% - 4px),
+            $ai-border-strong 100%
+          )
+          border-box;
+      border-block-end-color: transparent;
+    }
   }
   .#{$prefix}--text-input__field-wrapper--decorator
     .#{$prefix}--text-input:not(.#{$prefix}--text-input--invalid):not(

package/scss/components/tile/_tile.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2023
+// Copyright IBM Corp. 2016, 2026
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -388,8 +388,27 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     fill: $icon-disabled;
   }
 
+  .#{$prefix}--clickable-tile__wrapper,
+  .#{$prefix}--selectable-tile__wrapper--decorator,
+  .#{$prefix}--selectable-tile__wrapper--slug,
+  .#{$prefix}--radio-tile__wrapper--decorator,
+  .#{$prefix}--radio-tile__wrapper--slug {
+    position: relative;
+  }
+
   // AILabel styles
   .#{$prefix}--tile > .#{$prefix}--tile--inner-decorator > *,
+  .#{$prefix}--clickable-tile__wrapper > .#{$prefix}--tile--inner-decorator > *,
+  .#{$prefix}--selectable-tile__wrapper--decorator
+    > .#{$prefix}--tile--inner-decorator
+    > *,
+  .#{$prefix}--selectable-tile__wrapper--slug > .#{$prefix}--ai-label,
+  .#{$prefix}--selectable-tile__wrapper--slug > .#{$prefix}--slug,
+  .#{$prefix}--radio-tile__wrapper--decorator
+    > .#{$prefix}--tile--inner-decorator
+    > *,
+  .#{$prefix}--radio-tile__wrapper--slug > .#{$prefix}--ai-label,
+  .#{$prefix}--radio-tile__wrapper--slug > .#{$prefix}--slug,
   .#{$prefix}--tile--expandable > div > .#{$prefix}--tile--inner-decorator > *,
   .#{$prefix}--tile > .#{$prefix}--ai-label,
   .#{$prefix}--tile--expandable > div > .#{$prefix}--ai-label,
@@ -404,18 +423,48 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile.#{$prefix}--tile--selectable
     > .#{$prefix}--tile--inner-decorator
     > *,
+  .#{$prefix}--selectable-tile__wrapper--decorator
+    > .#{$prefix}--tile.#{$prefix}--tile--selectable
+    + .#{$prefix}--tile--inner-decorator
+    > *,
+  .#{$prefix}--radio-tile__wrapper--decorator
+    > .#{$prefix}--tile.#{$prefix}--tile--selectable
+    + .#{$prefix}--tile--inner-decorator
+    > *,
   .#{$prefix}--tile.#{$prefix}--tile--selectable > .#{$prefix}--ai-label,
-  .#{$prefix}--tile.#{$prefix}--tile--selectable > .#{$prefix}--slug {
+  .#{$prefix}--tile.#{$prefix}--tile--selectable > .#{$prefix}--slug,
+  .#{$prefix}--selectable-tile__wrapper--slug
+    > .#{$prefix}--tile.#{$prefix}--tile--selectable
+    + .#{$prefix}--ai-label,
+  .#{$prefix}--selectable-tile__wrapper--slug
+    > .#{$prefix}--tile.#{$prefix}--tile--selectable
+    + .#{$prefix}--slug,
+  .#{$prefix}--radio-tile__wrapper--slug
+    > .#{$prefix}--tile.#{$prefix}--tile--selectable
+    + .#{$prefix}--ai-label,
+  .#{$prefix}--radio-tile__wrapper--slug
+    > .#{$prefix}--tile.#{$prefix}--tile--selectable
+    + .#{$prefix}--slug {
     inset-inline-end: $spacing-08;
   }
 
   .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio
     > .#{$prefix}--tile--inner-decorator
     > *,
+  .#{$prefix}--radio-tile__wrapper--decorator
+    > .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio
+    + .#{$prefix}--tile--inner-decorator
+    > *,
   .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio
     > .#{$prefix}--ai-label,
   .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio
-    > .#{$prefix}--slug {
+    > .#{$prefix}--slug,
+  .#{$prefix}--radio-tile__wrapper--slug
+    > .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio
+    + .#{$prefix}--ai-label,
+  .#{$prefix}--radio-tile__wrapper--slug
+    > .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio
+    + .#{$prefix}--slug {
     inset-inline-end: $spacing-05;
     transition: inset-inline-end $duration-fast-02 motion(standard, productive);
 
@@ -431,25 +480,39 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio.#{$prefix}--tile--is-selected
     > .#{$prefix}--tile--inner-decorator
     > *,
+  .#{$prefix}--radio-tile__wrapper--decorator
+    > .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio.#{$prefix}--tile--is-selected
+    + .#{$prefix}--tile--inner-decorator
+    > *,
   .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio.#{$prefix}--tile--is-selected
     > .#{$prefix}--ai-label,
   .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio.#{$prefix}--tile--is-selected
-    > .#{$prefix}--slug {
+    > .#{$prefix}--slug,
+  .#{$prefix}--radio-tile__wrapper--slug
+    > .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio.#{$prefix}--tile--is-selected
+    + .#{$prefix}--ai-label,
+  .#{$prefix}--radio-tile__wrapper--slug
+    > .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio.#{$prefix}--tile--is-selected
+    + .#{$prefix}--slug {
     inset-inline-end: $spacing-08;
   }
 
-  .#{$prefix}--tile.#{$prefix}--tile--clickable
-    > .#{$prefix}--tile--inner-decorator
-    > *,
-  .#{$prefix}--tile.#{$prefix}--tile--clickable > .#{$prefix}--ai-label,
-  .#{$prefix}--tile.#{$prefix}--tile--clickable > .#{$prefix}--slug {
-    pointer-events: none;
-  }
-
   .#{$prefix}--tile--decorator:has(
       .#{$prefix}--tile--ai-label-icon
     ).#{$prefix}--tile,
   .#{$prefix}--tile--decorator:has(.#{$prefix}--ai-label).#{$prefix}--tile,
+  .#{$prefix}--clickable-tile__wrapper
+    > .#{$prefix}--tile--decorator:has(
+      + .#{$prefix}--tile--inner-decorator .#{$prefix}--ai-label
+    ).#{$prefix}--tile,
+  .#{$prefix}--selectable-tile__wrapper--decorator
+    > .#{$prefix}--tile--decorator:has(
+      + .#{$prefix}--tile--inner-decorator .#{$prefix}--ai-label
+    ).#{$prefix}--tile,
+  .#{$prefix}--radio-tile__wrapper--decorator
+    > .#{$prefix}--tile--decorator:has(
+      + .#{$prefix}--tile--inner-decorator .#{$prefix}--ai-label
+    ).#{$prefix}--tile,
   .#{$prefix}--tile--slug.#{$prefix}--tile {
     @include ai-popover-gradient('default', 0, 'layer');
 
@@ -486,9 +549,21 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--decorator:has(
       .#{$prefix}--ai-label
     ).#{$prefix}--tile--selectable::before,
+  .#{$prefix}--selectable-tile__wrapper--decorator
+    > .#{$prefix}--tile--decorator:has(
+      + .#{$prefix}--tile--inner-decorator .#{$prefix}--ai-label
+    ).#{$prefix}--tile--selectable::before,
+  .#{$prefix}--radio-tile__wrapper--decorator
+    > .#{$prefix}--tile--decorator:has(
+      + .#{$prefix}--tile--inner-decorator .#{$prefix}--ai-label
+    ).#{$prefix}--tile--selectable::before,
   .#{$prefix}--tile--decorator:has(
       .#{$prefix}--ai-label
     ).#{$prefix}--tile--clickable::before,
+  .#{$prefix}--clickable-tile__wrapper
+    > .#{$prefix}--tile--decorator:has(
+      + .#{$prefix}--tile--inner-decorator .#{$prefix}--ai-label
+    ).#{$prefix}--tile--clickable::before,
   .#{$prefix}--tile--decorator:has(
       .#{$prefix}--tile--ai-label-icon
     ).#{$prefix}--tile--clickable::before,
@@ -520,6 +595,14 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--decorator:has(
       .#{$prefix}--tile--inner-decorator .#{$prefix}--ai-label
     ).#{$prefix}--tile--selectable::after,
+  .#{$prefix}--selectable-tile__wrapper--decorator
+    > .#{$prefix}--tile--decorator:has(
+      + .#{$prefix}--tile--inner-decorator .#{$prefix}--ai-label
+    ).#{$prefix}--tile--selectable::after,
+  .#{$prefix}--radio-tile__wrapper--decorator
+    > .#{$prefix}--tile--decorator:has(
+      + .#{$prefix}--tile--inner-decorator .#{$prefix}--ai-label
+    ).#{$prefix}--tile--selectable::after,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after {
     @include ai-popover-gradient('selected', 0, 'layer');
 
@@ -541,6 +624,14 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--decorator:has(
       .#{$prefix}--tile--inner-decorator
     ).#{$prefix}--tile--is-selected,
+  .#{$prefix}--selectable-tile__wrapper--decorator
+    > .#{$prefix}--tile--decorator:has(
+      + .#{$prefix}--tile--inner-decorator
+    ).#{$prefix}--tile.#{$prefix}--tile--is-selected,
+  .#{$prefix}--radio-tile__wrapper--decorator
+    > .#{$prefix}--tile--decorator:has(
+      + .#{$prefix}--tile--inner-decorator
+    ).#{$prefix}--tile.#{$prefix}--tile--is-selected,
   .#{$prefix}--tile--slug.#{$prefix}--tile--is-selected {
     border-color: $border-inverse;
   }
@@ -561,6 +652,10 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     .#{$prefix}--tile-content,
   .#{$prefix}--tile--decorator.#{$prefix}--tile--clickable
     .#{$prefix}--tile-content,
+  .#{$prefix}--clickable-tile__wrapper > .#{$prefix}--tile--inner-decorator > *,
+  .#{$prefix}--selectable-tile__wrapper--decorator
+    > .#{$prefix}--tile--inner-decorator
+    > *,
   .#{$prefix}--tile--decorator.#{$prefix}--tile--selectable
     > .#{$prefix}--tile__checkmark,
   .#{$prefix}--tile--decorator.#{$prefix}--tile--is-selected
@@ -579,20 +674,43 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--decorator.#{$prefix}--tile--selectable
     .#{$prefix}--tile--inner-decorator
     > *:has(> .#{$prefix}--popover--open),
+  .#{$prefix}--clickable-tile__wrapper
+    > .#{$prefix}--tile--inner-decorator
+    > *:has(> .#{$prefix}--popover--open),
+  .#{$prefix}--selectable-tile__wrapper--decorator
+    > .#{$prefix}--tile--inner-decorator
+    > *:has(> .#{$prefix}--popover--open),
+  .#{$prefix}--radio-tile__wrapper--decorator
+    > .#{$prefix}--tile--inner-decorator
+    > *:has(> .#{$prefix}--popover--open),
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
     .#{$prefix}--ai-label:has(> .#{$prefix}--popover--open),
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
-    .#{$prefix}--slug:has(> .#{$prefix}--popover--open) {
+    .#{$prefix}--slug:has(> .#{$prefix}--popover--open),
+  .#{$prefix}--selectable-tile__wrapper--slug
+    > .#{$prefix}--ai-label:has(> .#{$prefix}--popover--open),
+  .#{$prefix}--selectable-tile__wrapper--slug
+    > .#{$prefix}--slug:has(> .#{$prefix}--popover--open) {
     z-index: 2;
   }
 
   .#{$prefix}--tile--decorator.#{$prefix}--tile--selectable
     > .#{$prefix}--tile--inner-decorator
     > *,
+  .#{$prefix}--selectable-tile__wrapper--decorator
+    > .#{$prefix}--tile--inner-decorator
+    > *,
+  .#{$prefix}--radio-tile__wrapper--decorator
+    > .#{$prefix}--tile--inner-decorator
+    > *,
   .#{$prefix}--tile--decorator.#{$prefix}--tile--selectable
     > .#{$prefix}--tile__checkmark,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable > .#{$prefix}--ai-label,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable > .#{$prefix}--slug,
+  .#{$prefix}--selectable-tile__wrapper--slug > .#{$prefix}--ai-label,
+  .#{$prefix}--selectable-tile__wrapper--slug > .#{$prefix}--slug,
+  .#{$prefix}--radio-tile__wrapper--slug > .#{$prefix}--ai-label,
+  .#{$prefix}--radio-tile__wrapper--slug > .#{$prefix}--slug,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
     > .#{$prefix}--tile__checkmark {
     z-index: 1;

package/scss/utilities/_skeleton.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021
+// Copyright IBM Corp. 2021, 2026
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -8,6 +8,7 @@
 @use 'keyframes';
 @use '../theme' as *;
 @use '../config' as *;
+@use '../feature-flags' as *;
 @use '../utilities/high-contrast-mode' as *;
 
 /// Skeleton loading animation
@@ -22,6 +23,11 @@
   box-shadow: none;
   pointer-events: none;
 
+  @if enabled('enable-v12-release') {
+    overflow: hidden;
+    border-radius: 4px;
+  }
+
   &:hover,
   &:focus,
   &:active {