@carbon/ibm-products-styles 2.76.0 → 2.77.0-rc.0

package/scss/components/Tearsheet/_tearsheet_next.scss

@@ -1,530 +0,0 @@
-/**
- * Copyright IBM Corp. 2025
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/colors' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/motion' as *;
-@use '@carbon/styles/scss/breakpoint' as *;
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/utilities';
-@use '../../global/styles/project-settings' as *;
-@use '../../global/styles/mixins' as *;
-
-$block-class__next: #{$pkg-prefix}--tearsheet__next;
-$motion-duration: $duration-moderate-02;
-
-/// Experimental tearsheet styles
-@include block-wrap($block-class__next) {
-  // ──────────────────────────────────────────────────────────────
-  // Container
-  // ──────────────────────────────────────────────────────────────
-  .#{$block-class__next}__container {
-    align-self: flex-end;
-    border: 1px solid $border-subtle-01;
-    block-size: 100%;
-    inset-block-start: auto;
-    max-block-size: calc(100% - var(--tearsheet-vertical-gap, #{$spacing-09}));
-  }
-  &:not(.#{$block-class__next}--stack-activated.is-visible) {
-    .#{$block-class__next}__container {
-      @include breakpoint-down(md) {
-        max-block-size: none;
-      }
-    }
-  }
-
-  &:not(.is-visible) {
-    &.#{$block-class__next}.#{$block-class__next}
-      .#{$block-class__next}__container {
-      transform: translate3d(0, calc(min(95vh, 500px)), 0);
-    }
-  }
-  &.#{$block-class__next}.#{$block-class__next}--has-ai-label {
-    .#{$block-class__next}__container {
-      border: 1px solid transparent;
-
-      /* override carbon ai removing background gradient */
-      background:
-        linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box,
-        linear-gradient(
-            to bottom,
-            var(--cds-ai-border-start, #78a9ff),
-            var(--cds-ai-border-end, #d0e2ff)
-          )
-          border-box,
-        linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
-      border-block-end: 0;
-      box-shadow: 0 4px 10px 2px $ai-drop-shadow;
-    }
-    .#{$block-class__next}__main-content {
-      position: relative;
-      @include utilities.ai-popover-gradient('default', 0, 'background');
-
-      box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
-    }
-  }
-
-  // Extra specificity to override Carbon default transition
-  &.#{$block-class__next}.#{$block-class__next}
-    .#{$block-class__next}__container {
-    transition:
-      transform $motion-duration motion(entrance, expressive),
-      max-block-size $motion-duration motion(entrance, expressive);
-  }
-
-  // Wide variant at medium breakpoint
-  @include breakpoint(md) {
-    &.#{$block-class__next}--wide .#{$block-class__next}__container {
-      inline-size: calc(100% - (2 * #{$spacing-10}));
-    }
-  }
-
-  // ──────────────────────────────────────────────────────────────
-  // Header
-  // ──────────────────────────────────────────────────────────────
-  .#{$block-class__next}__header {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: space-between;
-    border-block-end: 1px solid $border-subtle-01;
-    margin-block: 0;
-    max-block-size: 50vh;
-    padding-block-end: 0;
-    padding-block-start: $spacing-06;
-    padding-inline: $spacing-07;
-
-    > * {
-      flex-basis: 100%;
-    }
-    // change if carbon provide flexible close button
-    > *:not(
-        .#{$block-class__next}__navigation-bar,
-        .#{$block-class__next}__header-content-wrapper,
-        .#{$carbon-prefix}--modal-close-button
-      ) {
-      margin-block-end: $spacing-06;
-    }
-
-    @include breakpoint-down(md) {
-      padding-inline: $spacing-05;
-    }
-  }
-  .#{$carbon-prefix}--modal-container--sm .#{$carbon-prefix}--modal-header {
-    padding-inline-end: $spacing-07;
-  }
-
-  // ──────────────────────────────────────────────────────────────
-  // Header content wrapper (grid on desktop → flex on mobile)
-  // ──────────────────────────────────────────────────────────────
-  .#{$block-class__next}__header-content-wrapper {
-    display: grid;
-    flex-basis: unset;
-    gap: $spacing-05;
-    grid-template-columns: minmax(auto, 40rem) minmax(
-        var(--tearsheet-header-title-grid-width, 0),
-        1fr
-      );
-
-    inline-size: calc(100% - var(--tearsheet-header-action-offset));
-
-    @include breakpoint-down(md) {
-      display: flex;
-      flex-direction: column;
-    }
-  }
-
-  // Header content and actions
-  .#{$block-class__next}__header-content,
-  .#{$block-class__next}__header-actions {
-    margin-block-end: $spacing-06;
-  }
-
-  // Label, title, description styles
-  .#{$block-class__next}__header-label {
-    @include type.type-style('label-01');
-
-    color: $text-secondary;
-    margin-block-end: $spacing-02;
-  }
-
-  .#{$block-class__next}__header-title {
-    @include type.type-style('heading-04');
-
-    @include breakpoint-down(md) {
-      @include type.type-style('heading-03');
-    }
-
-    display: flex;
-    align-items: flex-start;
-    margin-block-end: $spacing-03;
-
-    svg {
-      flex-shrink: 0;
-    }
-    .#{$block-class__next}__title-start {
-      margin-inline-end: $spacing-05;
-    }
-    .#{$block-class__next}__title-end {
-      margin-inline-start: $spacing-05;
-    }
-  }
-
-  .#{$block-class__next}__header-description {
-    @include type.type-style('body-compact-01');
-  }
-
-  .#{$block-class__next}__header--no-close-icon {
-    display: none;
-  }
-
-  // ──────────────────────────────────────────────────────────────
-  // Navigation bar inside header
-  // ──────────────────────────────────────────────────────────────
-  .#{$block-class__next}__navigation-bar {
-    position: relative;
-    // margin: $spacing-04 0 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: $spacing-10;
-    max-inline-size: 100%;
-    min-block-size: $spacing-08;
-
-    .#{$block-class__next}__scroller-container {
-      position: absolute;
-      inset-block-end: $spacing-01;
-      inset-inline-end: calc(-#{$spacing-07} + #{$spacing-01});
-      @include breakpoint-down(md) {
-        inset-inline-end: -$spacing-05;
-      }
-
-      .#{$block-class__next}__scroller-button-icon-collapsed {
-        transform: rotate(-180deg);
-      }
-    }
-
-    .#{$carbon-prefix}--tabs {
-      margin-inline-start: -$spacing-05;
-    }
-  }
-
-  // ──────────────────────────────────────────────────────────────
-  // Header actions
-  // ──────────────────────────────────────────────────────────────
-  .#{$block-class__next}__header-actions {
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  .#{$block-class__next}__content__header-actions {
-    display: flex;
-    overflow: hidden;
-    flex: 0 0 auto;
-    align-items: center;
-    justify-content: flex-end;
-    block-size: $spacing-07;
-    inline-size: 100%;
-    margin-block-start: -14px;
-
-    > *.#{$block-class__next}__header-action-item:not([data-hidden='true']) {
-      margin-inline-end: $spacing-03; /* space between visible items */
-    }
-
-    /* Remove margin on the last visible item */
-    > *.#{$block-class__next}__header-action-item:not(
-        [data-hidden='true']
-      ):nth-last-child(2) {
-      margin-inline-end: 0;
-    }
-
-    > * {
-      flex-shrink: 0;
-    }
-    @include breakpoint-down(md) {
-      justify-content: flex-start;
-      margin-inline-end: 0;
-    }
-  }
-  &.#{$block-class__next}--narrow {
-    .#{$block-class__next}__header {
-      padding-inline: $spacing-05;
-    }
-    .#{$block-class__next}__header.#{$block-class__next}__header-collapsed {
-      .#{$block-class__next}__header-actions {
-        display: none;
-      }
-    }
-    .#{$block-class__next}__header-content-wrapper {
-      display: flex;
-      flex-direction: column;
-    }
-    .#{$block-class__next}__header-title {
-      @include type.type-style('heading-03');
-    }
-    .#{$block-class__next}__content__header-actions {
-      justify-content: flex-start;
-      margin-inline-end: 0;
-    }
-    .#{$block-class__next}__body {
-      grid-template-columns: 1fr 0;
-    }
-    .#{$block-class__next}__influencer,
-    .#{$block-class__next}__main-content,
-    .#{$block-class__next}__summary-content {
-      &:not(.#{$block-class__next}__flush) {
-        padding-inline: $spacing-05;
-      }
-    }
-  }
-  // ──────────────────────────────────────────────────────────────
-  // Header (default vs collapsed)
-  // ──────────────────────────────────────────────────────────────
-  .#{$block-class__next}__header {
-    // Animate all non-core visible elements
-    > *:not(
-        .#{$block-class__next}__navigation-bar,
-        .#{$block-class__next}__header-content-wrapper,
-        .#{$carbon-prefix}--modal-close-button,
-        .excludeFromCollapse
-      ) {
-      overflow: hidden;
-      max-block-size: 50vh; // large enough for expanded content
-      opacity: 1;
-      transition:
-        max-block-size $motion-duration motion(entrance, expressive),
-        opacity $motion-duration motion(entrance, expressive),
-        margin $motion-duration motion(entrance, expressive),
-        padding $motion-duration motion(entrance, expressive);
-    }
-
-    .#{$block-class__next}__header-actions,
-    .#{$block-class__next}__header-content-wrapper
-      .#{$block-class__next}__header-content
-      *:not(
-        .#{$block-class__next}__content__title-wrapper,
-        .#{$block-class__next}__header-label
-      ) {
-      opacity: 1;
-      transition:
-        all $motion-duration motion(entrance, expressive),
-        opacity $motion-duration motion(entrance, expressive);
-    }
-  }
-
-  // COLLAPSED STATE
-  .#{$block-class__next}__header-collapsed {
-    padding-block-start: $spacing-04;
-    transition: padding $motion-duration motion(entrance, expressive);
-
-    // Collapse everything except core elements
-    > *:not(
-        .#{$block-class__next}__navigation-bar,
-        .#{$block-class__next}__header-content-wrapper,
-        .#{$carbon-prefix}--modal-close-button,
-        .excludeFromCollapse
-      ),
-    .#{$block-class__next}__header-actions
-      > *:not(.#{$block-class__next}__content__header-actions),
-    .#{$block-class__next}__header-content
-      > *:not(.#{$block-class__next}__content__title-wrapper),
-    > *:not(
-        .#{$block-class__next}__navigation-bar,
-        .#{$block-class__next}__header-content-wrapper,
-        .#{$carbon-prefix}--modal-close-button,
-        .excludeFromCollapse
-      )
-      *,
-    .#{$block-class__next}__header-content-wrapper
-      .#{$block-class__next}__header-content
-      > *:not(.#{$block-class__next}__content__title-wrapper)
-      * {
-      overflow: hidden;
-      padding: 0;
-      margin: 0;
-      max-block-size: 0;
-      opacity: 0;
-      pointer-events: none;
-      transition: all $motion-duration motion(entrance, expressive);
-    }
-
-    // Header title
-    .#{$block-class__next}__header-title {
-      @include type.type-style('label-02');
-
-      align-items: center;
-      margin-block-start: $spacing-02;
-      transition: all $motion-duration motion(entrance, expressive);
-
-      > span {
-        display: flex;
-        align-items: center;
-        block-size: $spacing-06;
-      }
-    }
-
-    .#{$block-class__next}__header-content {
-      align-self: center;
-      margin-block-end: 0;
-    }
-
-    .#{$block-class__next}__content__header-actions {
-      margin-block-start: -$spacing-01;
-    }
-
-    // Hide header actions on small screens
-    @include breakpoint-down(md) {
-      .#{$block-class__next}__header-actions {
-        display: none;
-      }
-    }
-
-    // Normalize visible elements
-    .#{$block-class__next}__header-content-wrapper,
-    .#{$block-class__next}__header-content,
-    .#{$block-class__next}__content__title-wrapper,
-    .#{$block-class__next}__header-actions,
-    .#{$block-class__next}__header-title {
-      margin-block: 0;
-      transition: margin-block $motion-duration ease;
-    }
-
-    .#{$block-class__next}__header-content-wrapper {
-      min-block-size: $spacing-08;
-      padding-block-end: $spacing-04;
-    }
-
-    // Divider line above navigation bar
-    .#{$block-class__next}__navigation-bar::before {
-      position: absolute;
-      z-index: 1;
-      background: rgba(0, 0, 0, 0.12);
-      block-size: 1px;
-      content: '';
-      inline-size: 100vw;
-      inset-block-start: -$spacing-02;
-      inset-inline-start: 50%;
-      pointer-events: none;
-      transform: translateX(-50%);
-    }
-  }
-
-  // ──────────────────────────────────────────────────────────────
-  // Body layout grid
-  // ──────────────────────────────────────────────────────────────
-  .#{$block-class__next}__body-layout {
-    display: grid;
-    grid-template-areas:
-      'influencer body'
-      'influencer footer';
-    grid-template-columns:
-      var(--tearsheet-influencer-width, calc($spacing-10 * 4))
-      1fr;
-    grid-template-rows: 1fr auto;
-    padding-block: 0;
-    padding-inline-end: 0;
-
-    /* Redefine grid when influencer is absent */
-    &:not(:has(> .#{$block-class__next}__influencer)) {
-      grid-template-areas:
-        'body'
-        'footer';
-      grid-template-columns: 1fr;
-    }
-  }
-
-  /* Assign components to their named grid areas */
-  .#{$block-class__next}__influencer {
-    border-inline-end: 1px solid $border-subtle-01;
-    grid-area: influencer;
-  }
-
-  .#{$block-class__next}__body {
-    position: relative;
-    display: grid;
-    overflow: hidden;
-    grid-area: body;
-    grid-template-columns: 1fr var(
-        --tearsheet-summary-content-width,
-        calc($spacing-10 * 4)
-      );
-    @include breakpoint-down(md) {
-      grid-template-columns: 1fr 0;
-    }
-
-    > *:only-child {
-      grid-column: 1 / -1;
-    }
-  }
-
-  .#{$block-class__next}__footer {
-    border-block-start: 1px solid $border-subtle-01;
-    grid-area: footer;
-  }
-
-  .#{$block-class__next}__influencer,
-  .#{$block-class__next}__main-content,
-  .#{$block-class__next}__summary-content {
-    overflow: auto;
-    &:not(.#{$block-class__next}__flush) {
-      padding-inline: $spacing-07;
-      @include breakpoint-down(md) {
-        padding-inline: $spacing-05;
-      }
-    }
-  }
-
-  .#{$block-class__next}__main-content {
-    position: relative;
-  }
-  .#{$pkg-prefix}--side-panel {
-    position: absolute;
-    z-index: 9999;
-    block-size: 100%;
-    inline-size: 100%;
-    inset-block-start: 0;
-    max-inline-size: none;
-    .#{$pkg-prefix}--side-panel__header {
-      min-block-size: 0;
-    }
-  }
-
-  &.#{$block-class__next}--stack-activated.is-visible {
-    --overlay-color: #{$overlay};
-    --overlay-alpha: 0.5;
-
-    z-index: calc(#{utilities.z('modal')} - var(--stack-depth, 0));
-
-    background-color: initial;
-
-    &::before {
-      position: absolute;
-      display: block;
-      background: var(--overlay-color);
-      content: '';
-      inset: 0;
-      opacity: calc(var(--overlay-alpha) - var(--stack-depth) * 0.1);
-
-      transition:
-        background-color $motion-duration motion(exit, expressive),
-        opacity $motion-duration motion(exit, expressive);
-
-      @media (prefers-reduced-motion: reduce) {
-        transition: none;
-      }
-    }
-
-    &.is-visible {
-      .#{$block-class__next}__container {
-        max-block-size: calc(
-          100% - var(--tearsheet-vertical-gap, #{$spacing-09}) +
-            var(--block-size-change)
-        );
-        transform: scaleX(var(--scale-factor));
-      }
-    }
-  }
-}

package/scss/components/Toolbar/_carbon-imports.scss

@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2022, 2022
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@use '@carbon/styles/scss/components/button';

package/scss/components/Toolbar/_index-with-carbon.scss

@@ -1,9 +0,0 @@
-//
-// Copyright IBM Corp. 2022, 2022
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@use './carbon-imports';
-@use './toolbar';

package/scss/components/Toolbar/_index.scss

@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2021, 2021
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@use './toolbar';

package/scss/components/Toolbar/_toolbar.scss

@@ -1,75 +0,0 @@
-//
-// Copyright IBM Corp. 2021, 2021
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/breakpoint' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '../../global/styles/project-settings' as *;
-
-$block-class: #{$pkg-prefix}--toolbar;
-
-$border: 1px solid $border-subtle-01;
-
-$toolbar-dimensions: $spacing-08;
-
-.#{$block-class} {
-  @include breakpoint($name: lg) {
-    justify-content: flex-end;
-  }
-
-  display: flex;
-  background-color: $layer-01;
-  min-block-size: $toolbar-dimensions;
-  min-inline-size: $toolbar-dimensions;
-}
-
-.#{$block-class}--vertical,
-.#{$block-class}--vertical > .#{$block-class}__group {
-  flex-wrap: wrap;
-}
-
-.#{$block-class}--vertical {
-  max-inline-size: $toolbar-dimensions;
-}
-
-.#{$block-class}__group {
-  display: flex;
-  border-block-end: $border;
-  border-inline-end: $border;
-}
-
-.#{$block-class}--vertical > .#{$block-class}__group,
-.#{$block-class}__group:last-of-type {
-  border-inline-end-width: 0;
-}
-
-.#{$block-class}--vertical > .#{$block-class}__group:last-of-type,
-.#{$block-class} .#{$carbon-prefix}--dropdown {
-  border-block-end-width: 0;
-}
-
-.#{$block-class}__button--caret {
-  position: relative;
-}
-
-.#{$block-class}__button__caret {
-  $caret-dimensions: calc(#{$spacing-01} + #{$spacing-02});
-
-  $position: $spacing-01;
-
-  position: absolute;
-  background: linear-gradient(
-    to right bottom,
-    transparent 50%,
-    $icon-primary 50%
-  );
-  block-size: $caret-dimensions;
-  content: '';
-  inline-size: $caret-dimensions;
-  inset-block-end: $position;
-  inset-inline-end: $position;
-}

package/scss/components/TooltipTrigger/_index-with-carbon.scss

@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2023, 2023
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@use './tooltip-trigger';

package/scss/components/TooltipTrigger/_index.scss

@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2023, 2023
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@use './tooltip-trigger';

package/scss/components/TooltipTrigger/_tooltip-trigger.scss

@@ -1,29 +0,0 @@
-//
-// Copyright IBM Corp. 2023, 2023
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@use '@carbon/styles/scss/spacing' as *;
-// Standard imports.
-@use '../../global/styles/project-settings' as c4p-settings;
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-$block-class: #{c4p-settings.$pkg-prefix}--tooltip-trigger;
-
-.#{$block-class} {
-  display: flex;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: 0;
-  margin: 0;
-  appearance: none;
-  background: none;
-  block-size: 100%;
-  cursor: pointer;
-  inline-size: 100%;
-  outline: none;
-}

package/scss/components/TruncatedList/_carbon-imports.scss

@@ -1,9 +0,0 @@
-//
-// Copyright IBM Corp. 2024, 2024
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// Import any Carbon component styles used from TruncatedList in this file.
-// TruncatedList uses the following Carbon components:

package/scss/components/TruncatedList/_index-with-carbon.scss

@@ -1,9 +0,0 @@
-//
-// Copyright IBM Corp. 2024, 2024
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@use './carbon-imports';
-@use './truncated-list';