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

package/scss/components/Tearsheet/_tearsheet_next.scss

@@ -0,0 +1,530 @@
+/**
+ * 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

@@ -0,0 +1,8 @@
+//
+// 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

@@ -0,0 +1,9 @@
+//
+// 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

@@ -0,0 +1,8 @@
+//
+// 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

@@ -0,0 +1,75 @@
+//
+// 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

@@ -0,0 +1,8 @@
+//
+// 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

@@ -0,0 +1,8 @@
+//
+// 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

@@ -0,0 +1,29 @@
+//
+// 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

@@ -0,0 +1,9 @@
+//
+// 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

@@ -0,0 +1,9 @@
+//
+// 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';