@carbon/web-components 2.0.0-beta.0 → 2.0.0-beta.2

package/scss/components/file-uploader/file-uploader.scss

@@ -27,40 +27,39 @@
 :host(#{$prefix}-file-uploader-item) {
   @extend .#{$prefix}--file__selected-file;
 
-  &[invalid] {
-    @extend .#{$prefix}--file__selected-file--invalid;
-
-    .#{$prefix}--form-requirement__title,
-    .#{$prefix}--form-requirement__supplement {
-      @include type-style('label-01');
+  .#{$prefix}--file-filename {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
 
-      padding: 0 $spacing-05;
-    }
+  .#{$prefix}--form-requirement[hidden] {
+    display: none;
+  }
 
-    .#{$prefix}--form-requirement {
-      color: $text-error;
-      display: block;
-    }
+  &[invalid] {
+    @extend .#{$prefix}--file__selected-file--invalid;
 
     .#{$prefix}--form-requirement__supplement {
-      color: $text-primary;
+      margin: 0;
     }
   }
 
-  &[size='lg'] {
-    min-height: $spacing-09;
+  &[size='md'] {
+    @extend .#{$prefix}--file__selected-file--md;
   }
 
   &[size='sm'] {
-    min-height: $spacing-07;
+    @extend .#{$prefix}--file__selected-file--sm;
   }
+}
 
-  // TODO: deprecate 'field' sizing
-  // &[size='field'] {
-  //   min-height: $container-03;
-  // }
+:host(#{$prefix}-file-uploader) {
+  .#{$prefix}--label-description,
+  .#{$prefix}--file--label {
+    margin-top: 0;
+  }
 
-  // &[size='sm'] {
-  //   min-height: $container-02;
-  // }
+  .#{$prefix}--file-container {
+    margin-top: $spacing-03;
+  }
 }

package/scss/components/icon-button/icon-button.scss

@@ -0,0 +1,14 @@
+//
+// Copyright IBM Corp. 2019, 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.
+//
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '../tooltip/tooltip';
+@use '../button/button';

package/scss/components/layer/layer.scss

@@ -9,14 +9,8 @@ $css--plex: true !default;
 
 @use '@carbon/styles/scss/layer' as *;
 @use '@carbon/styles/scss/config' as *;
-@use '@carbon/styles/scss/theme' as *;
 
 :host(#{$prefix}-layer) {
-  ::slotted(*) {
-    background: $layer;
-    color: $text-primary;
-  }
-
   &[level='0'] {
     @extend .#{$prefix}--layer-one;
   }

package/scss/components/list/list.scss

@@ -80,7 +80,6 @@ $css--plex: true !default;
 :host(#{$prefix}-list-item) {
   display: list-item;
   color: $text-primary;
-  margin-bottom: $spacing-02;
 
   &::before {
     // Workaround for https://bugs.webkit.org/show_bug.cgi?id=178237.
@@ -89,10 +88,6 @@ $css--plex: true !default;
     left: -$spacing-05;
     content: var(--#{$prefix}-ce--list-marker, none);
   }
-
-  .#{$prefix}-ce--list__item__nested-child {
-    padding-top: $spacing-02;
-  }
 }
 
 :host(#{$prefix}-list-item[nested]) {

package/scss/components/loading/loading.scss

@@ -13,6 +13,7 @@ $css--plex: true !default;
 
 :host(#{$prefix}-loading) {
   @extend .#{$prefix}--loading;
+  display: block;
 }
 
 :host(#{$prefix}-loading[overlay]) {

package/scss/components/modal/modal.scss

@@ -114,14 +114,14 @@
 
 :host(#{$prefix}-modal-footer) {
   .#{$prefix}--modal-footer--three-button {
-    ::slotted(#{$prefix}-btn),
+    ::slotted(#{$prefix}-button),
     ::slotted(#{$prefix}-modal-footer-button) {
       flex: 0 1 25%;
     }
   }
 }
 
-:host(#{$prefix}-modal-footer) ::slotted(#{$prefix}-btn),
+:host(#{$prefix}-modal-footer) ::slotted(#{$prefix}-button),
 :host(#{$prefix}-modal-footer-button) {
   flex: 0 1 50%;
   max-width: none;

package/scss/components/notification/actionable-notification.scss

@@ -0,0 +1,170 @@
+//
+// Copyright IBM Corp. 2019, 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.
+//
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/components/notification/index' as *;
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/button/mixins' as button-mixins;
+@use '@carbon/styles/scss/components/button/vars' as button-vars;
+
+@include actionable-notification;
+
+:host(#{$prefix}-actionable-notification) {
+  @extend .#{$prefix}--actionable-notification;
+
+  display: none;
+  outline: none;
+}
+
+:host(#{$prefix}-actionable-notification-button):not(
+    [low-contrast]
+  )[kind='tertiary']
+  button {
+  @include button-mixins.button-theme(
+    transparent,
+    $notification-action-tertiary-inverse,
+    $notification-action-tertiary-inverse,
+    $notification-action-tertiary-inverse-hover,
+    currentColor,
+    $notification-action-tertiary-inverse-active
+  );
+
+  &:focus {
+    border-color: $focus-inverse;
+    background-color: $notification-action-tertiary-inverse;
+    box-shadow: inset 0 0 0 button-vars.$button-outline-width $focus-inverse,
+      inset 0 0 0 button-vars.$button-border-width $background-inverse;
+    color: $notification-action-tertiary-inverse-text;
+  }
+
+  &:hover {
+    color: $notification-action-tertiary-inverse-text;
+  }
+
+  &:active {
+    border-color: transparent;
+    background-color: $notification-action-tertiary-inverse-active;
+    color: $notification-action-tertiary-inverse-text;
+  }
+}
+
+:host(#{$prefix}-actionable-notification-button)[low-contrast][kind='ghost']
+  button {
+  &:hover,
+  &:active {
+    background-color: $notification-action-hover;
+  }
+
+  &:focus {
+    outline-color: $focus;
+  }
+}
+
+:host(#{$prefix}-actionable-notification-button):not(
+    [low-contrast]
+  )[kind='ghost']
+  button {
+  color: $link-inverse;
+}
+
+:host(
+    #{$prefix}-actionable-notification-button
+  )[hide-close-button][kind='ghost']
+  button {
+  margin-right: $spacing-03;
+}
+
+:host(#{$prefix}-actionable-notification):not([inline]) {
+  @extend .#{$prefix}--actionable-notification--toast;
+}
+
+:host(#{$prefix}-actionable-notification[open]) {
+  display: flex;
+}
+
+:host(#{$prefix}-actionable-notification[hide-close-button])
+  .#{$prefix}--actionable-notification__close-button {
+  display: none;
+}
+
+:host(#{$prefix}-actionable-notification[kind='success']) {
+  @extend .#{$prefix}--actionable-notification--success;
+
+  &[low-contrast] {
+    @extend .#{$prefix}--actionable-notification--low-contrast,
+      .#{$prefix}--actionable-notification--success;
+  }
+}
+
+:host(#{$prefix}-actionable-notification[kind='info']) {
+  @extend .#{$prefix}--actionable-notification--info;
+
+  &[low-contrast] {
+    @extend .#{$prefix}--actionable-notification--low-contrast,
+      .#{$prefix}--actionable-notification--info;
+  }
+}
+
+:host(#{$prefix}-actionable-notification[kind='info-square']) {
+  @extend .#{$prefix}--actionable-notification--info-square;
+
+  &[low-contrast] {
+    @extend .#{$prefix}--actionable-notification--low-contrast,
+      .#{$prefix}--actionable-notification--info;
+  }
+}
+
+:host(#{$prefix}-actionable-notification[kind='warning']) {
+  @extend .#{$prefix}--actionable-notification--warning;
+
+  &[low-contrast] {
+    @extend .#{$prefix}--actionable-notification--low-contrast,
+      .#{$prefix}--actionable-notification--warning;
+  }
+
+  /* TODO: Remove this once the following issue with icon fill is resolved:
+  ** https://github.com/carbon-design-system/carbon/issues/13616
+  */
+  .#{$prefix}--inline-notification__icon path[data-icon-path='inner-path'] {
+    fill: $black-100;
+    opacity: 1;
+  }
+}
+
+:host(#{$prefix}-actionable-notification[kind='warning-alt']) {
+  @extend .#{$prefix}--actionable-notification--warning-alt;
+
+  &[low-contrast] {
+    @extend .#{$prefix}--actionable-notification--low-contrast,
+      .#{$prefix}--actionable-notification--warning;
+  }
+
+  /* TODO: Remove this once the following issue with icon fill is resolved:
+  ** https://github.com/carbon-design-system/carbon/issues/13616
+  */
+  .#{$prefix}--inline-notification__icon,
+  .#{$prefix}--toast-notification__icon {
+    path[data-icon-path='inner-path'] {
+      fill: $black-100;
+      opacity: 1;
+    }
+  }
+}
+
+:host(#{$prefix}-actionable-notification[kind='error']) {
+  @extend .#{$prefix}--actionable-notification--error;
+
+  &[low-contrast] {
+    @extend .#{$prefix}--actionable-notification--low-contrast,
+      .#{$prefix}--actionable-notification--error;
+  }
+}

package/scss/components/notification/inline-notification.scss

@@ -8,6 +8,7 @@
 $css--plex: true !default;
 
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/colors' as *;
 @use '@carbon/styles/scss/utilities/focus-outline' as *;
 @use '@carbon/styles/scss/components/notification/index' as *;
 @use '@carbon/styles/scss/components/button';
@@ -53,6 +54,15 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-inline-notification[kind='info-square']) {
+  @extend .#{$prefix}--inline-notification--info-square;
+
+  &[low-contrast] {
+    @extend .#{$prefix}--inline-notification--low-contrast,
+      .#{$prefix}--inline-notification--info-square;
+  }
+}
+
 :host(#{$prefix}-inline-notification[kind='warning']) {
   @extend .#{$prefix}--inline-notification--warning;
 
@@ -70,3 +80,19 @@ $css--plex: true !default;
       .#{$prefix}--inline-notification--error;
   }
 }
+
+:host(#{$prefix}-inline-notification[kind='warning-alt']) {
+  @extend .#{$prefix}--inline-notification--warning-alt;
+
+  &[low-contrast] {
+    @extend .#{$prefix}--inline-notification--low-contrast,
+      .#{$prefix}--inline-notification--warning-alt;
+  }
+
+  /* TODO: Remove this once the following issue with icon fill is resolved: 
+  ** https://github.com/carbon-design-system/carbon/issues/13616
+  */
+  .#{$prefix}--inline-notification__icon path[data-icon-path='inner-path'] {
+    fill: $black-100;
+  }
+}

package/scss/components/notification/toast-notification.scss

@@ -8,6 +8,7 @@
 $css--plex: true !default;
 
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/colors' as *;
 @use '@carbon/styles/scss/components/notification/index' as *;
 @use '@carbon/styles/scss/components/button';
 
@@ -48,6 +49,15 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-toast-notification[kind='info-square']) {
+  @extend .#{$prefix}--toast-notification--info-square;
+
+  &[low-contrast] {
+    @extend .#{$prefix}--toast-notification--low-contrast,
+      .#{$prefix}--toast-notification--info;
+  }
+}
+
 :host(#{$prefix}-toast-notification[kind='warning']) {
   @extend .#{$prefix}--toast-notification--warning;
 
@@ -57,6 +67,22 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-toast-notification[kind='warning-alt']) {
+  @extend .#{$prefix}--toast-notification--warning-alt;
+
+  &[low-contrast] {
+    @extend .#{$prefix}--toast-notification--low-contrast,
+      .#{$prefix}--toast-notification--warning;
+  }
+
+  /* TODO: Remove this once the following issue with icon fill is resolved: 
+  ** https://github.com/carbon-design-system/carbon/issues/13616
+  */
+  .#{$prefix}--toast-notification__icon path[data-icon-path='inner-path'] {
+    fill: $black-100;
+  }
+}
+
 :host(#{$prefix}-toast-notification[kind='error']) {
   @extend .#{$prefix}--toast-notification--error;
 

package/scss/components/number-input/number-input.scss

@@ -8,6 +8,8 @@
 $css--plex: true !default;
 
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities';
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/number-input/index';
 
@@ -21,3 +23,14 @@ $css--plex: true !default;
     display: none;
   }
 }
+
+.#{$prefix}--number__invalid
+  ~ .#{$prefix}--number__controls
+  .#{$prefix}--number__rule-divider:first-of-type,
+.#{$prefix}--number
+  .#{$prefix}--number__invalid
+  ~ input[type='number']:disabled
+  + .#{$prefix}--number__controls
+  .#{$prefix}--number__rule-divider:first-of-type {
+  background-color: $border-subtle;
+}

package/scss/components/popover/popover.scss

@@ -0,0 +1,122 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 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.
+ */
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/custom-property';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/components/popover';
+
+:host(#{$prefix}-tooltip[highContrast]),
+:host(#{$prefix}-popover[highContrast]) {
+  ::slotted(#{$prefix}-tooltip-content),
+  ::slotted(#{$prefix}-popover-content) {
+    @extend .#{$prefix}--popover;
+  }
+}
+
+:host(#{$prefix}-popover[tabTip][open]) {
+  ::slotted(.#{$prefix}--popover--tab-tip__button) {
+    background: theme.$layer !important; /* stylelint-disable-line declaration-no-important */
+    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+  }
+}
+
+:host(#{$prefix}-tooltip-content),
+:host(#{$prefix}-popover-content) {
+  @extend .#{$prefix}--popover;
+}
+
+:host(#{$prefix}-tooltip-content[open]),
+:host(#{$prefix}-popover-content[open]) {
+  .#{$prefix}--popover-content {
+    display: block;
+  }
+
+  &[tabTip] {
+    .#{$prefix}--popover-content {
+      border-radius: 0;
+      background: theme.$layer;
+    }
+  }
+  &[caret] {
+    .#{$prefix}--popover-caret {
+      display: block;
+    }
+  }
+}
+
+:host(#{$prefix}-popover-content[dropShadow]) {
+  @include custom-property.declaration(
+    'popover-drop-shadow',
+    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2))
+  );
+}
+
+:host(#{$prefix}-tooltip-content[align='bottom']),
+:host(#{$prefix}-popover-content[align='bottom']) {
+  @extend .#{$prefix}--popover--bottom;
+}
+
+:host(#{$prefix}-tooltip-content[align='bottom-left']),
+:host(#{$prefix}-popover-content[align='bottom-left']) {
+  @extend .#{$prefix}--popover--bottom-left;
+}
+
+:host(#{$prefix}-tooltip-content[align='bottom-right']),
+:host(#{$prefix}-popover-content[align='bottom-right']) {
+  @extend .#{$prefix}--popover--bottom-right;
+}
+
+:host(#{$prefix}-tooltip-content[align='left']),
+:host(#{$prefix}-popover-content[align='left']) {
+  @extend .#{$prefix}--popover--left;
+}
+
+:host(#{$prefix}-tooltip-content[align='left-bottom']),
+:host(#{$prefix}-popover-content[align='left-bottom']) {
+  @extend .#{$prefix}--popover--left-bottom;
+}
+
+:host(#{$prefix}-tooltip-content[align='left-top']),
+:host(#{$prefix}-popover-content[align='left-top']) {
+  @extend .#{$prefix}--popover--left-top;
+}
+
+:host(#{$prefix}-tooltip-content[align='right']),
+:host(#{$prefix}-popover-content[align='right']) {
+  @extend .#{$prefix}--popover--right;
+}
+
+:host(#{$prefix}-tooltip-content[align='right-bottom']),
+:host(#{$prefix}-popover-content[align='right-bottom']) {
+  @extend .#{$prefix}--popover--right-bottom;
+}
+
+:host(#{$prefix}-tooltip-content[align='right-top']),
+:host(#{$prefix}-popover-content[align='right-top']) {
+  @extend .#{$prefix}--popover--right-top;
+}
+
+:host(#{$prefix}-tooltip-content[align='top']),
+:host(#{$prefix}-popover-content[align='top']) {
+  @extend .#{$prefix}--popover--top;
+}
+
+:host(#{$prefix}-tooltip-content[align='top-left']),
+:host(#{$prefix}-popover-content[align='top-left']) {
+  @extend .#{$prefix}--popover--top-left;
+}
+
+:host(#{$prefix}-tooltip-content[align='top-right']),
+:host(#{$prefix}-popover-content[align='top-right']) {
+  @extend .#{$prefix}--popover--top-right;
+}

package/scss/components/progress-bar/progress-bar.scss

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 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.
+//
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/components/progress-bar' as *;

package/scss/components/search/search.scss

@@ -8,6 +8,8 @@
 $css--plex: true !default;
 
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/search' as *;
@@ -15,35 +17,51 @@ $css--plex: true !default;
 // https://github.com/carbon-design-system/carbon/issues/11408
 @include search;
 
-:host(#{$prefix}-search),
-:host(#{$prefix}-search-skeleton) {
-  @extend .#{$prefix}--search--lg;
-}
-
 :host(#{$prefix}-search) {
   @extend .#{$prefix}--search;
 
   outline: none;
-}
 
-:host(#{$prefix}-search[size='sm']),
-:host(#{$prefix}-search-skeleton[size='sm']) {
-  @extend .#{$prefix}--search--sm;
-}
+  &[expandable] {
+    @extend .#{$prefix}--search--expandable;
 
-:host(#{$prefix}-search[size='lg']),
-:host(#{$prefix}-search-skeleton[size='lg']) {
-  @extend .#{$prefix}--search--lg;
-}
+    &[expanded] {
+      @extend .#{$prefix}--search--expanded;
 
-// TODO: deprecate
-// :host(#{$prefix}-search[size='xl']),
-// :host(#{$prefix}-search-skeleton[size='xl']) {
-//   @extend .#{$prefix}--search--xl;
-// }
+      &[size='sm'] {
+        .#{$prefix}--search-input {
+          padding: 0 $spacing-07;
+        }
+      }
+
+      &[size='md'] {
+        .#{$prefix}--search-input {
+          padding: 0 $spacing-08;
+        }
+      }
+
+      &[size='lg'] {
+        .#{$prefix}--search-input {
+          padding: 0 $spacing-09;
+        }
+      }
+    }
+  }
+
+  &[disabled] {
+    svg {
+      fill: $icon-on-color-disabled;
+    }
 
-:host(#{$prefix}-search[color-scheme='light']) {
-  @extend .#{$prefix}--search--light;
+    .#{$prefix}--search-close {
+      pointer-events: none;
+      outline: none;
+
+      &::before {
+        background: none;
+      }
+    }
+  }
 }
 
 :host(#{$prefix}-search-skeleton) {
@@ -59,3 +77,18 @@ $css--plex: true !default;
     }
   }
 }
+
+:host(#{$prefix}-search),
+:host(#{$prefix}-search-skeleton) {
+  &[size='sm'] {
+    @extend .#{$prefix}--search--sm;
+  }
+
+  &[size='md'] {
+    @extend .#{$prefix}--search--md;
+  }
+
+  &[size='lg'] {
+    @extend .#{$prefix}--search--lg;
+  }
+}

package/scss/components/select/select.scss

@@ -15,10 +15,6 @@ $css--plex: true !default;
 
   outline: none;
 
-  &[color-scheme='light'] {
-    @extend .#{$prefix}--select--light;
-  }
-
   &[disabled] {
     @extend .#{$prefix}--select--disabled;
   }
@@ -26,4 +22,24 @@ $css--plex: true !default;
   &[invalid] {
     @extend .#{$prefix}--select--invalid;
   }
+
+  &[readonly] select {
+    pointer-events: none;
+  }
+
+  &[inline][warn] {
+    .#{$prefix}--form__helper-text,
+    .#{$prefix}--label {
+      align-self: flex-start;
+      margin-top: 0.8125rem;
+    }
+
+    select {
+      padding-right: 3.5rem;
+    }
+
+    .#{$prefix}--select__invalid-icon--warning {
+      right: 2rem;
+    }
+  }
 }