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

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

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

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

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

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

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

@@ -1,41 +0,0 @@
-/*
-* 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;
-  }
-}

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

@@ -1,96 +0,0 @@
-/*
-* 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.
-*/
-
-/* stylelint-disable  */
-
-$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-tags;
-
-:host {
-  inline-size: 100%;
-  .#{$block-class} {
-    display: flex;
-    // Spacing between tags.
-    gap: $spacing-03;
-    box-sizing: border-box;
-    justify-content: flex-end;
-    inline-size: 100%;
-    white-space: nowrap;
-
-    &__popover-container {
-      padding: $spacing-05;
-
-      .#{$block-class}__popover-tag {
-        @include type.type-style('label-02');
-
-        margin: 0;
-      }
-
-      cds-dismissible-tag {
-        margin: $spacing-01 0;
-      }
-    }
-
-    &__view-all {
-      --#{$carbon-prefix}-link-text-color: var(
-        --#{$carbon-prefix}-link-inverse
-      );
-      --#{$carbon-prefix}-link-hover-text-color: var(
-        --#{$carbon-prefix}-link-inverse-hover
-      );
-      --#{$carbon-prefix}-link-visited-text-color: var(
-        --#{$carbon-prefix}-link-inverse-visited
-      );
-      --#{$carbon-prefix}-link-focus-text-color: var(
-        --#{$carbon-prefix}-focus-inverse
-      );
-      margin-top: $spacing-03;
-      display: block;
-    }
-
-    &__modal-tags-search {
-      margin-block-start: $spacing-05;
-    }
-
-    &__modal-tags-container {
-      cds-dismissible-tag {
-        margin: $spacing-02 $spacing-03 $spacing-02 0;
-      }
-    }
-  }
-
-  // Suppress custom elements until styles are loaded
-  #{$carbon-prefix}-tag:not(:defined),
-  #{$carbon-prefix}-dismissible-tag:not(:defined),
-  #{$carbon-prefix}-operational-tag:not(:defined) {
-    display: none;
-  }
-
-  cds-modal-header {
-    padding-inline: $spacing-05;
-  }
-
-  cds-modal-body {
-    @extend .#{$carbon-prefix}--modal-scroll-content;
-
-    cds-tag {
-      margin-inline-start: 0;
-    }
-  }
-}