@carbon/web-components 2.0.0-alpha.0 → 2.0.0-beta.1

package/scss/components/checkbox/checkbox.scss

@@ -16,5 +16,13 @@ $css--plex: true !default;
   @extend .#{$prefix}--form-item;
   @extend .#{$prefix}--checkbox-wrapper;
 
-  outline: none;
+  &[readonly] {
+    @extend .#{$prefix}--checkbox-wrapper--readonly;
+  }
+}
+
+:host(#{$prefix}-checkbox-skeleton) {
+  .#{$prefix}--checkbox-label {
+    cursor: default;
+  }
 }

package/scss/components/combo-box/combo-box.scss

@@ -8,14 +8,17 @@
 $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/combo-box/combo-box';
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/text-input/text-input';
-@use '@carbon/styles/scss/colors';
+@use '../dropdown/dropdown.scss';
 
 :host(#{$prefix}-combo-box) {
+  @extend :host(#{$prefix}-dropdown);
+
   outline: none;
 
   .#{$prefix}--assistive-text {
@@ -24,10 +27,6 @@ $css--plex: true !default;
     top: -100%;
   }
 
-  .#{$prefix}--label[hidden] {
-    display: none;
-  }
-
   .#{$prefix}--list-box__field,
   // To get more specifity than:
   // https://github.com/carbon-design-system/carbon/blob/v10.16.0/packages/components/src/components/list-box/_list-box.scss#L126
@@ -36,20 +35,28 @@ $css--plex: true !default;
   }
 
   .#{$prefix}--list-box__menu {
+    outline: none;
     top: 100%;
     margin-top: 1px;
   }
-}
 
-:host(#{$prefix}-combo-box[type='inline']) {
-  @extend .#{$prefix}--list-box__wrapper--inline;
+  &[isClosable] {
+    .#{$prefix}--list-box__invalid-icon {
+      right: rem(66px) !important;
+    }
+  }
 
-  .#{$prefix}--list-box__field {
-    padding-left: 0;
+  &[disabled],
+  &[read-only] {
+    .#{$prefix}--list-box__selection {
+      pointer-events: none;
+    }
   }
 
-  .#{$prefix}--text-input {
-    border-bottom: none;
+  &[read-only] {
+    .#{$prefix}--list-box__selection svg {
+      fill: $icon-disabled;
+    }
   }
 }
 
@@ -59,47 +66,48 @@ $css--plex: true !default;
   display: block;
 
   .#{$prefix}--list-box__menu-item__option {
-    height: 100%;
+    height: auto;
   }
-}
-
-:host(#{$prefix}-combo-box-item[size='sm']) {
-  height: rem(32px);
 
-  .#{$prefix}--list-box__menu-item__option {
-    padding-top: rem(7px);
-    padding-bottom: rem(7px);
+  &[disabled] {
+    .#{$prefix}--list-box__menu-item__option {
+      color: $text-disabled;
+      text-decoration: none;
+    }
   }
-}
-
-:host(#{$prefix}-combo-box-item[size='xl']) {
-  height: rem(48px);
 
-  .#{$prefix}--list-box__menu-item__option {
-    padding-top: rem(15px);
-    padding-bottom: rem(15px);
+  &[highlighted] {
+    @extend .#{$prefix}--list-box__menu-item--highlighted;
   }
-}
 
-:host(#{$prefix}-combo-box-item[disabled])
-  .#{$prefix}--list-box__menu-item__option {
-  color: $text-disabled;
-  text-decoration: none;
-}
+  &[selected] {
+    @extend .#{$prefix}--list-box__menu-item--active;
+    @extend .#{$prefix}--list-box__menu-item--highlighted;
 
-:host(#{$prefix}-combo-box-item[highlighted]) {
-  @extend .#{$prefix}--list-box__menu-item--highlighted;
-}
+    .#{$prefix}--list-box__menu-item__option {
+      color: $text-primary;
+    }
 
-:host(#{$prefix}-combo-box-item[selected]) {
-  @extend .#{$prefix}--list-box__menu-item--active;
-  @extend .#{$prefix}--list-box__menu-item--highlighted;
+    .#{$prefix}--list-box__menu-item__selected-icon {
+      display: block;
+    }
+  }
 
-  .#{$prefix}--list-box__menu-item__option {
-    color: $text-primary;
+  &[size='sm'] {
+    height: $spacing-07;
+
+    .#{$prefix}--list-box__menu-item__option {
+      padding-top: rem(7px);
+      padding-bottom: rem(7px);
+    }
   }
 
-  .#{$prefix}--list-box__menu-item__selected-icon {
-    display: block;
+  &[size='lg'] {
+    height: $spacing-09;
+
+    .#{$prefix}--list-box__menu-item__option {
+      padding-top: rem(15px);
+      padding-bottom: rem(15px);
+    }
   }
 }

package/scss/components/copy-button/copy-button.scss

@@ -7,10 +7,30 @@
 
 $css--plex: true !default;
 
+@use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/keyframes' as *;
+@use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/components/copy-button/index';
 
 :host(#{$prefix}-copy-button) {
   display: inline-flex;
   outline: none;
 }
+
+.#{$prefix}--snippet__icon {
+  width: rem(16px);
+  height: rem(16px);
+  fill: $icon-primary;
+  transition: all $duration-fast-01 motion(standard, productive);
+}
+
+.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out {
+  // https://github.com/stylelint/stylelint/issues/2363
+  animation: $duration-fast-02 motion(standard, productive) hide-feedback;
+}
+
+.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-in {
+  animation: $duration-fast-02 motion(standard, productive) show-feedback;
+}

package/scss/components/date-picker/date-picker.scss

@@ -10,6 +10,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/colors' as *;
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/date-picker/date-picker' as *;
 
@@ -69,11 +70,15 @@ $css--plex: true !default;
   @extend .#{$prefix}--date-picker-container;
 
   outline: none;
-}
 
-:host(#{$prefix}-date-picker-input[color-scheme='light'])
-  .#{$prefix}--date-picker__input {
-  background: $field-02;
+  .#{$prefix}--form-requirement[hidden] {
+    display: none;
+  }
+}
+:host(#{$prefix}-date-picker-input[warn]) {
+  .#{$prefix}--form-requirement {
+    color: $text-primary;
+  }
 }
 
 :host(#{$prefix}-date-picker-input[kind='simple']),
@@ -81,13 +86,16 @@ $css--plex: true !default;
   .#{$prefix}--date-picker__input {
     width: rem(120px);
   }
+
+  .#{$prefix}--date-picker__input--invalid,
+  .#{$prefix}--date-picker__input--warn {
+    width: rem(152px);
+  }
 }
 
 /* stylelint-disable selector-pseudo-class-parentheses-space-inside */
-:host(#{$prefix}-date-picker-input[kind='simple'][size-horizontal='short']),
-:host(
-    #{$prefix}-date-picker-input-skeleton[kind='simple'][size-horizontal='short']
-  ) {
+:host(#{$prefix}-date-picker-input[kind='simple'][short]),
+:host(#{$prefix}-date-picker-input-skeleton[kind='simple'][short]) {
   .#{$prefix}--date-picker__input {
     width: rem(90px);
   }
@@ -119,12 +127,18 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-date-picker-input) ::slotted(.#{$prefix}--date-picker__icon) {
-  position: absolute;
-  right: 1rem;
-  fill: $icon-primary;
-  cursor: pointer;
-  z-index: 1;
+:host(#{$prefix}-date-picker-input) {
+  .#{$prefix}--date-picker__icon {
+    @extend .#{$prefix}--date-picker__icon;
+  }
+
+  .#{$prefix}--date-picker__icon--warn {
+    @extend .#{$prefix}--date-picker__icon--warn;
+  }
+
+  .#{$prefix}--date-picker__icon--invalid {
+    @extend .#{$prefix}--date-picker__icon--invalid;
+  }
 }
 
 :host(#{$prefix}-date-picker-input-skeleton) {

package/scss/components/dropdown/dropdown.scss

@@ -8,9 +8,11 @@
 $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/list-box/list-box' as *;
+@use '@carbon/styles/scss/components/dropdown' as *;
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/checkbox';
 @use '@carbon/styles/scss/components/tag';
@@ -34,11 +36,61 @@ $css--plex: true !default;
   .#{$prefix}--list-box__menu {
     top: 100%;
     margin-top: 1px;
+    outline: 1px solid $focus;
   }
-}
 
-:host(#{$prefix}-dropdown[type='inline']) {
-  @extend .#{$prefix}--list-box__wrapper--inline;
+  &[open] {
+    .#{$prefix}--list-box__field {
+      outline: none;
+    }
+  }
+
+  &[invalid] {
+    .#{$prefix}--list-box__field {
+      outline: none;
+    }
+
+    .#{$prefix}--form__helper-text {
+      color: $text-error;
+    }
+  }
+
+  &[read-only] {
+    @extend .#{$prefix}--dropdown--readonly;
+
+    .#{$prefix}--list-box {
+      background-color: transparent;
+      border-bottom-color: $border-subtle;
+    }
+  }
+
+  &[direction='top'] {
+    @extend .#{$prefix}--list-box--up;
+
+    .#{$prefix}--list-box__menu {
+      top: auto;
+    }
+  }
+
+  &[type='inline'] {
+    @extend .#{$prefix}--list-box__wrapper--inline;
+
+    grid-gap: 0 $spacing-06;
+
+    &[warn] {
+      .#{$prefix}--list-box__field {
+        padding-left: $spacing-05;
+        padding-right: calc(#{$spacing-08} + #{$spacing-05});
+      }
+    }
+
+    &[warn],
+    &[invalid] {
+      .#{$prefix}--form__helper-text {
+        grid-column: 2;
+      }
+    }
+  }
 }
 
 :host(#{$prefix}-dropdown-item) {
@@ -47,48 +99,49 @@ $css--plex: true !default;
   display: block;
 
   .#{$prefix}--list-box__menu-item__option {
-    height: 100%;
+    height: auto;
   }
-}
 
-:host(#{$prefix}-dropdown-item[size='sm']) {
-  height: rem(32px);
-
-  .#{$prefix}--list-box__menu-item__option {
-    padding-top: rem(7px);
-    padding-bottom: rem(7px);
+  &[highlighted] {
+    @extend .#{$prefix}--list-box__menu-item--highlighted;
   }
-}
-
-:host(#{$prefix}-dropdown-item[size='xl']) {
-  height: rem(48px);
 
-  .#{$prefix}--list-box__menu-item__option {
-    padding-top: rem(15px);
-    padding-bottom: rem(15px);
+  &[disabled] {
+    .#{$prefix}--list-box__menu-item__option {
+      color: $text-disabled;
+      text-decoration: none;
+    }
   }
-}
 
-:host(#{$prefix}-dropdown-item[disabled])
-  .#{$prefix}--list-box__menu-item__option {
-  color: $text-disabled;
-  text-decoration: none;
-}
+  &[selected] {
+    @extend .#{$prefix}--list-box__menu-item--active;
+    @extend .#{$prefix}--list-box__menu-item--highlighted;
 
-:host(#{$prefix}-dropdown-item[highlighted]) {
-  @extend .#{$prefix}--list-box__menu-item--highlighted;
-}
+    .#{$prefix}--list-box__menu-item__option {
+      color: $text-primary;
+    }
 
-:host(#{$prefix}-dropdown-item[selected]) {
-  @extend .#{$prefix}--list-box__menu-item--active;
-  @extend .#{$prefix}--list-box__menu-item--highlighted;
+    .#{$prefix}--list-box__menu-item__selected-icon {
+      display: block;
+    }
+  }
 
-  .#{$prefix}--list-box__menu-item__option {
-    color: $text-primary;
+  &[size='sm'] {
+    height: $spacing-07;
+
+    .#{$prefix}--list-box__menu-item__option {
+      padding-top: rem(7px);
+      padding-bottom: rem(7px);
+    }
   }
 
-  .#{$prefix}--list-box__menu-item__selected-icon {
-    display: block;
+  &[size='lg'] {
+    height: $spacing-09;
+
+    .#{$prefix}--list-box__menu-item__option {
+      padding-top: rem(15px);
+      padding-bottom: rem(15px);
+    }
   }
 }
 

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

@@ -0,0 +1,23 @@
+//
+// 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/layer' as *;
+@use '@carbon/styles/scss/config' as *;
+
+:host(#{$prefix}-layer) {
+  &[level='0'] {
+    @extend .#{$prefix}--layer-one;
+  }
+  &[level='1'] {
+    @extend .#{$prefix}--layer-two;
+  }
+  &[level='2'] {
+    @extend .#{$prefix}--layer-three;
+  }
+}

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;
+  }
+}