@carbon/ibm-products-web-components 0.45.0 → 0.46.0

package/scss/components/add-select/add-select-body.scss

@@ -22,7 +22,6 @@ $prefix: 'c4p';
 :host(#{$prefix}-add-select-body) {
   display: block;
 
-  /* Apply shared styles within shadow DOM */
   .#{$block-class__next}__body {
     display: flex;
     flex-direction: column;
@@ -35,10 +34,31 @@ $prefix: 'c4p';
     border-block-end: 1px solid $border-subtle-01;
   }
 
-  .#{$block-class__next}__search {
+  // When consumer provides a custom header via slot="header",
+  // hide the default search/sub-header content.
+  .#{$block-class__next}__header--custom {
+    .#{$block-class__next}__search,
+    .#{$block-class__next}__sub-header {
+      display: none;
+    }
+  }
+
+  // Search row: input + actions side by side (matches __search--with-actions)
+  .#{$block-class__next}__search--with-actions {
+    display: flex;
+    align-items: flex-end;
     margin-block-end: $spacing-05;
   }
 
+  .#{$block-class__next}__search-input {
+    flex: 1;
+  }
+
+  .#{$block-class__next}__global-actions {
+    display: flex;
+    align-items: flex-end;
+  }
+
   .#{$block-class__next}__sub-header {
     display: flex;
     align-items: center;
@@ -52,14 +72,26 @@ $prefix: 'c4p';
   }
 
   .#{$block-class__next}__tags-label {
-    @include type.type-style('body-compact-01');
+    @include type.type-style('heading-compact-02');
 
     margin: 0;
-    color: $text-secondary;
+    color: $text-primary;
+  }
+
+  .#{$block-class__next}__sub-header-actions {
+    display: flex;
+    align-items: center;
+    gap: $spacing-03;
+    margin-inline-start: $spacing-05;
   }
 
   .#{$block-class__next}__content {
     overflow: auto;
     flex: 1;
   }
+
+  .#{$block-class__next}-list-body {
+    display: flex;
+    flex-direction: column;
+  }
 }

package/scss/components/add-select/add-select-column.scss

@@ -0,0 +1,81 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+
+$prefix: 'c4p';
+
+@use '@carbon/ibm-products-styles/scss/components/AddSelect/add-select_next'
+  as *;
+
+:host(#{$prefix}-add-select-column) {
+  display: block;
+
+  .#{$block-class__next}-column {
+    display: flex;
+    flex-direction: column;
+    padding: $spacing-05;
+  }
+
+  .#{$block-class__next}-column__search {
+    padding: 0;
+
+    &--with-actions {
+      display: flex;
+      align-items: flex-end;
+    }
+  }
+
+  .#{$block-class__next}-column__search-input {
+    flex: 1;
+  }
+
+  .#{$block-class__next}-column__actions {
+    display: flex;
+    align-items: flex-end;
+  }
+
+  .#{$block-class__next}-column__header {
+    display: flex;
+    align-items: center;
+    padding: $spacing-05;
+    border-block-end: 1px solid $border-subtle-01;
+  }
+
+  .#{$block-class__next}-column__title-wrapper {
+    display: flex;
+    align-items: center;
+    gap: $spacing-03;
+  }
+
+  .#{$block-class__next}-column__title {
+    @include type.type-style('heading-compact-01');
+
+    margin-inline-end: $spacing-03;
+  }
+
+  // Select all: align slotted title + tag inside the checkbox label
+  .#{$block-class__next}-column__select-all {
+    &::part(label) {
+      display: flex;
+      align-items: center;
+      gap: $spacing-03;
+    }
+  }
+
+  .#{$block-class__next}-column__rows {
+    overflow: auto;
+    flex: 1;
+    @supports (overflow-block: auto) {
+      overflow-block: auto;
+    }
+  }
+}

package/scss/components/add-select/add-select-item-panel.scss

@@ -0,0 +1,85 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/motion' as *;
+
+$prefix: 'c4p';
+
+@use '@carbon/ibm-products-styles/scss/components/AddSelect/add-select_next'
+  as *;
+
+:host(#{$prefix}-add-select-item-panel) {
+  display: block;
+
+  .#{$block-class__next}__item-summary-panel {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    block-size: 100%;
+    transform: translateX(100%);
+    transition: transform $duration-moderate-01 motion(standard, productive);
+  }
+
+  .#{$block-class__next}__item-summary-panel--open {
+    transform: translateX(0);
+  }
+
+  .#{$block-class__next}__item-summary-panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: $spacing-07 $spacing-05 $spacing-03;
+    border-block-end: 1px solid $border-subtle-01;
+    margin-block-end: 0;
+  }
+
+  .#{$block-class__next}__item-summary-panel-title {
+    @include type.type-style('heading-compact-01');
+
+    flex: 1;
+    margin: 0;
+    color: $text-primary;
+  }
+
+  .#{$block-class__next}__item-summary-panel-body {
+    overflow: auto;
+    flex: 1;
+    padding: $spacing-05;
+    @supports (overflow-block: auto) {
+      overflow-block: auto;
+    }
+  }
+
+  .#{$block-class__next}__item-summary-panel-entry {
+    margin-block-end: $spacing-04;
+  }
+
+  .#{$block-class__next}__item-summary-panel-entry-title {
+    @include type.type-style('label-01');
+
+    margin: 0;
+    color: $text-secondary;
+  }
+
+  .#{$block-class__next}__item-summary-panel-entry-body {
+    @include type.type-style('body-compact-01');
+
+    margin: 0;
+    color: $text-primary;
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    .#{$block-class__next}__item-summary-panel {
+      transition: none;
+    }
+  }
+}

package/scss/components/add-select/add-select-row.scss

@@ -19,6 +19,13 @@ $prefix: 'c4p';
 @use '@carbon/ibm-products-styles/scss/components/AddSelect/add-select_next'
   as *;
 
+/* Item panel open — blue left border, mirrors React's -row-item-panel--selected */
+:host(#{$prefix}-add-select-row[item-panel-open]) {
+  .#{$block-class__next}-row {
+    border-inline-start-color: $interactive;
+  }
+}
+
 /* Web Component specific overrides */
 :host(#{$prefix}-add-select-row) {
   display: block;
@@ -42,7 +49,9 @@ $prefix: 'c4p';
     &--selected {
       background-color: $layer-selected-01;
     }
+  }
 
+  .#{$block-class__next}-row {
     &--disabled {
       cursor: not-allowed;
       opacity: 0.5;
@@ -52,11 +61,26 @@ $prefix: 'c4p';
       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 {
+        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 {
-        color: $interactive;
+        fill: $icon-primary;
       }
     }
   }
@@ -70,11 +94,14 @@ $prefix: 'c4p';
 
   .#{$block-class__next}-row__cell-wrapper {
     display: flex;
+    /* Shadow DOM doesn't inherit Carbon's global border-box reset */
+    box-sizing: border-box;
     align-items: center;
     justify-content: space-between;
-    padding: 0 $spacing-05;
-    block-size: 3rem;
     border-block-end: 1px solid $layer-accent-01;
+    min-block-size: $spacing-09;
+    padding-block: $spacing-03;
+    padding-inline: $spacing-05;
   }
 
   .#{$block-class__next}-row__content {
@@ -115,23 +142,27 @@ $prefix: 'c4p';
     margin-inline-start: $spacing-03;
   }
 
+  .#{$block-class__next}-row__view-item-panel {
+    margin-inline-start: auto;
+  }
+
   .#{$block-class__next}-row__nav-indicator {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: $spacing-02;
-    border-radius: 4px;
     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 {
-      outline: 2px solid $focus;
-      outline-offset: -2px;
+      outline: $spacing-01 solid $focus;
+      outline-offset: calc(-1 * $spacing-01);
     }
 
     svg {
@@ -139,6 +170,42 @@ $prefix: 'c4p';
     }
   }
 
+  // Skeleton state
+  .#{$block-class__next}-row--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;
+    }
+
+    // Override cds-skeleton-icon host size to match the circular icon placeholder
+    .#{$block-class__next}-row__icon cds-skeleton-icon {
+      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;
+      margin-block-start: $spacing-03;
+    }
+  }
+
   @media screen and (prefers-reduced-motion: reduce) {
     .#{$block-class__next}-row {
       transition: none;

package/scss/components/add-select/add-select-selection-summary-item.scss

@@ -0,0 +1,227 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/motion' as *;
+
+$prefix: 'c4p';
+
+@use '@carbon/ibm-products-styles/scss/components/AddSelect/add-select_next'
+  as *;
+
+:host(#{$prefix}-add-select-selection-summary-item) {
+  display: block;
+
+  // ── Wrapper ─────────────────────────────────────────────────────────────────
+  .#{$block-class__next}__selection-summary-item {
+    position: relative;
+    background-color: $layer-01;
+    border-block-end: 1px solid $border-subtle-01;
+
+    &:hover {
+      background-color: $layer-hover-01;
+    }
+  }
+
+  // ── Accordion variant (custom — avoids shadow-boundary slot problems) ─────────
+
+  .#{$block-class__next}__selection-summary-item-accordion {
+    // No extra borders — wrapper owns the border-block-end
+  }
+
+  .#{$block-class__next}__selection-summary-item-accordion-heading {
+    position: relative; // anchor for absolutely-positioned remove button
+    display: flex;
+    align-items: center;
+    appearance: none;
+    border: none; // stylelint-disable-line order/properties-order
+    background: none;
+    color: $text-primary;
+    cursor: pointer;
+    inline-size: 100%;
+    // Figma: py-[10px] px-[16px]
+    padding-block: $spacing-04;
+    padding-inline: $spacing-05;
+
+    &:hover {
+      background-color: $layer-hover-01;
+    }
+
+    &:focus {
+      outline: 2px solid $focus;
+      outline-offset: -2px;
+    }
+
+    &:focus:not(:focus-visible) {
+      outline: none;
+    }
+  }
+
+  .#{$block-class__next}__selection-summary-item-accordion-arrow {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    margin-inline-end: $spacing-03; // 8px gap to title (= 16px total from edge)
+    margin-inline-start: 0;
+    transform: rotate(90deg); // collapsed: chevron points down ∨
+    transition: transform $duration-fast-01 motion(standard, productive);
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+
+    svg {
+      fill: $icon-primary;
+    }
+
+    &--open {
+      transform: rotate(-90deg); // expanded: chevron points up ∧
+    }
+  }
+
+  .#{$block-class__next}__selection-summary-item-accordion-title {
+    @include type.type-style('body-compact-01');
+
+    display: block; // <span> inside <button> needs explicit block to honour flex layout
+    flex: 1;
+    padding-inline-end: $spacing-07; // Reserve 32px — prevents overlap with remove button
+    text-align: start;
+
+    // When wrapping slotted content, act as a flex container so the
+    // slot children (e.g. UserAvatar + text group) lay out correctly
+    &--slot {
+      display: flex;
+      align-items: flex-start;
+    }
+  }
+
+  .#{$block-class__next}__selection-summary-item-accordion-body {
+    // Figma: p-[16px] on all sides for expanded content
+    padding-block: $spacing-05;
+    padding-inline: $spacing-05;
+  }
+
+  // ── Non-accordion (default) variant ─────────────────────────────────────────
+  .#{$block-class__next}__selection-summary-item--default {
+    .#{$block-class__next}__selection-summary-item-title-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding-block: $spacing-04; // 10px
+      padding-inline: $spacing-05; // 16px
+    }
+
+    .#{$block-class__next}__selection-summary-item-content {
+      padding-block-end: $spacing-04;
+      padding-inline: $spacing-05;
+    }
+
+    .#{$block-class__next}__selection-summary-item-title {
+      @include type.type-style('heading-compact-01');
+    }
+  }
+
+  // ── Shared item sub-elements ─────────────────────────────────────────────────
+  .#{$block-class__next}__selection-summary-item-title-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .#{$block-class__next}__selection-summary-item-selected-item {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  .#{$block-class__next}__selection-summary-item-title {
+    @include type.type-style('body-compact-01');
+
+    margin: 0;
+    color: $text-primary;
+  }
+
+  .#{$block-class__next}__selection-summary-item-subtitle {
+    @include type.type-style('body-01');
+
+    margin: 0;
+    color: $text-secondary;
+  }
+
+  .#{$block-class__next}__selection-summary-item-content {
+    margin-block-start: 0;
+  }
+
+  .#{$block-class__next}__selection-summary-item-entry {
+    margin-block-end: $spacing-05;
+  }
+
+  .#{$block-class__next}__selection-summary-item-header {
+    @include type.type-style('label-01');
+
+    margin: 0;
+    color: $text-secondary;
+    margin-block-end: $spacing-03;
+  }
+
+  .#{$block-class__next}__selection-summary-item-body {
+    @include type.type-style('body-01');
+
+    margin: 0;
+    margin-block-end: $spacing-05;
+  }
+
+  // ── Remove button ────────────────────────────────────────────────────────────
+
+  // render-item wrapper — `position:relative` anchors the absolute remove button;
+  // no flex so the slot content's own layout owns the full row width.
+  .#{$block-class__next}__selection-summary-item-render-item-wrapper {
+    position: relative;
+  }
+
+  // Default (non-accordion) — inline at the right of the title row.
+  .#{$block-class__next}__selection-summary-item-remove-button-container {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding-inline-start: $spacing-03; // 8px gap before the 32px button
+  }
+
+  // Accordion heading and render-item — absolutely positioned, vertically centred.
+  // Both parents have `position: relative`.
+  .#{$block-class__next}__selection-summary-item-accordion-heading
+    .#{$block-class__next}__selection-summary-item-remove-button-container,
+  .#{$block-class__next}__selection-summary-item-render-item-wrapper
+    .#{$block-class__next}__selection-summary-item-remove-button-container {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: $spacing-05; // 16px from inline-end
+    padding-inline-start: 0;
+    transform: translateY(-50%);
+  }
+
+  // Remove button is hidden until hover/focus
+  .#{$block-class__next}__selection-summary-item-remove-button {
+    opacity: 0;
+    transition: opacity $duration-fast-01 motion(standard, productive);
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  .#{$block-class__next}__selection-summary-item:hover
+    .#{$block-class__next}__selection-summary-item-remove-button,
+  .#{$block-class__next}__selection-summary-item:focus-within
+    .#{$block-class__next}__selection-summary-item-remove-button {
+    opacity: 1;
+  }
+}

package/scss/components/add-select/add-select-selection-summary.scss

@@ -0,0 +1,58 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+
+$prefix: 'c4p';
+
+@use '@carbon/ibm-products-styles/scss/components/AddSelect/add-select_next'
+  as *;
+
+:host(#{$prefix}-add-select-selection-summary) {
+  display: block;
+
+  .#{$block-class__next}__selection-summary {
+    display: flex;
+    flex-direction: column;
+    block-size: 100%;
+  }
+
+  .#{$block-class__next}__selection-summary-header {
+    display: flex;
+    align-items: center;
+    padding: $spacing-04 $spacing-05;
+    border-block-end: 1px solid $border-subtle-01;
+    gap: $spacing-03;
+  }
+
+  .#{$block-class__next}__selection-summary-title {
+    @include type.type-style('heading-compact-01');
+
+    margin: 0;
+    color: $text-primary;
+    margin-inline-end: $spacing-03;
+  }
+
+  .#{$block-class__next}__selection-summary-header-actions {
+    display: flex;
+    align-items: center;
+    gap: $spacing-02;
+    margin-inline-start: auto;
+  }
+
+  .#{$block-class__next}__selection-summary-body {
+    overflow: auto;
+    flex: 1;
+    @supports (overflow-block: auto) {
+      overflow-block: auto;
+    }
+  }
+}