carbon-components-svelte 0.107.1 → 0.108.0

package/css/_breadcrumb.scss

@@ -0,0 +1,46 @@
+@import "carbon-components/scss/globals/scss/vars";
+@import "carbon-components/scss/globals/scss/helper-mixins";
+@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
+@import "carbon-components/scss/globals/scss/typography";
+
+/// Small breadcrumb variant (Carbon React `size="sm"` parity)
+/// @access private
+/// @group components
+@mixin breadcrumb-sm {
+  .#{$prefix}--breadcrumb--sm {
+    @include type-style('label-01');
+  }
+
+  .#{$prefix}--breadcrumb--sm .#{$prefix}--link {
+    font: inherit;
+  }
+
+  .#{$prefix}--breadcrumb--sm .#{$prefix}--breadcrumb-item {
+    margin-right: $carbon--spacing-02;
+  }
+
+  .#{$prefix}--breadcrumb--sm .#{$prefix}--breadcrumb-item .#{$prefix}--link {
+    justify-content: center;
+    min-width: $carbon--spacing-04;
+  }
+
+  .#{$prefix}--breadcrumb--sm .#{$prefix}--breadcrumb-item::after {
+    margin-left: $carbon--spacing-02;
+  }
+
+  .#{$prefix}--breadcrumb--sm
+    .#{$prefix}--breadcrumb-item
+    .#{$prefix}--overflow-menu {
+    width: $carbon--spacing-05;
+    height: $carbon--spacing-05;
+    min-height: $carbon--spacing-05;
+
+    .#{$prefix}--overflow-menu__icon {
+      transform: translateY(3px);
+    }
+  }
+}
+
+@include exports('breadcrumb-sm') {
+  @include breadcrumb-sm;
+}

package/css/_combobox-readonly.scss

@@ -0,0 +1,37 @@
+// This file backports readonly combo-box styles from carbon-components v11+
+// to ensure compatibility with carbon-components v10.58.12.
+
+@import "carbon-components/scss/globals/scss/vars";
+@import "carbon-components/scss/globals/scss/helper-mixins";
+@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
+
+/// Readonly combobox styles
+/// @access private
+/// @group combobox
+@mixin combobox-readonly {
+  //----------------------------------------------
+  // Read-only
+  // ---------------------------------------------
+  .#{$prefix}--list-box.#{$prefix}--combo-box--readonly,
+  .#{$prefix}--list-box.#{$prefix}--combo-box--readonly:hover {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--combo-box--readonly .#{$prefix}--text-input {
+    border-block-end-color: $border-subtle;
+  }
+
+  .#{$prefix}--combo-box--readonly .#{$prefix}--list-box__menu-icon,
+  .#{$prefix}--combo-box--readonly .#{$prefix}--list-box__selection {
+    cursor: default;
+  }
+
+  .#{$prefix}--combo-box--readonly .#{$prefix}--list-box__menu-icon svg,
+  .#{$prefix}--combo-box--readonly .#{$prefix}--list-box__selection svg {
+    fill: $icon-disabled;
+  }
+}
+
+@include exports("combobox-readonly") {
+  @include combobox-readonly;
+}

package/css/_copy-button-portal.scss

@@ -0,0 +1,20 @@
+// Hide Carbon's `::before` feedback caret when using a portalled tooltip.
+// `_tooltip.scss` loads before `carbon-components/.../styles`, so Carbon's
+// `.bx--copy-btn.bx--copy-btn--animating::before { display: block }` was
+// winning over `.bx--copy-btn--portal-active::before { display: none }`.
+
+@import "carbon-components/scss/globals/scss/vars";
+@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
+
+@mixin copy-button-portal {
+  .#{$prefix}--copy-btn.#{$prefix}--copy-btn--portal-active.#{$prefix}--copy-btn--animating::before,
+  .#{$prefix}--copy-btn.#{$prefix}--copy-btn--portal-active .#{$prefix}--copy-btn__feedback,
+  .#{$prefix}--copy-btn.#{$prefix}--copy-btn--portal-active.#{$prefix}--copy-btn--animating
+    .#{$prefix}--copy-btn__feedback {
+    display: none;
+  }
+}
+
+@include exports("copy-button-portal") {
+  @include copy-button-portal;
+}

package/css/_datepicker.scss

@@ -0,0 +1,68 @@
+@import "carbon-components/scss/globals/scss/vars";
+@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
+
+@mixin date-picker-input-wrapper {
+  .#{$prefix}--date-picker-input__wrapper {
+    width: fit-content;
+  }
+}
+
+@include exports('datepicker-input-wrapper') {
+  @include date-picker-input-wrapper;
+}
+
+// Backports readonly date picker styles from carbon-components v11+ to
+// carbon-components v10.58.12.
+
+@mixin date-picker-readonly {
+  .#{$prefix}--date-picker__input[readonly] {
+    background: transparent;
+    border-bottom-color: $disabled-02;
+    cursor: text;
+  }
+
+  // Use a wrapper-level class because flatpickr injects a `.flatpickr-wrapper`
+  // around the first input in `static` mode, which breaks the `~` sibling
+  // combinator from the input to the icon.
+  .#{$prefix}--date-picker-input__wrapper--readonly .#{$prefix}--date-picker__icon {
+    fill: $disabled-02;
+  }
+}
+
+@include exports('datepicker-readonly') {
+  @include date-picker-readonly;
+}
+
+// Carbon's `:disabled ~ .icon` rule fails for the same reason the readonly
+// fix above is needed: flatpickr's `.flatpickr-wrapper` breaks the sibling
+// combinator. Match it via the wrapper class instead.
+@mixin date-picker-disabled {
+  .#{$prefix}--date-picker-input__wrapper--disabled .#{$prefix}--date-picker__icon {
+    cursor: not-allowed;
+    fill: $icon-disabled;
+  }
+}
+
+@include exports('datepicker-disabled') {
+  @include date-picker-disabled;
+}
+
+// Flatpickr 4.6+ applies `.flatpickr-disabled` to the prev/next month nav
+// buttons when navigation is bounded by `minDate`/`maxDate`. Carbon only styles
+// the legacy `.disabled` class.
+@mixin date-picker-month-nav-disabled {
+  .flatpickr-prev-month.flatpickr-disabled,
+  .flatpickr-next-month.flatpickr-disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .flatpickr-prev-month.flatpickr-disabled svg,
+  .flatpickr-next-month.flatpickr-disabled svg {
+    fill: $icon-disabled;
+  }
+}
+
+@include exports('datepicker-month-nav-disabled') {
+  @include date-picker-month-nav-disabled;
+}

package/css/_dropdown-readonly.scss

@@ -0,0 +1,37 @@
+// This file backports readonly dropdown styles from carbon-components v11+
+// to ensure compatibility with carbon-components v10.58.12.
+
+@import "carbon-components/scss/globals/scss/vars";
+@import "carbon-components/scss/globals/scss/helper-mixins";
+@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
+
+/// Readonly dropdown styles
+/// @access private
+/// @group dropdown
+@mixin dropdown-readonly {
+  //----------------------------------------------
+  // Read-only
+  // ---------------------------------------------
+  .#{$prefix}--dropdown__wrapper .#{$prefix}--dropdown--readonly,
+  .#{$prefix}--dropdown__wrapper .#{$prefix}--dropdown--readonly:hover {
+    background-color: transparent;
+    border-block-end-color: $border-subtle;
+  }
+
+  .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--readonly {
+    border-block-end-color: transparent;
+  }
+
+  .#{$prefix}--dropdown--readonly .#{$prefix}--list-box__field,
+  .#{$prefix}--dropdown--readonly .#{$prefix}--list-box__menu-icon {
+    cursor: default;
+  }
+
+  .#{$prefix}--dropdown--readonly .#{$prefix}--list-box__menu-icon svg {
+    fill: $icon-disabled;
+  }
+}
+
+@include exports("dropdown-readonly") {
+  @include dropdown-readonly;
+}

package/css/_multiselect-readonly.scss

@@ -0,0 +1,57 @@
+// This file backports readonly multi-select styles from carbon-components v11+
+// to ensure compatibility with carbon-components v10.58.12.
+
+@import "carbon-components/scss/globals/scss/vars";
+@import "carbon-components/scss/globals/scss/helper-mixins";
+@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
+
+/// Readonly multiselect styles
+/// @access private
+/// @group multiselect
+@mixin multiselect-readonly {
+  //----------------------------------------------
+  // Read-only
+  // ---------------------------------------------
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly,
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly:hover {
+    background-color: transparent;
+    border-block-end-color: $border-subtle;
+  }
+
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
+    .#{$prefix}--list-box__menu-icon
+    svg {
+    fill: $icon-disabled;
+  }
+
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
+    .#{$prefix}--tag--filter,
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
+    .#{$prefix}--tag__close-icon:hover {
+    background-color: transparent;
+    color: $text-primary;
+    cursor: default;
+  }
+
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
+    .#{$prefix}--tag--filter {
+    box-shadow: 0 0 0 1px $border-subtle;
+  }
+
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
+    .#{$prefix}--tag--filter
+    svg {
+    fill: $icon-disabled;
+  }
+
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
+    .#{$prefix}--list-box__field,
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
+    .#{$prefix}--list-box__menu-icon {
+    cursor: default;
+  }
+}
+
+@include exports("multiselect-readonly") {
+  @include multiselect-readonly;
+}

package/css/_overflow-menu.scss

@@ -0,0 +1,25 @@
+@import "carbon-components/scss/globals/scss/vars";
+@import "carbon-components/scss/globals/scss/helper-mixins";
+@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
+
+@mixin overflow-menu-disabled {
+  .#{$prefix}--overflow-menu:disabled,
+  .#{$prefix}--overflow-menu:disabled:hover {
+    background-color: transparent;
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--overflow-menu:disabled .#{$prefix}--overflow-menu__icon,
+  .#{$prefix}--overflow-menu:disabled:hover .#{$prefix}--overflow-menu__icon {
+    fill: $disabled-02;
+  }
+
+  .#{$prefix}--overflow-menu:disabled::after,
+  .#{$prefix}--overflow-menu:disabled:hover::after {
+    opacity: 0;
+  }
+}
+
+@include exports('overflow-menu-disabled') {
+  @include overflow-menu-disabled;
+}

package/css/_radiobutton-readonly.scss

@@ -0,0 +1,35 @@
+// This file backports readonly radio-button styles from carbon-components v11+
+// to ensure compatibility with carbon-components v10.58.12.
+
+@import "carbon-components/scss/globals/scss/vars";
+@import "carbon-components/scss/globals/scss/helper-mixins";
+@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
+
+/// Readonly radiobutton styles
+/// @access private
+/// @group radiobutton
+@mixin radiobutton-readonly {
+  //----------------------------------------------
+  // Read-only
+  // ---------------------------------------------
+  .#{$prefix}--radio-button-group--readonly
+    .#{$prefix}--radio-button
+    + .#{$prefix}--radio-button__label
+    .#{$prefix}--radio-button__appearance {
+    border-color: $icon-disabled;
+  }
+
+  .#{$prefix}--radio-button-group--readonly .#{$prefix}--radio-button__label {
+    cursor: default;
+  }
+
+  .#{$prefix}--radio-button-group--readonly
+    .#{$prefix}--radio-button__label-text {
+    cursor: text;
+    user-select: text;
+  }
+}
+
+@include exports("radiobutton-readonly") {
+  @include radiobutton-readonly;
+}

package/css/_select-readonly.scss

@@ -0,0 +1,42 @@
+// This file backports readonly select styles from carbon-components v11+
+// to ensure compatibility with carbon-components v10.58.12.
+
+@import "carbon-components/scss/globals/scss/vars";
+@import "carbon-components/scss/globals/scss/helper-mixins";
+@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
+
+/// Readonly select styles
+/// @access private
+/// @group select
+@mixin select-readonly {
+  //----------------------------------------------
+  // Read-only
+  // ---------------------------------------------
+  .#{$prefix}--select--readonly .#{$prefix}--select-input {
+    background-color: transparent;
+    border-block-end-color: $border-subtle;
+    cursor: default;
+  }
+
+  .#{$prefix}--select--readonly .#{$prefix}--select-input:hover {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--select--readonly .#{$prefix}--select__arrow {
+    fill: $icon-disabled;
+  }
+
+  .#{$prefix}--select--readonly.#{$prefix}--select--inline
+    .#{$prefix}--select-input:hover {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--select--readonly.#{$prefix}--select--light
+    .#{$prefix}--select-input:hover {
+    background-color: transparent;
+  }
+}
+
+@include exports("select-readonly") {
+  @include select-readonly;
+}

package/css/_slider.scss

@@ -80,6 +80,161 @@
   }
 }
 
+/// Two-handle (range) slider styles (Carbon v11 port for v10 compatibility)
+/// @access private
+/// @group slider
+@mixin slider-two-handle {
+  .#{$prefix}--slider-container--two-handles {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .#{$prefix}--slider-container--two-handles .#{$prefix}--slider {
+    margin-left: 4px;
+    margin-right: 4px;
+  }
+
+  .#{$prefix}--slider-text-input-wrapper--hidden {
+    display: none;
+  }
+
+  // Thumb wrapper — positions each handle along the track.
+  .#{$prefix}--slider__thumb-wrapper {
+    position: absolute;
+    z-index: 3;
+    height: 24px;
+    width: 16px;
+    transform: translate(-50%, -50%);
+    top: 50%;
+  }
+
+  .#{$prefix}--slider__thumb-wrapper--lower {
+    transform: translate(-100%, -50%);
+  }
+
+  .#{$prefix}--slider__thumb-wrapper--upper {
+    transform: translate(0, -50%);
+  }
+
+  // Override the round single-handle thumb when in two-handle mode.
+  // Chain `.bx--slider__thumb` to win specificity over the v10 base styles,
+  // which are imported after this file in `all.scss`.
+  .#{$prefix}--slider__thumb.#{$prefix}--slider__thumb--lower,
+  .#{$prefix}--slider__thumb.#{$prefix}--slider__thumb--upper {
+    position: absolute;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    // Reset the v10 single-handle `translate(-50%, -50%)` that would otherwise
+    // pull the arrow icon up/left off the track at rest.
+    transform: none;
+    transition: none;
+
+    &::before {
+      position: absolute;
+      z-index: -1;
+      display: block;
+      background: $ui-background;
+      height: 2px;
+      content: "";
+      width: 6px;
+      top: calc(50% - 1px);
+    }
+
+    &:hover {
+      background: transparent;
+      box-shadow: none;
+      transform: none;
+
+      // Only recolor the non-focus icon; the focus-state icon must keep its
+      // $interactive-01 fill even when the focused thumb is hovered.
+      .#{$prefix}--slider__thumb-icon:not(.#{$prefix}--slider__thumb-icon--focus) {
+        fill: $text-02;
+      }
+    }
+
+    &:active {
+      background: transparent;
+      box-shadow: none;
+      transform: none;
+    }
+
+    &:focus {
+      background: transparent;
+      box-shadow: none;
+      transform: none;
+      outline: none;
+
+      .#{$prefix}--slider__thumb-icon:not(.#{$prefix}--slider__thumb-icon--focus) {
+        display: none;
+      }
+
+      .#{$prefix}--slider__thumb-icon--focus {
+        display: block;
+      }
+    }
+  }
+
+  .#{$prefix}--slider__thumb.#{$prefix}--slider__thumb--lower::before {
+    right: 0;
+  }
+
+  .#{$prefix}--slider__thumb.#{$prefix}--slider__thumb--upper::before {
+    left: 0;
+  }
+
+  .#{$prefix}--slider__thumb.#{$prefix}--slider__thumb--lower:focus::before,
+  .#{$prefix}--slider__thumb.#{$prefix}--slider__thumb--upper:focus::before {
+    width: 100%;
+  }
+
+  .#{$prefix}--slider__thumb-icon {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    // $ui-05 is the highest-contrast UI color in v10 (dark on light themes,
+    // light on dark themes); equivalent to v11's $layer-selected-inverse used
+    // by Carbon React for the range-slider arrow handles.
+    fill: $ui-05;
+  }
+
+  .#{$prefix}--slider__thumb-icon--focus {
+    display: none;
+    fill: $interactive-01;
+  }
+
+  // When either handle is focused, recolor the filled track.
+  .#{$prefix}--slider__thumb-wrapper:focus-within
+    ~ .#{$prefix}--slider__filled-track {
+    background-color: $interactive-04;
+  }
+
+  // Disabled state for the two-handle thumb icons.
+  .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb.#{$prefix}--slider__thumb--lower,
+  .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb.#{$prefix}--slider__thumb--upper {
+    background: transparent;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background: transparent;
+      transform: none;
+    }
+
+    .#{$prefix}--slider__thumb-icon {
+      fill: $disabled-02;
+    }
+  }
+}
+
 @include exports('slider-validation') {
   @include slider-validation;
+  @include slider-two-handle;
 }

package/css/_text-area-readonly.scss

@@ -0,0 +1,23 @@
+// This file backports readonly textarea styles from carbon-components v11+
+// to ensure compatibility with carbon-components v10.58.12.
+
+@import "carbon-components/scss/globals/scss/vars";
+@import "carbon-components/scss/globals/scss/helper-mixins";
+@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
+
+/// Readonly textarea styles
+/// @access private
+/// @group text-area
+@mixin text-area-readonly {
+  //----------------------------------------------
+  // Read-only
+  // ---------------------------------------------
+  .#{$prefix}--text-area__wrapper--readonly .#{$prefix}--text-area {
+    background: transparent;
+    border-block-end-color: $border-subtle;
+  }
+}
+
+@include exports("text-area-readonly") {
+  @include text-area-readonly;
+}

package/css/_time-picker.scss

@@ -0,0 +1,60 @@
+@import "carbon-components/scss/globals/scss/vars";
+@import "carbon-components/scss/globals/scss/helper-mixins";
+@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
+
+// Widen the time picker input when invalid or warn icon is rendered,
+// matching upstream Carbon React's `.cds--time-picker__input-field-error`.
+// Also reveal the sibling form-requirement for the warn state, since
+// carbon-components v10 only ships display rules for `--invalid`.
+@mixin time-picker-error-width {
+  .#{$prefix}--time-picker__input-field.#{$prefix}--text-input--invalid,
+  .#{$prefix}--time-picker__input-field.#{$prefix}--text-input--warning {
+    inline-size: 6.175rem;
+  }
+
+  .#{$prefix}--time-picker--warn ~ .#{$prefix}--form-requirement {
+    display: block;
+    overflow: visible;
+    max-height: to-rem(200px);
+    font-weight: 400;
+  }
+}
+
+@include exports('time-picker-error-width') {
+  @include time-picker-error-width;
+}
+
+/// Readonly time picker styles (backported from carbon-components v11+ for v10)
+/// @access private
+/// @group time-picker
+@mixin time-picker-readonly {
+  .#{$prefix}--time-picker--readonly .#{$prefix}--time-picker__input-field[readonly] {
+    background: transparent;
+    border-bottom-color: $disabled-02;
+    cursor: text;
+  }
+
+  // The chevron in `TimePickerSelect` is purely decorative when the time
+  // picker is read-only. The native `<select>` remains focusable so the value
+  // is announced, but the menu is suppressed via mousedown/keydown handlers.
+  // Apply the same styling whether readonly is set on the parent `TimePicker`
+  // or directly on a `TimePickerSelect` (for standalone use).
+  .#{$prefix}--time-picker--readonly .#{$prefix}--select-input,
+  .#{$prefix}--time-picker__select.#{$prefix}--select--readonly .#{$prefix}--select-input {
+    border-bottom-color: $disabled-02;
+    cursor: default;
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+  .#{$prefix}--time-picker--readonly .#{$prefix}--select__arrow,
+  .#{$prefix}--time-picker__select.#{$prefix}--select--readonly .#{$prefix}--select__arrow {
+    fill: $disabled-02;
+  }
+}
+
+@include exports('time-picker-readonly') {
+  @include time-picker-readonly;
+}

package/css/_toggle-readonly.scss

@@ -0,0 +1,58 @@
+// This file backports readonly toggle styles from carbon-components v11+
+// to ensure compatibility with carbon-components v10.58.12.
+
+@import "carbon-components/scss/globals/scss/vars";
+@import "carbon-components/scss/globals/scss/helper-mixins";
+@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
+
+/// Readonly toggle styles
+/// @access private
+/// @group toggle
+@mixin toggle-readonly {
+  //----------------------------------------------
+  // Read-only
+  // ---------------------------------------------
+  .#{$prefix}--toggle--readonly .#{$prefix}--toggle-input__label,
+  .#{$prefix}--toggle--readonly
+    .#{$prefix}--toggle-input__label
+    > .#{$prefix}--toggle__switch,
+  .#{$prefix}--toggle--readonly
+    .#{$prefix}--toggle-input__label
+    > .#{$prefix}--toggle__switch::before,
+  .#{$prefix}--toggle--readonly
+    .#{$prefix}--toggle-input__label
+    > .#{$prefix}--toggle__switch::after {
+    cursor: default;
+  }
+
+  .#{$prefix}--toggle--readonly
+    .#{$prefix}--toggle-input__label
+    > .#{$prefix}--toggle__switch::before {
+    border: 1px solid $icon-disabled;
+    background-color: transparent;
+  }
+
+  .#{$prefix}--toggle--readonly
+    .#{$prefix}--toggle-input__label
+    > .#{$prefix}--toggle__switch::after {
+    background-color: $icon-primary;
+  }
+
+  .#{$prefix}--toggle--readonly
+    .#{$prefix}--toggle-input:checked
+    + .#{$prefix}--toggle-input__label
+    > .#{$prefix}--toggle__switch::before {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--toggle--readonly
+    .#{$prefix}--toggle-input:checked
+    + .#{$prefix}--toggle-input__label
+    > .#{$prefix}--toggle__switch::after {
+    background-color: $icon-primary;
+  }
+}
+
+@include exports("toggle-readonly") {
+  @include toggle-readonly;
+}

package/css/_tooltip.scss

@@ -102,11 +102,6 @@
     border-left: 0.3125rem solid $inverse-02;
   }
 
-  .#{$prefix}--copy-btn--portal-active::before,
-  .#{$prefix}--copy-btn--portal-active .#{$prefix}--copy-btn__feedback {
-    display: none;
-  }
-
   .#{$prefix}--tooltip-portal__content {
     display: flex;
     align-items: center;