@carbon/ibm-products 2.94.0 → 2.95.0

package/scss/components/AddSelect/_add-select_next.scss

@@ -6,13 +6,14 @@
  */
 
 // Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/motion' as *;
-@use '../../global/styles/project-settings' as *;
 
-$block-class__next: #{$pkg-prefix}--add-select__next;
+$block-class__next: #{c4p-settings.$pkg-prefix}--add-select__next;
+$carbon-prefix: #{c4p-settings.$carbon-prefix};
 
 /// Composable AddSelect styles (next)
 /// These styles support the composable AddSelect component structure
@@ -39,8 +40,10 @@ $block-class__next: #{$pkg-prefix}--add-select__next;
 }
 
 .#{$block-class__next}__header {
-  padding: $spacing-05;
   border-block-end: 1px solid $border-subtle-01;
+  padding-block-end: $spacing-03;
+  padding-block-start: $spacing-05;
+  padding-inline: $spacing-05;
 }
 
 .#{$block-class__next}__search {
@@ -74,10 +77,10 @@ $block-class__next: #{$pkg-prefix}--add-select__next;
 }
 
 .#{$block-class__next}__tags-label {
-  @include type.type-style('body-compact-01');
+  @include type-style('heading-compact-02');
 
   margin: 0;
-  color: $text-secondary;
+  color: $text-primary;
 }
 
 .#{$block-class__next}__sub-header-actions {
@@ -88,8 +91,10 @@ $block-class__next: #{$pkg-prefix}--add-select__next;
 }
 
 .#{$block-class__next}__content {
+  display: flex;
   overflow: auto;
   flex: 1;
+  flex-direction: column;
 }
 
 // ──────────────────────────────────────────────────────────────
@@ -97,8 +102,10 @@ $block-class__next: #{$pkg-prefix}--add-select__next;
 // ──────────────────────────────────────────────────────────────
 .#{$block-class__next}-list {
   display: flex;
+  flex: 1;
   flex-direction: column;
   overflow-y: auto;
+
   @supports (overflow-block: auto) {
     overflow-block: auto;
   }
@@ -115,8 +122,12 @@ $block-class__next: #{$pkg-prefix}--add-select__next;
   // Horizontal layout for hierarchy view (columns side-by-side)
   &--horizontal {
     flex-direction: row;
+    align-items: stretch;
+    block-size: 100%;
+
     .#{$block-class__next}-column {
-      padding: $spacing-05;
+      padding-block: $spacing-05;
+      padding-inline: $spacing-05;
     }
   }
 }
@@ -141,22 +152,51 @@ $block-class__next: #{$pkg-prefix}--add-select__next;
 
   &--selected {
     background-color: $layer-selected-01;
+
+    .#{$block-class__next}-row__cell-wrapper {
+      border-block-end-color: $border-subtle-selected-01;
+    }
   }
 
   &--disabled {
     cursor: not-allowed;
-    opacity: 0.5;
+
+    .#{$block-class__next}-row__title,
+    .#{$block-class__next}-row__subtitle {
+      color: $text-disabled;
+    }
+
+    .#{$block-class__next}-row__icon svg,
+    .#{$block-class__next}-row__view-item-panel svg,
+    .#{$block-class__next}-row__nav-indicator svg {
+      fill: $icon-disabled;
+    }
   }
 
   &:hover:not(&--disabled) {
     background: $layer-hover-01;
 
     .#{$block-class__next}-row__title {
-      color: $interactive;
+      color: $link-primary;
     }
 
+    .#{$block-class__next}-row__view-item-panel svg,
     .#{$block-class__next}-row__nav-indicator svg {
-      color: $interactive;
+      fill: $icon-disabled;
+    }
+  }
+
+  // Must come after &:hover to win the specificity tie
+  &--selected:hover:not(&--disabled) {
+    background: $layer-selected-hover-01;
+
+    .#{$block-class__next}-row__title {
+      color: $text-primary;
+    }
+
+    .#{$block-class__next}-row__view-item-panel svg,
+    .#{$block-class__next}-row__nav-indicator svg {
+      fill: $icon-primary;
     }
   }
 
@@ -164,31 +204,35 @@ $block-class__next: #{$pkg-prefix}--add-select__next;
     display: flex;
     flex: 1;
     flex-direction: column;
-    justify-content: center;
   }
 
   &__cell-wrapper {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 $spacing-05;
-    block-size: $spacing-09;
-    border-block-end: 1px solid $layer-accent-01;
+    border-block-end: 1px solid $border-subtle-01;
+    min-block-size: $spacing-09;
+    padding-block: $spacing-03;
+    padding-inline: $spacing-05;
   }
 
   &__content {
     display: flex;
     flex: 1;
     align-items: center;
+    align-self: center;
   }
 
   &__checkbox {
     flex: none;
+    align-self: center;
     margin-inline-end: $spacing-05;
   }
 
   &__radio {
-    .cds--radio-button__appearance {
+    align-self: center;
+
+    .#{$carbon-prefix}--radio-button__appearance {
       margin-inline-end: 0;
     }
   }
@@ -206,14 +250,14 @@ $block-class__next: #{$pkg-prefix}--add-select__next;
   }
 
   &__title {
-    @include type.type-style('body-compact-01');
+    @include type-style('body-compact-01');
 
     display: block;
     color: $text-primary;
   }
 
   &__subtitle {
-    @include type.type-style('label-01');
+    @include type-style('helper-text-01');
 
     display: block;
     color: $text-secondary;
@@ -239,14 +283,14 @@ $block-class__next: #{$pkg-prefix}--add-select__next;
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: $spacing-02;
-      border-radius: $spacing-02;
       cursor: pointer;
       margin-inline-start: $spacing-03;
+      padding-block: $spacing-02;
+      padding-inline: $spacing-02;
       transition: none;
 
       &:hover {
-        background-color: $layer-hover-01;
+        background-color: $background-hover;
       }
 
       &:focus {
@@ -264,14 +308,14 @@ $block-class__next: #{$pkg-prefix}--add-select__next;
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: $spacing-02;
-    border-radius: $spacing-02;
     cursor: pointer;
     margin-inline-start: $spacing-03;
+    padding-block: $spacing-02;
+    padding-inline: $spacing-02;
     transition: background-color $duration-fast-01 motion(standard, productive);
 
     &:hover {
-      background-color: $layer-hover-01;
+      background-color: $background-hover;
     }
 
     &:focus {
@@ -283,6 +327,39 @@ $block-class__next: #{$pkg-prefix}--add-select__next;
       fill: $icon-primary;
     }
   }
+
+  &--skeleton {
+    cursor: default;
+    pointer-events: none;
+
+    &:hover {
+      background: none;
+    }
+
+    .#{$block-class__next}-row__skeleton-control {
+      flex: none;
+      border-radius: $spacing-01;
+      background-color: $skeleton-element;
+      block-size: $spacing-05;
+      inline-size: $spacing-05;
+      margin-inline-end: $spacing-05;
+    }
+
+    .#{$block-class__next}-row__icon .#{$carbon-prefix}--icon--skeleton {
+      border-radius: 50%;
+      block-size: $spacing-07;
+      inline-size: $spacing-07;
+
+      &::before {
+        border-radius: 50%;
+        animation: none;
+      }
+    }
+
+    .#{$block-class__next}-row__skeleton-title {
+      margin-block-end: 0;
+    }
+  }
 }
 
 // ──────────────────────────────────────────────────────────────
@@ -294,16 +371,22 @@ $block-class__next: #{$pkg-prefix}--add-select__next;
   block-size: 100%;
   border-inline-end: 1px solid $border-subtle-01;
   min-inline-size: 300px;
+  padding-block: $spacing-05;
+  padding-inline: $spacing-05;
 
+  // default: no border on last column
   &:last-child {
     border-inline-end: none;
   }
 
+  .#{$block-class__next}-list-body--horizontal & {
+    &:last-child {
+      border-inline-end: 1px solid $border-subtle-01; // override: keep border inside horizontal layout
+    }
+  }
+
   // Search section with actions
   &__search {
-    padding: $spacing-05;
-    padding-block-end: 0;
-
     &--with-actions {
       display: flex;
       align-items: flex-end;
@@ -321,8 +404,9 @@ $block-class__next: #{$pkg-prefix}--add-select__next;
 
   // Search bar section (legacy)
   &__search-bar {
-    padding: $spacing-05;
     padding-block-end: 0;
+    padding-block-start: $spacing-05;
+    padding-inline: $spacing-05;
   }
 
   &__search-wrapper {
@@ -348,9 +432,10 @@ $block-class__next: #{$pkg-prefix}--add-select__next;
   }
 
   &__filter-popover {
-    padding: $spacing-05;
+    padding-block: $spacing-05;
+    padding-inline: $spacing-05;
 
-    .cds--checkbox-wrapper {
+    .#{$carbon-prefix}--checkbox-wrapper {
       margin-block-end: $spacing-03;
 
       &:last-child {
@@ -363,18 +448,19 @@ $block-class__next: #{$pkg-prefix}--add-select__next;
   &__header {
     display: flex;
     align-items: center;
-    padding: $spacing-05;
     border-block-end: 1px solid $border-subtle-01;
+    padding-block: $spacing-05;
+    padding-inline: $spacing-05;
   }
 
   &__select-all {
-    .cds--checkbox-label {
+    .#{$carbon-prefix}--checkbox-label {
       display: flex;
       align-items: center;
       gap: 0;
     }
 
-    .cds--checkbox-label-text {
+    .#{$carbon-prefix}--checkbox-label-text {
       display: flex;
       align-items: center;
       gap: $spacing-03;
@@ -389,10 +475,7 @@ $block-class__next: #{$pkg-prefix}--add-select__next;
   }
 
   &__title {
-    @include type.type-style('body-compact-01');
-
-    color: $text-secondary;
-    font-weight: 600;
+    @include type-style('heading-compact-01');
   }
 
   // Rows container
@@ -426,13 +509,14 @@ $block-class__next: #{$pkg-prefix}--add-select__next;
   }
 
   &-button {
-    @include type.type-style('body-compact-01');
+    @include type-style('body-compact-01');
 
-    padding: 0;
     border: none;
     background: none;
     color: $link-primary;
     cursor: pointer;
+    padding-block: 0;
+    padding-inline: 0;
     text-decoration: none;
 
     &:hover {
@@ -457,7 +541,7 @@ $block-class__next: #{$pkg-prefix}--add-select__next;
   }
 
   &-current {
-    @include type.type-style('body-compact-01');
+    @include type-style('body-compact-01');
 
     color: $text-primary;
   }
@@ -473,12 +557,14 @@ $block-class__next: #{$pkg-prefix}--add-select__next;
   &-header {
     display: flex;
     align-items: center;
-    padding: $spacing-07 $spacing-05 $spacing-03 $spacing-05;
     border-block-end: 1px solid $layer-accent-01;
+    padding-block-end: $spacing-03;
+    padding-block-start: $spacing-06;
+    padding-inline: $spacing-05;
   }
 
   &-title {
-    @include type.type-style('heading-compact-02');
+    @include type-style('heading-compact-02');
 
     margin-inline-end: $spacing-03;
   }
@@ -490,25 +576,20 @@ $block-class__next: #{$pkg-prefix}--add-select__next;
     margin-inline-start: auto;
   }
 
-  &-edit-button {
-    // Edit icon button styles
-  }
-
-  &-body {
-    // padding: 0 $spacing-05;
-  }
-
   &-item-default {
-    padding: $spacing-05 0;
-    border-block-end: 1px solid $layer-accent-01;
+    border-block-end: 1px solid $border-subtle-01;
+    padding-block: $spacing-04;
+    padding-inline: $spacing-05;
   }
 
   &-item-default-title {
+    @include type-style('body-compact-01');
+
     color: $text-primary;
   }
 
   &-item-default-subtitle {
-    @include type.type-style('label-01');
+    @include type-style('body-01');
 
     color: $text-secondary;
   }
@@ -516,30 +597,59 @@ $block-class__next: #{$pkg-prefix}--add-select__next;
 
 // ──────────────────────────────────────────────────────────────
 // AddSelectSelectionSummaryItem - Individual selected item
+// Figma reference: node 10473-340689
+// https://github.com/carbon-design-system/ibm-products/issues/9607#issuecomment-4969016515
 // ──────────────────────────────────────────────────────────────
 .#{$block-class__next}__selection-summary-item {
+  // Figma: var(--layer (contextual)) background on every row (#1)
+  // Figma: every row has a 1px bottom border (border-subtle-01) (#2)
   position: relative;
+  background-color: $layer-01;
+  border-block-end: 1px solid $border-subtle-01;
 
-  // Mode-specific variants
-  &--accordion {
-    // Accordion-specific styles
+  // Figma: var(--layer/layer-hover-01) on hover (#3)
+  &:hover {
+    background-color: $layer-hover-01;
+  }
+
+  // Carbon Accordion adds border-block-start on every .cds--accordion__item
+  // and border-block-end on :last-child — causing a double bottom border and a
+  // stray top border. Our wrapper owns the sole border per Figma spec. (#13)
+  // Border ownership: bottom border → __selection-summary-item; Carbon borders → zeroed.
+  &--accordion .#{$carbon-prefix}--accordion__item,
+  &--accordion .#{$carbon-prefix}--accordion__item:last-child {
+    border-block-end: none;
+    border-block-start: none;
+  }
+
+  // Carbon's default heading uses min-block-size: 40px with no block padding.
+  // Figma: py-[10px] px-[16px] on the heading row, so override to $spacing-04 (10px)
+  // block padding and unset the 40px minimum. (#4)
+  &--accordion .#{$carbon-prefix}--accordion__heading {
+    min-block-size: unset;
+    padding-block: $spacing-04; // 10px top/bottom — Figma: py-[10px]
+    padding-inline-end: $spacing-05; // 16px — Figma: px-[16px]
   }
 
   &--default {
-    // Simple mode specific styles
+    // Non-accordion mode: Figma py-[10px] px-[16px] on the title row (#4)
     .#{$block-class__next}__selection-summary-item-title-wrapper {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: $spacing-05;
+      padding-block: $spacing-04; // 10px top/bottom, matches Figma py-[10px]
+      padding-inline: $spacing-05; // 16px inline, matches Figma px-[16px]
     }
+
+    // Figma: expanded content area closes with 10px bottom gap (#5)
     .#{$block-class__next}__selection-summary-item-content {
+      padding-block-end: $spacing-04;
       padding-inline: $spacing-05;
     }
-  }
 
-  &--template {
-    // Custom template mode - minimal styling
+    .#{$block-class__next}__selection-summary-item-title {
+      @include type-style('heading-compact-01');
+    }
   }
 
   &-title-wrapper {
@@ -552,12 +662,18 @@ $block-class__next: #{$pkg-prefix}--add-select__next;
     flex: 1;
   }
 
+  // Figma: 14px / 18px line-height / 0.16px letter-spacing = body-compact-01 (#6)
+  // Previously had color only with no type-style applied.
   &-title {
+    @include type-style('body-compact-01');
+
     color: $text-primary;
   }
 
+  // Figma: 14px / 20px line-height / 0.16px letter-spacing = body-01 (#7)
+  // Previously used label-01 (12px) which was incorrect.
   &-subtitle {
-    @include type.type-style('label-01');
+    @include type-style('body-01');
 
     color: $text-secondary;
   }
@@ -567,38 +683,42 @@ $block-class__next: #{$pkg-prefix}--add-select__next;
   }
 
   &-header {
-    @include type.type-style('label-01');
+    @include type-style('label-01');
 
     color: $text-secondary;
     margin-block-end: $spacing-03;
   }
 
   &-body {
-    @include type.type-style('body-01');
+    @include type-style('body-01');
 
     margin-block-end: $spacing-05;
   }
 
-  // Remove button - works in all modes
+  // Figma: remove button (32px ghost IconButton) is flush to the right edge
+  // inside the 16px inline padding. $spacing-03 (8px) gap gives the correct
+  // right-edge alignment. Previously used $spacing-05 (16px). (#8)
   &-remove-button-container {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding-inline-start: $spacing-05;
+    padding-inline-start: $spacing-03; // 8px gap before the 32px button
 
-    // In accordion mode, position absolutely
+    // In accordion mode the remove button is absolutely positioned within the
+    // heading (position:relative). It sits inside .cds--accordion__title which
+    // is full-width, so inset-inline-end aligns it to the heading's right
+    // padding edge. Previously lacked vertical centering. (#9)
     .#{$block-class__next}__selection-summary-item--accordion & {
       position: absolute;
-      inset-inline-end: 0;
-    }
-
-    // In simple mode, position in flex layout
-    .#{$block-class__next}__selection-summary-item--simple & {
-      position: relative;
-      margin-inline-start: auto;
+      inset-block-start: 50%;
+      inset-inline-end: $spacing-05; // 16px from inline-end — matches heading padding
+      padding-inline-start: 0;
+      transform: translateY(-50%);
     }
   }
 
+  // Figma: remove button visible on hover only (#3, #8)
+  // Opacity transition keeps the reveal smooth (prefers-reduced-motion respected).
   &-remove-button {
     opacity: 0;
     transition: opacity $duration-fast-01 motion(standard, productive);
@@ -608,39 +728,59 @@ $block-class__next: #{$pkg-prefix}--add-select__next;
     }
   }
 
-  // Show remove button on hover/focus for all modes
+  // Reveal on hover or keyboard focus within the item
   &:hover &-remove-button,
   &:focus-within &-remove-button {
     opacity: 1;
   }
 
+  // No extra top margin — padding is owned by the --default title-wrapper above (#11)
   &-content {
-    margin-block-start: $spacing-03;
+    margin-block-start: 0;
   }
 }
 
-// Accordion overrides for selection summary items
+// Accordion overrides for SelectionSummaryItem accordion variant
+// Figma reference: node 10473-340689 (collapsed) / 10473-340699 (expanded)
 .#{$block-class__next}__selection-summary {
-  .cds--accordion__arrow {
-    transform: rotate(0deg);
+  // Figma collapsed state: chevron-down (∨); expanded: chevron-up (∧)
+  // Carbon renders ChevronRight (→). Rotate to match Figma orientations.
+  // Previously: collapsed = rotate(0deg) [pointing right], expanded = rotate(90deg)
+  // [pointing down] — both wrong against the Figma spec.
+  .#{$carbon-prefix}--accordion__arrow {
+    transform: rotate(90deg); // collapsed: points down (∨)
   }
 
-  .cds--accordion__item--active .cds--accordion__arrow {
-    transform: rotate(90deg);
+  .#{$carbon-prefix}--accordion__item--active
+    .#{$carbon-prefix}--accordion__arrow {
+    transform: rotate(-90deg); // expanded: points up (∧)
   }
 
-  .cds--accordion--start .cds--accordion__arrow {
-    margin: 0 0 0 $spacing-05;
+  // Figma: px-[16px] — arrow sits 16px from the inline-start edge of the row
+  .#{$carbon-prefix}--accordion--start .#{$carbon-prefix}--accordion__arrow {
+    margin-block: 0;
+    margin-inline-end: 0;
+    margin-inline-start: $spacing-05; // 16px from inline-start
   }
 
-  .cds--accordion--start .cds--accordion__title {
-    margin: 0 $spacing-05 0 $spacing-03;
-    padding-inline-end: $spacing-07; // Add padding to prevent overlap with remove button
+  // Figma: gap-[16px] between the arrow and the title content group.
+  // $spacing-03 (8px) left gap + 8px arrow width = 16px total visual gap.
+  // padding-inline-end reserves 32px for the absolutely-positioned remove button.
+  .#{$carbon-prefix}--accordion--start .#{$carbon-prefix}--accordion__title {
+    margin-inline-end: 0;
+    margin-inline-start: $spacing-03; // 8px gap after arrow → 16px total Figma gap
+    padding-inline-end: $spacing-07; // 32px: prevents text overlap with remove button
   }
 
-  .cds--accordion__item--active .cds--accordion__content {
-    margin-block-start: $spacing-03;
-    padding-block: 0;
+  // Figma expanded slot: p-[16px] = $spacing-05 on all sides (#12)
+  // Previously: padding-block: 0 (no vertical padding) and no inline padding.
+  // This selector is more specific than Carbon's responsive padding-inline-end
+  // overrides on .cds--accordion__content, so one rule covers all breakpoints.
+  .#{$carbon-prefix}--accordion__item--active
+    .#{$carbon-prefix}--accordion__content {
+    margin-block-start: 0;
+    padding-block: $spacing-05; // 16px top/bottom
+    padding-inline: $spacing-05; // 16px inline
   }
 }
 
@@ -648,36 +788,35 @@ $block-class__next: #{$pkg-prefix}--add-select__next;
 // AddSelectItemSummaryPanel - Item summary view
 // ──────────────────────────────────────────────────────────────
 .#{$block-class__next}__item-summary-panel {
-  padding: $spacing-05;
-
   &-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-block-end: $spacing-05;
+    border-block-end: 1px solid $layer-accent-01;
+    gap: $spacing-03;
+    padding-block-end: $spacing-03;
+    padding-block-start: $spacing-07;
+    padding-inline: $spacing-05;
   }
 
   &-title {
-    @include type.type-style('heading-03');
-  }
-
-  &-close {
-    // Close button styles
+    @include type-style('heading-compact-02');
   }
 
   &-body {
-    // Body content styles
+    padding-block: $spacing-05;
+    padding-inline: $spacing-05;
   }
 
   &-entry {
     margin-block-end: $spacing-05;
 
     &-title {
-      @include type.type-style('heading-compact-01');
+      @include type-style('heading-compact-01');
     }
 
     &-body {
-      @include type.type-style('body-compact-01');
+      @include type-style('body-compact-01');
     }
   }
 }

package/scss/components/BigNumber/_big-number.scss

@@ -23,6 +23,10 @@
 $block-class: #{c4p-settings.$pkg-prefix}--big-number;
 $skeleton-block-class: #{c4p-settings.$pkg-prefix}--big-number-skeleton;
 
+.#{$block-class} {
+  margin: 0;
+}
+
 .#{$block-class}__label {
   @include type-style('label-01');