@carbon/ibm-products-web-components 0.30.0-rc.0 → 0.31.0-rc.0

package/scss/components/full-page-error/full-page-error.scss

@@ -0,0 +1,29 @@
+/*
+* Copyright IBM Corp. 2025, 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.
+*/
+
+$css--plex: true !default;
+@use 'sass:map';
+
+@use '@carbon/styles/scss/reset';
+
+@use '@carbon/grid';
+@use '@carbon/ibm-products-styles/scss/components/FullPageError' as *;
+
+@use '@carbon/themes' as *;
+
+@include grid.css-grid();
+
+// Local vars
+$prefix: 'c4p';
+$carbon-prefix: 'cds';
+$block-class: #{$prefix}--side-panel;
+
+:host(#{$prefix}-full-page-error) {
+  .#{$block-class} {
+    @extend .#{$block-class};
+  }
+}

package/scss/components/guide-banner/guide-banner.scss

@@ -0,0 +1,30 @@
+/*
+* Copyright IBM Corp. 2025, 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.
+*/
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/type';
+@use '@carbon/ibm-products-styles/scss/config';
+@use '@carbon/ibm-products-styles/scss/components/Guidebanner' as *;
+
+$prefix: config.$pkg-prefix;
+
+:host(#{$prefix}-guide-banner) {
+  details {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
+  ::marker,
+  ::-webkit-details-marker {
+    display: none;
+    content: '';
+  }
+}

package/scss/components/interstitial-screen/interstitial-screen-body-item.scss

@@ -0,0 +1,18 @@
+/**
+ * @license
+ *
+ * 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 '../../utilities/carousel/index' as carousel;
+@use '@carbon/styles/scss/spacing' as *;
+
+@include carousel.carousel();
+
+:host {
+  /* stylelint-disable-next-line declaration-no-important */
+  box-sizing: border-box !important;
+  padding-inline-start: $spacing-07;
+}

package/scss/components/interstitial-screen/interstitial-screen-body.scss

@@ -0,0 +1,29 @@
+/**
+ * @license
+ *
+ * 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 './interstitial-screen';
+@use '../../utilities/carousel/index' as carousel;
+@use '@carbon/styles/scss/spacing' as *;
+
+@include carousel.wrapperStyles();
+
+$prefix: 'c4p';
+
+.#{$prefix}--interstitial-screen--body {
+  block-size: 100%;
+}
+.#{$prefix}--interstitial-screen__carousel,
+.#{$prefix}--interstitial-screen__contentWrapper {
+  display: flex;
+}
+
+:host {
+  flex-grow: 1;
+  /* stylelint-disable-next-line declaration-no-important */
+  padding-block-end: 0 !important;
+}

package/scss/components/interstitial-screen/interstitial-screen-footer.scss

@@ -0,0 +1,39 @@
+/**
+ * @license
+ *
+ * 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 './interstitial-screen';
+@use '@carbon/styles/scss/spacing' as *;
+
+$prefix: 'c4p';
+$carbon-prefix: 'cds';
+
+:host {
+  inline-size: 100%;
+}
+
+.#{$prefix}--interstitial-screen--footer {
+  block-size: 4rem; //as in cds modal footer
+}
+.#{$prefix}--interstitial-screen--footer-controls {
+  display: flex;
+}
+#{$carbon-prefix}-button {
+  block-size: 100%;
+}
+#{$carbon-prefix}-inline-loading {
+  position: absolute;
+  inset-block-start: 0;
+}
+.#{$prefix}--interstitial-screen--skip-btn {
+  /* stylelint-disable-next-line declaration-no-important */
+  padding-inline-start: 0 !important;
+
+  &::part(button) {
+    padding-inline-start: $spacing-07;
+  }
+}

package/scss/components/interstitial-screen/interstitial-screen-header.scss

@@ -0,0 +1,13 @@
+/**
+ * @license
+ *
+ * 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 './interstitial-screen';
+
+:host {
+  display: contents;
+}

package/scss/components/interstitial-screen/interstitial-screen.scss

@@ -0,0 +1,28 @@
+/*
+* Copyright IBM Corp. 2025, 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.
+*/
+
+$css--plex: true !default;
+
+@use 'sass:map';
+
+@use '@carbon/styles/scss/reset';
+
+@use '@carbon/ibm-products-styles/scss/components/InterstitialScreen/index' as *;
+
+$prefix: 'c4p';
+$block-class: #{$prefix}--interstitial-screen;
+
+:host([fullscreen]) {
+  @extend .#{$block-class}--full-screen;
+  .#{$block-class}--container {
+    @extend .#{$block-class}--container;
+  }
+}
+
+.#{$block-class}__body-container {
+  padding: 0;
+}

package/scss/components/notification-panel/notification-footer.scss

@@ -0,0 +1,65 @@
+/*
+* Copyright IBM Corp. 2023, 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.
+*/
+
+$css--plex: true !default;
+@use 'sass:map';
+
+/* Other Carbon settings. */
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/type/scss/font-family' as *;
+@use '@carbon/styles/scss/utilities/ai-gradient' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
+
+$prefix: 'c4p';
+$carbon-prefix: 'cds';
+@use '@carbon/ibm-products-styles/scss/components/NotificationsPanel/index' as *;
+
+$block-class: #{$prefix}--notifications-panel;
+$block-class-action-set: #{$prefix}--action-set;
+
+:host(#{$prefix}-notification-footer) {
+  display: flex;
+}
+.#{$block-class}__view-all-button {
+  display: flex;
+  align-items: center;
+  border-inline-end: 1px solid $border-subtle-01;
+  color: $text-primary;
+  inline-size: 100%;
+  max-inline-size: calc(100% - 2.5rem);
+  min-block-size: 2.5rem;
+  --cds-link-primary: $text-primary;
+  --cds-link-primary-hover: $text-primary;
+  --cds-layout-size-height-min: 2.5rem;
+  --cds-layout-size-height-sm: 2.5rem;
+  --cds-layout-size-height: 2.5rem;
+  --cds-layout-size-height-lg: 2.5rem;
+  --cds-layout-size-height-max: 2.5rem;
+  --cds-layout-size-height-2xl: 2.5rem;
+}
+.#{$block-class}__settings-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  --cds-link-primary: $text-primary;
+  --cds-link-primary-hover: $text-primary;
+  --cds-layout-size-height-min: 2.5rem;
+  --cds-layout-size-height-sm: 2.5rem;
+  --cds-layout-size-height: 2.5rem;
+  --cds-layout-size-height-lg: 2.5rem;
+  --cds-layout-size-height-max: 2.5rem;
+  --cds-layout-size-height-2xl: 2.5rem;
+}
+.#{$block-class}__settings-button .#{$carbon-prefix}--btn__icon {
+  margin: 0;
+}

package/scss/components/notification-panel/notification-panel.scss

@@ -0,0 +1,58 @@
+/*
+* Copyright IBM Corp. 2023, 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.
+*/
+
+$css--plex: true !default;
+@use 'sass:map';
+
+/* Other Carbon settings. */
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/type/scss/font-family' as *;
+@use '@carbon/styles/scss/utilities/ai-gradient' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
+
+$prefix: 'c4p';
+$carbon-prefix: 'cds';
+@use '@carbon/ibm-products-styles/scss/components/NotificationsPanel/index' as *;
+
+$block-class: #{$prefix}--notifications-panel;
+$block-class-action-set: #{$prefix}--action-set;
+
+:host(#{$prefix}-notification-panel) {
+  .c4p--notifications-panel__do-not-disturb-toggle {
+    display: block;
+  }
+}
+:host(#{$prefix}-notification-panel)
+  ::slotted(.c4p--notifications-panel__bottom-actions) {
+  display: flex;
+  align-items: center;
+}
+
+.#{$block-class}__header-container {
+  --#{$carbon-prefix}-heading-06-font-size: --#{$carbon-prefix}-heading-compact-01-font-size;
+  --#{$carbon-prefix}-heading-06-font-weight: --#{$carbon-prefix}-heading-compact-01-font-weight;
+  --#{$carbon-prefix}-heading-06-line-height: --#{$carbon-prefix}-heading-compact-01-line-height;
+  --#{$carbon-prefix}-heading-06-letter-spacing: --#{$carbon-prefix}-heading-compact-01-letter-spacing;
+}
+.#{$block-class}__dismiss-button {
+  --#{$carbon-prefix}-link-primary: --#{$carbon-prefix}-text-primary;
+  --#{$carbon-prefix}-link-primary-hover: --#{$carbon-prefix}-text-primary;
+}
+.#{$block-class}__bottom-actions-container {
+  position: sticky;
+  z-index: 2;
+  background-color: $layer-01;
+  block-size: $spacing-08;
+  border-block-start: 1px solid $border-subtle-01;
+  inset-block-end: 0;
+  min-block-size: $spacing-08;
+}

package/scss/components/notification-panel/notification.scss

@@ -0,0 +1,147 @@
+/*
+* Copyright IBM Corp. 2023, 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.
+*/
+
+$css--plex: true !default;
+@use 'sass:map';
+
+/* Other Carbon settings. */
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/type/scss/font-family' as *;
+@use '@carbon/styles/scss/utilities/ai-gradient' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
+
+$prefix: 'c4p';
+$carbon-prefix: 'cds';
+@use '@carbon/ibm-products-styles/scss/components/NotificationsPanel/index' as *;
+$block-notification-class: #{$prefix}--notifications-panel__notification;
+
+:host(#{$prefix}-notification) {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  padding: $spacing-05;
+  border: 0;
+  background-color: $layer-01;
+  cursor: pointer;
+  inline-size: 100%;
+  min-block-size: 6.25rem;
+  text-align: start;
+  transition: background-color $duration-moderate-02 motion(standard);
+  @media screen and (prefers-reduced-motion: reduce) {
+    &::before {
+      position: absolute;
+      margin: 0 auto;
+      background-color: $border-subtle-01;
+      block-size: 1px;
+      content: '';
+      inline-size: calc(100% - (2 * #{$spacing-05}));
+      inset-block-start: 0;
+      transition: none;
+    }
+  }
+
+  &::before {
+    position: absolute;
+    margin: 0 auto;
+    background-color: $border-subtle-01;
+    block-size: 1px;
+    content: '';
+    inline-size: calc(100% - (2 * #{$spacing-05}));
+    inset-block-start: 0;
+    transition: background-color $duration-moderate-02 motion(standard);
+  }
+
+  &:hover::before {
+    background-color: transparent;
+  }
+  .#{$block-notification-class}-status-icon {
+    margin-inline-end: $spacing-03;
+    min-inline-size: 1rem;
+    &.#{$block-notification-class}-status-icon-error {
+      fill: $support-error;
+    }
+    &.#{$block-notification-class}-status-icon-success {
+      fill: $support-success;
+    }
+    &.#{$block-notification-class}-status-icon-warning {
+      fill: $support-warning;
+    }
+    &.#{$block-notification-class}-status-icon-informational {
+      fill: $support-info;
+    }
+  }
+  .#{$block-notification-class}-time-label {
+    margin-block-end: $spacing-03;
+  }
+  .#{$block-notification-class}__dismiss-single-button {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    color: $text-primary;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    min-inline-size: 2rem;
+    opacity: 0;
+    /* stylelint-disable-next-line max-nesting-depth */
+    &:hover,
+    &:focus {
+      opacity: 1;
+    }
+    --cds-link-primary: --cds-text-primary;
+    --cds-link-primary-hover: --cds-text-primary;
+  }
+  .#{$block-notification-class}-time-label,
+  .#{$block-notification-class}-description {
+    @include type.type-style('label-01');
+
+    color: $text-secondary;
+  }
+  .#{$block-notification-class}-description {
+    display: block;
+  }
+}
+::slotted(.#{$block-notification-class}-title) {
+  @include type.type-style('heading-01');
+
+  color: $text-secondary;
+  margin-block-end: $spacing-02;
+  @include font-weight('regular');
+}
+::slotted(.#{$block-notification-class}-title-unread) {
+  color: $text-secondary;
+  margin-block-end: $spacing-02;
+  @include font-weight('semibold');
+}
+
+:host(.first-notification)::before {
+  content: none;
+}
+
+:host(:hover),
+:host(:focus) {
+  background-color: $layer-accent-01;
+  .#{$block-notification-class}__dismiss-single-button {
+    opacity: 1;
+  }
+
+  &::before {
+    background-color: transparent;
+  }
+}
+
+:host(.#{$block-notification-class}--next) {
+  &::before {
+    background-color: transparent;
+  }
+}

package/scss/components/options-tile/options-tile.scss

@@ -0,0 +1,102 @@
+/*
+* Copyright IBM Corp. 2025, 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.
+*/
+
+$css--plex: true !default;
+
+@use 'sass:map';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/type';
+
+$prefix: 'c4p';
+$carbon-prefix: 'cds';
+$block-class: #{$prefix}--options-tile;
+
+:host(#{$prefix}-options-tile) {
+  .#{$block-class} {
+    background: $layer-01;
+    border-block-end: 1px solid $border-subtle-01;
+
+    ::marker,
+    ::-webkit-details-marker {
+      display: none;
+      content: '';
+    }
+
+    &__header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      block-size: $spacing-09;
+      cursor: pointer;
+      padding-inline: $spacing-05;
+      padding-inline-end: $spacing-05;
+
+      &:hover {
+        background: $background-hover;
+      }
+
+      &:focus {
+        outline: 2px solid $focus;
+        outline-offset: -2px;
+      }
+
+      &-left {
+        display: flex;
+        align-items: center;
+      }
+
+      &-right {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    &__title {
+      @include type.type-style('heading-compact-01');
+
+      &-block {
+        margin-inline-end: $spacing-05;
+        margin-inline-start: $spacing-05;
+      }
+    }
+
+    &__summary {
+      @include type.type-style('helper-text-01');
+
+      color: $text-secondary;
+    }
+
+    &__body {
+      padding-block-end: $spacing-06;
+      padding-block-start: $spacing-03;
+      padding-inline: $spacing-05;
+      padding-inline-start: $spacing-09;
+    }
+  }
+
+  .#{$block-class}--xl {
+    .#{$block-class}__header {
+      block-size: $spacing-10;
+    }
+
+    .#{$block-class}__summary {
+      margin-block-start: $spacing-01;
+    }
+  }
+
+  .#{$block-class}--open {
+    .#{$block-class}__chevron {
+      transform: rotate(-180deg);
+    }
+
+    .#{$block-class}__summary {
+      display: none;
+    }
+  }
+}

package/scss/components/page-header/_story-assets/_storybook-styles.scss

@@ -0,0 +1,35 @@
+//
+// Copyright IBM Corp. 2025, 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/spacing';
+
+.page-header--docs-demo .docs-story div:first-child {
+  padding: 0;
+}
+
+.tabs-demo {
+  block-size: 200vh;
+}
+
+.page-header--docs-demo .tabs-demo {
+  block-size: 100%;
+}
+
+#main-content main {
+  margin-block-start: spacing.$spacing-09;
+}
+
+.page-header--docs-demo .innerZoomElementWrapper > * {
+  /* Used to override storybook styling from a dynamically generated class in the canvas preview */
+  /* stylelint-disable-next-line declaration-no-important */
+  border: 0 !important;
+}
+
+.page-header--docs-demo .ui-shell--header {
+  /* stylelint-disable-next-line carbon/layout-use */
+  transform: translateY(-48px);
+}

package/scss/components/page-header/_story-assets/set-of-breadcrumbs.scss

@@ -0,0 +1,41 @@
+/*
+* Copyright IBM Corp. 2025, 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.
+*/
+
+$css--plex: true !default;
+
+/* Other Carbon settings. */
+@use 'sass:map';
+@use '@carbon/styles';
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/spacing' as *;
+
+$prefix: 'c4p';
+$carbon-prefix: 'cds';
+
+$block-class: #{$prefix}--set-of-breadcrumbs;
+
+:host {
+  display: block;
+  inline-size: 100%;
+
+  // Suppress custom elements until styles are loaded
+  #{$carbon-prefix}-breadcrumb:not(:defined),
+  #{$carbon-prefix}-overflow-menu:not(:defined) {
+    display: none;
+  }
+
+  /* stylelint-disable-next-line selector-type-no-unknown */
+  cds-breadcrumb-item {
+    flex: none;
+  }
+
+  [data-hidden]:not([data-fixed]) {
+    display: none;
+  }
+}