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

package/scss/components/breadcrumb/breadcrumb.scss

@@ -14,11 +14,13 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/components/breadcrumb';
 @import '../overflow-menu/overflow-menu';
 
-:host(#{$prefix}-breadcrumb) {
+:host(#{$prefix}-breadcrumb),
+:host(#{$prefix}-breadcrumb-skeleton) {
   @extend .#{$prefix}--breadcrumb;
 }
 
-:host(#{$prefix}-breadcrumb-item) {
+:host(#{$prefix}-breadcrumb-item),
+:host(#{$prefix}-breadcrumb-item-skeleton) {
   @extend .#{$prefix}--breadcrumb-item;
 }
 
@@ -66,7 +68,8 @@ $css--plex: true !default;
   fill: $link-primary-hover;
 }
 
-:host(#{$prefix}-breadcrumb-item:last-of-type)::after {
+:host(#{$prefix}-breadcrumb[no-trailing-slash])
+  ::slotted(#{$prefix}-breadcrumb-item:last-of-type)::after {
   content: '';
 }
 

package/scss/components/button/button.scss

@@ -10,52 +10,34 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/popover/index';
+@use '@carbon/styles/scss/components/tooltip';
 
 :host(#{$prefix}-btn),
 :host(#{$prefix}-modal-footer-button) {
   display: inline-flex;
-  max-width: rem(320px);
-  outline: none;
-
-  .#{$prefix}--btn {
-    flex-grow: 1;
-    max-width: 100%;
-  }
-
-  ::slotted([slot='icon']) {
-    fill: currentColor;
-    position: absolute;
-    right: rem(16px);
-    flex-shrink: 0;
-  }
 
   &[isExpressive] ::slotted([slot='icon']) {
     width: rem(20px);
     height: rem(20px);
   }
-
-  &[icon-layout='condensed'] .#{$prefix}--btn {
-    padding-right: rem(39px);
-  }
-
-  .#{$prefix}--btn--icon-only ::slotted([slot='icon']) {
-    position: static;
-  }
-
-  &[kind='ghost'],
-  &[kind='danger-ghost'] {
-    ::slotted([slot='icon']) {
-      position: static;
-      margin-left: rem(8px);
-    }
-
-    &[icon-layout='condensed'] .#{$prefix}--btn {
-      padding-right: rem(16px);
-    }
-  }
 }
 
 :host(#{$prefix}-btn[kind='ghost']:hover) .#{$prefix}--btn--ghost,
 :host(#{$prefix}-btn[kind='ghost']) .#{$prefix}--btn--ghost:active {
   outline: none;
 }
+
+:host(#{$prefix}-btn-set) {
+  @extend .#{$prefix}--btn-set;
+
+  ::slotted(#{$prefix}-btn) {
+    width: 100%;
+    // 196px from design kit
+    max-width: rem(196px);
+  }
+
+  &[stacked] {
+    @extend .#{$prefix}--btn-set--stacked;
+  }
+}

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

@@ -13,7 +13,6 @@ $css--plex: true !default;
 @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';
 
 :host(#{$prefix}-combo-box) {
   outline: none;

package/scss/components/layer/layer.scss

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

package/scss/components/radio-button/radio-button.scss

@@ -29,11 +29,6 @@ $css--plex: true !default;
   @extend .#{$prefix}--radio-button-group--vertical;
 }
 
-:host(#{$prefix}-radio-button),
-:host(#{$prefix}-radio-button-skeleton) {
-  @extend .#{$prefix}--form-item;
-}
-
 :host(#{$prefix}-radio-button) {
   @extend .#{$prefix}--radio-button-wrapper;
 
@@ -44,7 +39,12 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-radio-button[disabled]) {
+:host(#{$prefix}-radio-button[readOnly]) {
+  @extend .#{$prefix}--radio-button-group--readonly;
+}
+
+:host(#{$prefix}-radio-button[disabled]),
+:host(#{$prefix}-radio-button[disabledItem]) {
   .#{$prefix}--radio-button__label {
     color: $text-disabled;
     cursor: not-allowed;

package/scss/components/tag/tag.scss

@@ -10,101 +10,98 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/breakpoint' as *;
-@use '@carbon/styles/scss/components/tag';
+@use '@carbon/styles/scss/components/tag/index' as *;
 
 :host(#{$prefix}-tag) {
   @extend .#{$prefix}--tag;
-}
 
-:host(#{$prefix}-tag[type='red']),
-:host(#{$prefix}-filter-tag[type='red']) {
-  @extend .#{$prefix}--tag--red;
-}
+  &[size='sm'] {
+    @extend .#{$prefix}--tag--sm;
 
-:host(#{$prefix}-tag[type='magenta']),
-:host(#{$prefix}-filter-tag[type='magenta']) {
-  @extend .#{$prefix}--tag--magenta;
-}
-
-:host(#{$prefix}-tag[type='purple']),
-:host(#{$prefix}-filter-tag[type='purple']) {
-  @extend .#{$prefix}--tag--purple;
-}
+    .#{$prefix}--tag__close-icon {
+      width: rem(18px);
+      height: rem(18px);
+      margin-left: rem(5px);
+    }
+  }
 
-:host(#{$prefix}-tag[type='blue']),
-:host(#{$prefix}-filter-tag[type='blue']) {
-  @extend .#{$prefix}--tag--blue;
-}
+  &[type='red'] {
+    // @extend .#{$prefix}--tag--red;
+    background-color: #{$tag-background-red};
+  }
 
-:host(#{$prefix}-tag[type='cyan']),
-:host(#{$prefix}-filter-tag[type='cyan']) {
-  @extend .#{$prefix}--tag--cyan;
-}
+  &[type='magenta'] {
+    @extend .#{$prefix}--tag--magenta;
+  }
 
-:host(#{$prefix}-tag[type='teal']),
-:host(#{$prefix}-filter-tag[type='teal']) {
-  @extend .#{$prefix}--tag--teal;
-}
+  &[type='purple'] {
+    @extend .#{$prefix}--tag--purple;
+  }
 
-:host(#{$prefix}-tag[type='green']),
-:host(#{$prefix}-filter-tag[type='green']) {
-  @extend .#{$prefix}--tag--green;
-}
+  &[type='blue'] {
+    @extend .#{$prefix}--tag--blue;
+  }
 
-:host(#{$prefix}-tag[type='gray']),
-:host(#{$prefix}-filter-tag[type='gray']) {
-  @extend .#{$prefix}--tag--gray;
-}
+  &[type='cyan'] {
+    @extend .#{$prefix}--tag--cyan;
+  }
 
-:host(#{$prefix}-tag[type='cool-gray']),
-:host(#{$prefix}-filter-tag[type='cool-gray']) {
-  @extend .#{$prefix}--tag--cool-gray;
-}
+  &[type='teal'] {
+    @extend .#{$prefix}--tag--teal;
+  }
 
-:host(#{$prefix}-tag[type='warm-gray']),
-:host(#{$prefix}-filter-tag[type='warm-gray']) {
-  @extend .#{$prefix}--tag--warm-gray;
-}
+  &[type='green'] {
+    @extend .#{$prefix}--tag--green;
+  }
 
-:host(#{$prefix}-tag[disabled]),
-:host(#{$prefix}-filter-tag[disabled]) {
-  @extend .#{$prefix}--tag--disabled;
-}
+  &[type='gray'] {
+    @extend .#{$prefix}--tag--gray;
+  }
 
-// tags used for filtering
-:host(#{$prefix}-filter-tag) {
-  @extend .#{$prefix}--tag;
-  @extend .#{$prefix}--tag--filter;
+  &[type='cool-gray'] {
+    @extend .#{$prefix}--tag--cool-gray;
+  }
 
-  display: none;
+  &[type='warm-gray'] {
+    @extend .#{$prefix}--tag--warm-gray;
+  }
 
-  &[open] {
-    display: inline-flex;
+  &[type='high-contrast'] {
+    @extend .#{$prefix}--tag--high-contrast;
   }
-}
 
-:host(#{$prefix}-filter-tag[disabled]) .#{$prefix}--tag__close-icon {
-  cursor: not-allowed;
+  &[type='outline'] {
+    @extend .#{$prefix}--tag--outline;
+  }
 
-  &,
-  &:hover {
-    background-color: transparent;
+  &[disabled] {
+    @extend .#{$prefix}--tag--disabled;
   }
-}
 
-:host(#{$prefix}-tag[size='sm']),
-:host(#{$prefix}-filter-tag[size='sm']) {
-  @extend .#{$prefix}--tag--sm;
+  &[filter] {
+    @extend .#{$prefix}--tag--filter;
 
-  .#{$prefix}--tag__close-icon {
-    width: rem(18px);
-    height: rem(18px);
-    margin-left: rem(5px);
-  }
-}
+    display: none;
 
-:host(#{$prefix}-filter-tag[size='sm']) {
-  padding-right: 0;
+    &[size='sm'] {
+      padding-right: 0;
+    }
+
+    &[open] {
+      display: inline-flex;
+    }
+
+    &[disabled] {
+      .#{$prefix}--tag__close-icon {
+        cursor: not-allowed;
+
+        &,
+        &:hover {
+          background-color: transparent;
+        }
+      }
+    }
+  }
 }
 
 // Skeleton state

package/scss/components/tile/tile.scss

@@ -14,6 +14,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/components/tile/index' as *;
 @use '@carbon/styles/scss/components/link/index' as *;
 @use '@carbon/styles/scss/components/form/index' as *;
+@use '@carbon/styles/scss/theme' as *;
 
 :host(#{$prefix}-tile) {
   @extend .#{$prefix}--tile;
@@ -25,10 +26,12 @@ $css--plex: true !default;
 
 :host(#{$prefix}-tile-group) {
   @extend .#{$prefix}--tile-group;
+
+  background: transparent;
 }
 
 :host(#{$prefix}-clickable-tile) {
-  display: content;
+  display: grid;
   outline: none;
 
   .#{$prefix}--link--disabled {
@@ -50,6 +53,12 @@ $css--plex: true !default;
       @include focus-outline('outline');
     }
   }
+
+  &:hover {
+    .#{$prefix}--tile--clickable {
+      color: inherit;
+    }
+  }
 }
 
 :host(#{$prefix}-radio-tile) {
@@ -81,15 +90,6 @@ $css--plex: true !default;
   @extend .#{$prefix}--tile;
   @extend .#{$prefix}--tile--expandable;
 
-  position: relative;
-
-  .#{$prefix}--tile__chevron {
-    background: none;
-    border: none;
-    outline: none;
-    cursor: pointer;
-  }
-
   ::slotted(#{$prefix}-tile-above-the-fold-content) {
     @extend .#{$prefix}--tile-content__above-the-fold;
   }
@@ -102,14 +102,36 @@ $css--plex: true !default;
     max-height: 0;
     transition: max-height $duration-fast-02 motion(standard, productive);
   }
-}
 
-:host(#{$prefix}-expandable-tile[expanded]) {
-  @extend .#{$prefix}--tile--is-expanded;
+  &[expanded] {
+    @extend .#{$prefix}--tile--is-expanded;
 
-  ::slotted(#{$prefix}-tile-below-the-fold-content) {
-    opacity: 1;
-    transition: $duration-fast-02 motion(standard, productive);
+    ::slotted(#{$prefix}-tile-below-the-fold-content) {
+      opacity: 1;
+      transition: $duration-fast-02 motion(standard, productive);
+    }
+  }
+
+  &[with-interactive] {
+    cursor: default;
+    transition: max-height $duration-moderate-01 motion(standard, productive);
+
+    &:hover {
+      background-color: $layer;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &:not([with-interactive]) {
+    .#{$prefix}--tile__chevron {
+      background: none;
+      border: none;
+      outline: none;
+      cursor: pointer;
+    }
   }
 }
 

package/scss/components/toggle/toggle.scss

@@ -20,4 +20,8 @@ $css--plex: true !default;
       cursor: not-allowed;
     }
   }
+
+  &[read-only] {
+    @extend .#{$prefix}--toggle--readonly;
+  }
 }

package/CHANGELOG.md

@@ -1,87 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.23.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/web-components@1.23.0-rc.0...@carbon/web-components@1.23.0) (2023-01-17)
-
-**Note:** Version bump only for package @carbon/web-components
-
-
-
-
-
-# [1.23.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/web-components@1.22.0...@carbon/web-components@1.23.0-rc.0) (2023-01-04)
-
-
-### Bug Fixes
-
-* **deps:** update dependency carbon-components to v10.58.3 ([#9849](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9849)) ([152eb57](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/152eb5739ef811336ffecc14faa8fda695d72ca6))
-* **deps:** update dependency flatpickr to v4.6.13 ([#9666](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9666)) ([7995814](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/79958142bd036972906dd1ba18458e4e4c192f56))
-* **notification/tag:** token documentation ([#9809](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9809)) ([f9e1b1c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f9e1b1c2d21a1f47bb068c98cb7fe5a09c3cee07)), closes [carbon-design-system/carbon-for-ibm-dotcom#9757](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9757)
-* **progress-indicator:** add missing import for progress indicator skeleton ([#9853](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9853)) ([7b28a85](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7b28a85d6ad7799c80b0865e3dd66b95da266bb7)), closes [#9825](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9825)
-* **rollup:** update cwc rollup config ([#9854](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9854)) ([ca282b3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ca282b35c83f8d0efaef0d2a534fe7b8843a2728))
-* **tabs:** basic keyboard navigation ([#9811](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9811)) ([b785e61](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b785e617602d27a11927398a495fb473d8efb43e))
-* **tooltip:** interpolate sass var ([#9880](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9880)) ([20cd1dc](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/20cd1dca7bb5fff5b9edc9eaa0e4d0ef1bd31e72))
-
-
-
-
-
-# [1.22.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/web-components@1.22.0-rc.3...@carbon/web-components@1.22.0) (2022-12-06)
-
-**Note:** Version bump only for package @carbon/web-components
-
-
-
-
-
-# 1.22.0-rc.3 (2022-12-06)
-
-
-
-# 1.41.0-rc.2 (2022-12-05)
-
-
-
-# 1.41.0-rc.1 (2022-11-23)
-
-
-
-# 1.41.0-rc.0 (2022-11-22)
-
-
-### Bug Fixes
-
-* **cwc:** percy update ([5ac2674](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5ac2674bdac3d7d033335c693e36a1ae33042242))
-* **cwc:** update package.json & karma test ([a52ab2f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a52ab2f5937d9576c79c63748065a1dcf03ee2b0))
-* **packages:** update versions to get working storybooks ([42d8eee](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/42d8eeee12c732c56599de24861252159e91905b))
-
-
-
-
-
-# [1.22.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/web-components@1.22.0-rc.1...@carbon/web-components@1.22.0-rc.2) (2022-12-05)
-
-**Note:** Version bump only for package @carbon/web-components
-
-
-
-
-
-# [1.22.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/web-components@1.22.0-rc.0...@carbon/web-components@1.22.0-rc.1) (2022-11-23)
-
-**Note:** Version bump only for package @carbon/web-components
-
-
-
-
-
-# 1.22.0-rc.0 (2022-11-22)
-
-
-### Bug Fixes
-
-* **cwc:** percy update ([5ac2674](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5ac2674bdac3d7d033335c693e36a1ae33042242))
-* **cwc:** update package.json & karma test ([a52ab2f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a52ab2f5937d9576c79c63748065a1dcf03ee2b0))
-* **packages:** update versions to get working storybooks ([42d8eee](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/42d8eeee12c732c56599de24861252159e91905b))