@carbon/web-components 2.0.1 → 2.0.2-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/web-components",
-  "version": "2.0.1",
+  "version": "2.0.2-rc.1",
   "publishConfig": {
     "access": "public"
   },
@@ -11,11 +11,12 @@
   "main": "es/index.js",
   "module": "es/index.js",
   "exports": {
-    "./es/components-react/": {
-      "node": "./lib/components-react-node/",
-      "default": "./es/components-react/"
+    "./es/components-react/*": {
+      "node": "./lib/components-react-node/*",
+      "default": "./es/components-react/*"
     },
     "./es/components/*": {
+      "node": "./lib/components/*",
       "default": "./es/components/*"
     },
     "./es/globals/": {
@@ -26,6 +27,7 @@
     "./es/": "./es/",
     "./lib/": "./lib/",
     "./dist/": "./dist/",
+    "./scss/": "./scss/",
     "./custom-elements.json": "./custom-elements.json",
     "./package.json": "./package.json"
   },
@@ -69,29 +71,28 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@carbon/styles": "^1.35.0",
+    "@carbon/styles": "^1.44.0",
     "flatpickr": "4.6.1",
     "lit": "^2.7.6",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
     "@babel/core": "~7.12.0",
-    "@babel/plugin-proposal-class-properties": "~7.12.0",
     "@babel/plugin-proposal-decorators": "~7.12.0",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "~7.12.0",
-    "@babel/plugin-proposal-object-rest-spread": "~7.12.0",
-    "@babel/plugin-proposal-optional-chaining": "~7.12.0",
-    "@babel/plugin-syntax-decorators": "~7.12.0",
+    "@babel/plugin-transform-class-properties": "~7.22.5",
     "@babel/plugin-transform-modules-commonjs": "~7.12.0",
+    "@babel/plugin-transform-nullish-coalescing-operator": "~7.22.11",
+    "@babel/plugin-transform-object-rest-spread": "~7.22.15",
+    "@babel/plugin-transform-optional-chaining": "~7.23.0",
     "@babel/plugin-transform-runtime": "7.18.5",
     "@babel/plugin-transform-template-literals": "~7.12.0",
     "@babel/plugin-transform-typescript": "~7.12.0",
-    "@babel/preset-env": "~7.12.0",
+    "@babel/preset-env": "~7.23.2",
     "@babel/preset-modules": "^0.1.5",
     "@babel/template": "~7.12.0",
-    "@babel/traverse": "~7.12.0",
-    "@carbon/icon-helpers": "^10.44.0",
-    "@carbon/icons": "^11.24.0",
+    "@babel/traverse": "~7.23.0",
+    "@carbon/icon-helpers": "^10.45.1",
+    "@carbon/icons": "^11.31.0",
     "@open-wc/semantic-dom-diff": "~0.18.0",
     "@percy-io/in-percy": "^0.1.11",
     "@percy/cli": "^1.8.1",
@@ -193,7 +194,7 @@
     "rollup": "^2.55.1",
     "rollup-plugin-multi-input": "^1.3.1",
     "rtlcss": "^3.0.0",
-    "sass": "~1.62.0",
+    "sass": "~1.69.0",
     "sass-loader": "^10.0.0",
     "strip-comments": "^1.0.0",
     "style-loader": "^2.0.0",
@@ -202,12 +203,12 @@
     "through2": "^3.0.0",
     "ts-loader": "^6.0.0",
     "tsickle": "~0.46.0",
-    "typescript": "~4.8.0",
+    "typescript": "^5.2.2",
     "use-debounce": "^3.2.0",
     "web-component-analyzer": "1.2.0-next.0",
     "webpack": "^4.46.0",
     "webpack-dev-server": "^4.0.0",
-    "zone.js": "~0.13.0"
+    "zone.js": "~0.14.0"
   },
   "typings": "es/index.d.ts"
 }

package/scss/components/breadcrumb/breadcrumb.scss

@@ -55,8 +55,8 @@ $css--plex: true !default;
   // Used to mimic link underline
   ::after {
     position: absolute;
-    bottom: 2px;
-    width: rem(12px);
+    bottom: $spacing-01;
+    width: $spacing-04;
     height: 1px;
     background: $link-primary-hover;
     content: '';

package/scss/components/button/button.scss

@@ -53,8 +53,8 @@ $css--plex: true !default;
     transition: none;
 
     &:focus {
-      outline: 2px solid $focus;
-      outline-offset: -2px;
+      outline: $spacing-01 solid $focus;
+      outline-offset: -#{$spacing-01};
       box-shadow: none;
       border-left: 1px solid transparent;
     }
@@ -79,7 +79,7 @@ $css--plex: true !default;
     padding: $button-padding-ghost;
 
     &:focus {
-      outline: 2px solid $layer;
+      outline: $spacing-01 solid $layer;
       outline-offset: -#{$spacing-01};
     }
   }

package/scss/components/code-snippet/code-snippet.scss

@@ -92,7 +92,7 @@ $css--plex: true !default;
     position: absolute;
     top: 0;
     right: 0;
-    width: rem(16px);
+    width: $spacing-05;
     height: 100%;
     background-image: linear-gradient(to right, transparent, $layer);
     content: '';
@@ -112,8 +112,8 @@ $css--plex: true !default;
 
   #{$prefix}-copy-button {
     position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
+    top: $spacing-03;
+    right: $spacing-03;
   }
 }
 
@@ -146,9 +146,9 @@ $css--plex: true !default;
     @include skeleton;
 
     width: 100%;
-    height: 1rem;
+    height: $spacing-05;
     display: block;
-    margin-top: 0.5rem;
+    margin-top: $spacing-03;
 
     &:first-child {
       margin: 0;

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

@@ -11,13 +11,16 @@ $css--plex: true !default;
 @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/utilities/convert' as *;
+@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/components/combo-box' as *;
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/text-input/text-input';
 @use '../dropdown/dropdown.scss';
 
 :host(#{$prefix}-combo-box) {
   @extend :host(#{$prefix}-dropdown);
+  @include emit-layout-tokens();
 
   outline: none;
 
@@ -27,6 +30,10 @@ $css--plex: true !default;
     top: -100%;
   }
 
+  .#{$prefix}--list-box__field {
+    padding: 0;
+  }
+
   .#{$prefix}--list-box__menu {
     outline: none;
     top: 100%;
@@ -47,6 +54,12 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-combo-box[invalid]) {
+  .#{$prefix}--form__helper-text {
+    color: $text-error;
+  }
+}
+
 :host(#{$prefix}-combo-box[read-only]) {
   .#{$prefix}--list-box__selection svg {
     fill: $icon-disabled;
@@ -61,6 +74,10 @@ $css--plex: true !default;
   .#{$prefix}--list-box__menu-item__option {
     height: auto;
   }
+
+  &:hover {
+    background-color: $layer-hover;
+  }
 }
 
 :host(#{$prefix}-combo-box-item[disabled]) {
@@ -104,3 +121,47 @@ $css--plex: true !default;
     padding-bottom: rem(15px);
   }
 }
+
+:host(#{$prefix}-combo-box[slug]) {
+  @extend .#{$prefix}--list-box__wrapper--slug;
+
+  .#{$prefix}--list-box__field {
+    padding: 0;
+  }
+
+  ::slotted(#{$prefix}-slug) {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: $spacing-08;
+  }
+
+  ::slotted(#{$prefix}-slug:not([revert-active])) {
+    transform: translateY(-50%);
+  }
+}
+
+:host(#{$prefix}-combo-box[slug][isclosable]) {
+  ::slotted(#{$prefix}-slug) {
+    inset-inline-end: $spacing-10;
+  }
+}
+
+:host(#{$prefix}-combo-box[warn]),
+:host(#{$prefix}-combo-box[invalid]) {
+  ::slotted(#{$prefix}-slug) {
+    inset-inline-end: $spacing-10;
+  }
+}
+
+:host(#{$prefix}-combo-box[slug][isclosable]) {
+  ::slotted(#{$prefix}-slug) {
+    inset-inline-end: $spacing-10;
+  }
+}
+
+:host(#{$prefix}-combo-box[warn][isclosable]),
+:host(#{$prefix}-combo-box[invalid][isclosable]) {
+  ::slotted(#{$prefix}-slug) {
+    inset-inline-end: to-rem(88px);
+  }
+}

package/scss/components/content-switcher/content-switcher.scss

@@ -8,6 +8,7 @@
 $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/convert' as *;
 @use '@carbon/styles/scss/components/content-switcher/content-switcher' as *;
@@ -41,7 +42,7 @@ $css--plex: true !default;
     height: 100%;
     width: 100%;
     align-items: center;
-    padding: 0.5rem var(--cds-layout-density-padding-inline-local);
+    padding: $spacing-03 var(--cds-layout-density-padding-inline-local);
 
     &:first-child,
     &:last-child {
@@ -53,7 +54,7 @@ $css--plex: true !default;
     &::before {
       content: '';
       display: block;
-      height: rem(16px);
+      height: $spacing-05;
       width: rem(1px);
       background-color: $border-subtle;
       position: absolute;
@@ -82,7 +83,7 @@ $css--plex: true !default;
   .#{$prefix}--content-switcher-btn {
     padding-left: rem(11px);
     padding-right: rem(11px);
-    height: rem(40px);
+    height: $spacing-08;
   }
 
   .#{$prefix}--content-switcher__label {
@@ -98,8 +99,8 @@ $css--plex: true !default;
 
 :host(#{$prefix}-content-switcher-item:first-of-type)
   .#{$prefix}--content-switcher-btn {
-  border-top-left-radius: rem(4px);
-  border-bottom-left-radius: rem(4px);
+  border-top-left-radius: $spacing-02;
+  border-bottom-left-radius: $spacing-02;
   border-left: rem(1px) solid $border-inverse;
 
   &::before {
@@ -109,7 +110,7 @@ $css--plex: true !default;
 
 :host(#{$prefix}-content-switcher-item:last-of-type)
   .#{$prefix}--content-switcher-btn {
-  border-top-right-radius: rem(4px);
-  border-bottom-right-radius: rem(4px);
+  border-top-right-radius: $spacing-02;
+  border-bottom-right-radius: $spacing-02;
   border-right: rem(1px) solid $border-inverse;
 }

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

@@ -12,6 +12,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/utilities/keyframes' as *;
 @use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/components/button';
 @use '@carbon/styles/scss/components/tooltip';
 @use '@carbon/styles/scss/components/code-snippet/code-snippet' as *;
@@ -28,8 +29,8 @@ $css--plex: true !default;
 }
 
 .#{$prefix}--snippet__icon {
-  width: rem(16px);
-  height: rem(16px);
+  width: $spacing-05;
+  height: $spacing-05;
   fill: $icon-primary;
   transition: all $duration-fast-01 motion(standard, productive);
 }

package/scss/components/data-table/_table-action.scss

@@ -41,7 +41,7 @@
 
 :host(#{$prefix}-table-toolbar-content[has-batch-actions]) {
   clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
-  transform: translate3d(0, 48px, 0);
+  transform: translate3d(0, $spacing-09, 0);
   transition: transform $duration-fast-02 motion(standard, productive),
     clip-path $duration-fast-02 motion(standard, productive);
 }

package/scss/components/data-table/_table-sizes.scss

@@ -21,8 +21,8 @@
   }
 
   ::slotted(#{$prefix}-table-cell) {
-    padding-top: rem(2px);
-    padding-bottom: rem(2px);
+    padding-top: $spacing-01;
+    padding-bottom: $spacing-01;
     padding-left: $spacing-05;
   }
 
@@ -122,7 +122,7 @@
 :host(#{$prefix}-table-header-row[size='xl']),
 :host(#{$prefix}-table-row[size='xl']) {
   ::slotted(#{$prefix}-table-cell) {
-    padding-top: rem(16px);
+    padding-top: $spacing-05;
   }
 
   .#{$prefix}--table-expand {
@@ -162,7 +162,7 @@
   }
   ::slotted(#{$prefix}-table-toolbar-search),
   ::slotted(#{$prefix}-overflow-menu) {
-    width: 2rem;
+    width: $spacing-07;
   }
 }
 
@@ -178,7 +178,7 @@
 
   ::slotted(#{$prefix}-table-toolbar-search),
   ::slotted(#{$prefix}-overflow-menu) {
-    width: 2rem;
+    width: $spacing-07;
   }
 }
 

package/scss/components/data-table/_table-sort.scss

@@ -16,7 +16,7 @@
 
 :host(#{$prefix}-table-header-row)
   ::slotted(#{$prefix}-table-header-cell[sort-direction]) {
-  height: rem(48px);
+  height: $spacing-09;
   padding-left: 0;
   padding-right: 0;
 }

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

@@ -11,6 +11,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/date-picker/date-picker' as *;
 
@@ -151,3 +152,15 @@ $css--plex: true !default;
     height: rem(14px);
   }
 }
+
+:host(#{$prefix}-date-picker-input) {
+  ::slotted(#{$prefix}-slug) {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: $spacing-08;
+  }
+
+  ::slotted(#{$prefix}-slug:not([revert-active])) {
+    transform: translateY(-50%);
+  }
+}

package/scss/components/dropdown/dropdown.scss

@@ -11,15 +11,12 @@ $css--plex: true !default;
 @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/list-box/list-box';
 @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';
 
-// https://github.com/carbon-design-system/carbon/issues/11408
-@include list-box;
-
 :host(#{$prefix}-dropdown) {
   outline: none;
 
@@ -152,3 +149,30 @@ $css--plex: true !default;
     @include skeleton;
   }
 }
+
+:host(#{$prefix}-dropdown[slug]) {
+  @extend .#{$prefix}--list-box__wrapper--slug;
+
+  ::slotted(#{$prefix}-slug) {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: $spacing-08;
+  }
+
+  ::slotted(#{$prefix}-slug:not([revert-active])) {
+    transform: translateY(-50%);
+  }
+}
+
+:host(#{$prefix}-dropdown[slug][warn]),
+:host(#{$prefix}-dropdown[slug][invalid]) {
+  .#{$prefix}--list-box {
+    .#{$prefix}--list-box__field {
+      padding-inline-end: $spacing-12;
+    }
+  }
+
+  ::slotted(#{$prefix}-slug) {
+    inset-inline-end: $spacing-10;
+  }
+}

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

@@ -11,9 +11,14 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/theme' as *;
 @use '../tooltip/tooltip';
 @use '../button/button';
 
 :host(#{$prefix}-icon-button) {
   @include emit-layout-tokens();
 }
+
+:host(#{$prefix}-icon-button[kind='ghost']) ::slotted([slot='icon']) {
+  color: $icon-primary;
+}

package/scss/components/list/list.scss

@@ -16,7 +16,7 @@ $css--plex: true !default;
 :host(#{$prefix}-ordered-list),
 :host(#{$prefix}-unordered-list) {
   .#{$prefix}--list--nested {
-    margin-left: rem(32px);
+    margin-left: $spacing-07;
   }
 
   .#{$prefix}--list--nested ::slotted(#{$prefix}-list-item) {

package/scss/components/modal/modal.scss

@@ -18,7 +18,20 @@
 
 :host(#{$prefix}-modal[open]) {
   @extend .#{$prefix}--modal;
-  @extend .is-visible;
+
+  opacity: 1;
+  transition: opacity $duration-moderate-02 motion(entrance, expressive),
+    visibility 0ms linear;
+  visibility: inherit;
+
+  .#{$prefix}--modal-container {
+    transform: translate3d(0, 0, 0);
+    transition: transform $duration-moderate-02 motion(entrance, expressive);
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 
 :host(#{$prefix}-modal) {
@@ -103,8 +116,8 @@
     width: 100%;
     max-width: none;
 
-    padding-top: rem(16px);
-    padding-bottom: rem(32px);
+    padding-top: $spacing-05;
+    padding-bottom: $spacing-07;
     box-shadow: rem(-1px) 0 0 0 $button-separator;
 
     &:focus {
@@ -119,6 +132,6 @@
   flex: 0 1 50%;
   max-width: none;
   width: 50%;
-  height: rem(64px);
+  height: $spacing-10;
   margin: 0;
 }

package/scss/components/multi-select/multi-select.scss

@@ -55,8 +55,8 @@ $css--plex: true !default;
 
 :host(#{$prefix}-multi-select[filterable])
   .#{$prefix}--list-box__field:focus-within {
-  outline: 2px solid $focus;
-  outline-offset: -2px;
+  outline: $spacing-01 solid $focus;
+  outline-offset: -#{$spacing-01};
 }
 
 :host(#{$prefix}-multi-select[direction='top']) {
@@ -163,3 +163,30 @@ $css--plex: true !default;
     color: $text-primary;
   }
 }
+
+:host(#{$prefix}-multi-select[slug]) {
+  @extend .#{$prefix}--list-box__wrapper--slug;
+
+  ::slotted(#{$prefix}-slug) {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: $spacing-08;
+  }
+
+  ::slotted(#{$prefix}-slug:not([revert-active])) {
+    transform: translateY(-50%);
+  }
+}
+
+:host(#{$prefix}-multi-select[slug][warn]),
+:host(#{$prefix}-multi-select[slug][invalid]) {
+  .#{$prefix}--list-box {
+    .#{$prefix}--list-box__field {
+      padding-inline-end: $spacing-12;
+    }
+  }
+
+  ::slotted(#{$prefix}-slug) {
+    inset-inline-end: $spacing-10;
+  }
+}

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

@@ -29,6 +29,11 @@ $css--plex: true !default;
   .#{$prefix}--inline-notification__close-button:focus {
     @include focus-outline('outline');
   }
+
+  .#{$prefix}--inline-notification__title {
+    margin-block-start: 0;
+    margin-block-end: 0;
+  }
 }
 
 :host(#{$prefix}-inline-notification[low-contrast])::before {
@@ -107,7 +112,7 @@ $css--plex: true !default;
       .#{$prefix}--inline-notification--warning-alt;
   }
 
-  /* TODO: Remove this once the following issue with icon fill is resolved: 
+  /* 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'] {

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

@@ -9,6 +9,7 @@ $css--plex: true !default;
 
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/utilities';
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/number-input/index';
@@ -34,3 +35,21 @@ $css--plex: true !default;
   .#{$prefix}--number__rule-divider:first-of-type {
   background-color: $border-subtle;
 }
+
+:host(#{$prefix}-number-input) {
+  ::slotted(#{$prefix}-slug) {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: 5.5rem;
+  }
+  ::slotted(#{$prefix}-slug:not([revert-active])) {
+    transform: translateY(-50%);
+  }
+}
+:host(#{$prefix}-number-input) .#{$prefix}--number[data-invalid],
+:host(#{$prefix}-number-input[warn]),
+:host(#{$prefix}-number-input[invalid]) {
+  ::slotted(#{$prefix}-slug) {
+    inset-inline-end: to-rem(120px);
+  }
+}

package/scss/components/overflow-menu/overflow-menu.scss

@@ -54,7 +54,7 @@ $css--plex: true !default;
 :host(#{$prefix}-breadcrumb-overflow-menu[open]) {
   background-color: $layer-01;
   transition: none;
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
+  box-shadow: 0 $spacing-01 6px 0 rgba(0, 0, 0, 0.3);
 
   :hover {
     background-color: $layer;

package/scss/components/pagination/pagination.scss

@@ -23,7 +23,7 @@ $css--plex: true !default;
 
   .#{$prefix}-ce--pagination__divider {
     height: 100%;
-    width: rem(1px);
+    width: to-rem(1px);
     background-color: $layer-accent-01;
   }