@carbon/web-components 2.0.0-beta.3 → 2.0.0-beta.5

package/scss/components/progress-indicator/progress-indicator.scss

@@ -10,6 +10,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/layer/layer-tokens';
 @use '@carbon/styles/scss/utilities/skeleton' as *;
 @use '@carbon/styles/scss/components/progress-indicator/progress-indicator' as *;
 
@@ -18,6 +19,8 @@ $css--plex: true !default;
 
 :host(#{$prefix}-progress-indicator),
 :host(#{$prefix}-progress-indicator-skeleton) {
+  @include layer-tokens.emit-layer-tokens(1);
+
   @extend .#{$prefix}--progress;
 }
 
@@ -48,13 +51,13 @@ $css--plex: true !default;
 :host(#{$prefix}-progress-step[vertical]),
 :host(#{$prefix}-progress-step-skeleton[vertical]) {
   display: list-item;
-  min-height: $spacing-12;
+  min-height: 3.625rem;
   width: initial;
   min-width: initial;
 
   svg {
     display: inline-block;
-    margin: 0.1rem 0.5rem;
+    margin: 0.1rem $spacing-02 0.1rem $spacing-03;
   }
 
   .#{$prefix}--progress-label {
@@ -80,7 +83,11 @@ $css--plex: true !default;
   .#{$prefix}--progress-optional {
     margin-top: auto;
     position: initial;
-    margin-left: 2.25rem;
+    margin-left: $spacing-07;
+  }
+
+  .#{$prefix}--progress-step-button {
+    display: block;
   }
 }
 
@@ -108,13 +115,6 @@ $css--plex: true !default;
   @extend .#{$prefix}--progress-step--incomplete;
 }
 
-:host(#{$prefix}-progress-step-skeleton) .#{$prefix}--progress-label {
-  @include skeleton;
-
-  height: rem(12px);
-  width: rem(40px);
-}
-
 :host(#{$prefix}-progress-step-skeleton) {
   svg {
     fill: $layer-selected-inverse;
@@ -124,3 +124,7 @@ $css--plex: true !default;
     background-color: $layer-accent-01;
   }
 }
+
+:host(#{$prefix}-progress-step[spaceEqually]) {
+  flex-grow: 1;
+}

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

@@ -10,7 +10,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/utilities';
+@use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/radio-button/radio-button' as *;
 
@@ -39,6 +39,16 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-radio-button[data-table]) {
+  .#{$prefix}--radio-button__label {
+    width: rem(28px);
+  }
+
+  .#{$prefix}--radio-button__appearance {
+    margin-right: -#{$spacing-01};
+  }
+}
+
 :host(#{$prefix}-radio-button[readOnly]) {
   @extend .#{$prefix}--radio-button-group--readonly;
 }

package/scss/components/search/search.scss

@@ -11,6 +11,7 @@ $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/layer/layer-tokens';
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/search' as *;
 
@@ -18,48 +19,50 @@ $css--plex: true !default;
 @include search;
 
 :host(#{$prefix}-search) {
+  @include layer-tokens.emit-layer-tokens(1);
+
   @extend .#{$prefix}--search;
 
   outline: none;
+}
 
-  &[expandable] {
-    @extend .#{$prefix}--search--expandable;
-
-    &[expanded] {
-      @extend .#{$prefix}--search--expanded;
-
-      &[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;
-        }
-      }
-    }
+:host(#{$prefix}-search[expandable]) {
+  @extend .#{$prefix}--search--expandable;
+}
+
+:host(#{$prefix}-search[expandable][expanded]) {
+  @extend .#{$prefix}--search--expanded;
+}
+
+:host(#{$prefix}-search[expandable][expanded][size='sm']) {
+  .#{$prefix}--search-input {
+    padding: 0 $spacing-07;
   }
+}
 
-  &[disabled] {
-    svg {
-      fill: $icon-on-color-disabled;
-    }
+:host(#{$prefix}-search[expandable][expanded][size='md']) {
+  .#{$prefix}--search-input {
+    padding: 0 $spacing-08;
+  }
+}
 
-    .#{$prefix}--search-close {
-      pointer-events: none;
-      outline: none;
+:host(#{$prefix}-search[expandable][expanded][size='lg']) {
+  .#{$prefix}--search-input {
+    padding: 0 $spacing-09;
+  }
+}
+
+:host(#{$prefix}-search[disabled]) {
+  svg {
+    fill: $icon-on-color-disabled;
+  }
+
+  .#{$prefix}--search-close {
+    pointer-events: none;
+    outline: none;
 
-      &::before {
-        background: none;
-      }
+    &::before {
+      background: none;
     }
   }
 }
@@ -78,17 +81,17 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-search),
-:host(#{$prefix}-search-skeleton) {
-  &[size='sm'] {
-    @extend .#{$prefix}--search--sm;
-  }
+:host(#{$prefix}-search[size='sm']),
+:host(#{$prefix}-search-skeleton[size='sm']) {
+  @extend .#{$prefix}--search--sm;
+}
 
-  &[size='md'] {
-    @extend .#{$prefix}--search--md;
-  }
+:host(#{$prefix}-search[size='md']),
+:host(#{$prefix}-search-skeleton[size='md']) {
+  @extend .#{$prefix}--search--md;
+}
 
-  &[size='lg'] {
-    @extend .#{$prefix}--search--lg;
-  }
+:host(#{$prefix}-search[size='lg']),
+:host(#{$prefix}-search-skeleton[size='lg']) {
+  @extend .#{$prefix}--search--lg;
 }

package/scss/components/select/select.scss

@@ -8,38 +8,68 @@
 $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/layer/layer-tokens';
 @use '@carbon/styles/scss/components/select';
 
 :host(#{$prefix}-select) {
+  @include layer-tokens.emit-layer-tokens(1);
+
   @extend .#{$prefix}--select;
 
   outline: none;
+}
 
-  &[disabled] {
-    @extend .#{$prefix}--select--disabled;
+:host(#{$prefix}-select[disabled]) {
+  @extend .#{$prefix}--select--disabled;
+}
+
+:host(#{$prefix}-select[invalid]) {
+  @extend .#{$prefix}--select--invalid;
+}
+
+:host(#{$prefix}-select[readonly]) select {
+  pointer-events: none;
+}
+
+:host(#{$prefix}-select[inline][warn]) {
+  .#{$prefix}--form__helper-text,
+  .#{$prefix}--label {
+    align-self: flex-start;
+    margin-top: 0.8125rem;
   }
 
-  &[invalid] {
-    @extend .#{$prefix}--select--invalid;
+  select {
+    padding-right: 3.5rem;
   }
 
-  &[readonly] select {
-    pointer-events: none;
+  .#{$prefix}--select__invalid-icon--warning {
+    right: $spacing-07;
   }
+}
 
-  &[inline][warn] {
-    .#{$prefix}--form__helper-text,
-    .#{$prefix}--label {
-      align-self: flex-start;
-      margin-top: 0.8125rem;
-    }
+:host(#{$prefix}-select[pagination]) {
+  .#{$prefix}--label {
+    margin: 0;
+  }
 
-    select {
-      padding-right: 3.5rem;
-    }
+  .#{$prefix}--select-input {
+    padding: 0 2.25rem 0 $spacing-05;
 
-    .#{$prefix}--select__invalid-icon--warning {
-      right: 2rem;
+    &:focus {
+      background-color: transparent;
     }
   }
+
+  .#{$prefix}--select__arrow {
+    top: 50%;
+    transform: translate(-#{$spacing-03}, -50%);
+  }
+}
+
+:host(#{$prefix}-select[pagination][left-select]) {
+  .#{$prefix}--select-input {
+    border-right: 1px solid $border-subtle;
+  }
 }

package/scss/components/slider/slider.scss

@@ -9,9 +9,12 @@ $css--plex: true !default;
 
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/components/slider';
 
 :host(#{$prefix}-slider) {
+  @include layer-tokens.emit-layer-tokens(1);
+
   outline: none;
 
   .#{$prefix}--slider {
@@ -38,10 +41,10 @@ $css--plex: true !default;
   input {
     box-sizing: border-box;
   }
+}
 
-  &[readonly] {
-    input {
-      background-color: transparent;
-    }
+:host(#{$prefix}-slider-input[readonly]) {
+  input {
+    background-color: transparent;
   }
 }

package/scss/components/stack/stack.scss

@@ -0,0 +1,33 @@
+//
+// 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/config' as *;
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/utilities/custom-property';
+@use '@carbon/styles/scss/components/stack/index';
+
+:host(#{$prefix}-stack) {
+  $index: 1;
+
+  @each $step, $value in spacing.$spacing {
+    .#{$prefix}--stack-scale-#{$index} {
+      @include custom-property.declaration('stack-gap', $value);
+    }
+
+    $index: $index + 1;
+  }
+}
+
+:host(#{$prefix}-stack[orientation='vertical']) {
+  @extend .#{$prefix}--stack-vertical;
+}
+
+:host(#{$prefix}-stack[orientation='horizontal']) {
+  @extend .#{$prefix}--stack-horizontal;
+}

package/scss/components/structured-list/structured-list.scss

@@ -9,13 +9,19 @@ $css--plex: true !default;
 
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/components/structured-list/structured-list' as *;
 
 // https://github.com/carbon-design-system/carbon/issues/11408
 @include structured-list;
 
+:host(#{$prefix}-structured-list) {
+  @include layer-tokens.emit-layer-tokens(1);
+}
+
 .#{$prefix}--structured-list ::slotted(#{$prefix}-structured-list-head) {
   @extend .#{$prefix}--structured-list-thead;
 }
@@ -27,6 +33,10 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-structured-list-header-row) {
+  ::slotted(#{$prefix}-structured-list-header-cell:first-of-type) {
+    padding-left: $spacing-05;
+  }
+
   ::slotted(#{$prefix}-structured-list-header-cell),
   ::slotted(#{$prefix}-structured-list-header-cell-skeleton) {
     @extend .#{$prefix}--structured-list-th;
@@ -42,37 +52,102 @@ $css--plex: true !default;
   @extend .#{$prefix}--structured-list-tbody;
 }
 
-:host(#{$prefix}-structured-list-body)
+:host(#{$prefix}-structured-list-body) {
   ::slotted(#{$prefix}-structured-list-row) {
-  @extend .#{$prefix}--structured-list-row;
+    @extend .#{$prefix}--structured-list-row;
+  }
+
+  ::slotted(#{$prefix}-structured-list-row:last-child) {
+    border-bottom: 1px solid $border-subtle;
+  }
 }
 
-:host(#{$prefix}-structured-list-row:hover) .#{$prefix}--structured-list-svg {
-  // TODO: audit
-  fill: $gray-40;
+:host(#{$prefix}-structured-list-row) {
+  ::slotted(#{$prefix}-structured-list-cell) {
+    @extend .#{$prefix}--structured-list-td;
+  }
+
+  ::slotted(#{$prefix}-structured-list-cell:first-of-type) {
+    padding-left: $spacing-05;
+  }
+
+  ::slotted(#{$prefix}-structured-list-cell[nowrap]) {
+    @extend .#{$prefix}--structured-list-content--nowrap;
+  }
 }
 
-:host(#{$prefix}-structured-list-row)
+// selection
+:host(#{$prefix}-structured-list-row[selection-value]:hover) {
+  border-bottom: 1px solid $layer-hover;
+  background-color: $layer-hover;
+  cursor: pointer;
+
   ::slotted(#{$prefix}-structured-list-cell) {
-  @extend .#{$prefix}--structured-list-td;
+    color: $text-primary;
+  }
 }
 
-:host(#{$prefix}-structured-list-row)
-  ::slotted(#{$prefix}-structured-list-cell[nowrap]) {
-  @extend .#{$prefix}--structured-list-content--nowrap;
+:host(#{$prefix}-structured-list-row[selected]) {
+  background-color: $layer-selected;
+
+  .#{$prefix}--structured-list-input:checked
+    + .#{$prefix}--structured-list-cell
+    .#{$prefix}--structured-list-svg {
+    fill: $text-primary;
+  }
+
+  ::slotted(#{$prefix}-structured-list-cell) {
+    color: $text-primary;
+  }
 }
 
-// "Selected" style with `.#{$prefix}--structured-list-td` does not work somehow - Need investigation
-.#{$prefix}--structured-list-input:checked
-  + .#{$prefix}--structured-list-cell
-  .#{$prefix}--structured-list-svg {
-  fill: $text-primary;
+// skeleton
+:host(#{$prefix}-structured-list-header-cell-skeleton) {
+  &:first-of-type {
+    width: 8%;
+  }
+
+  &:nth-of-type(3n + 2) {
+    width: 30%;
+  }
+
+  &:nth-of-type(3n + 3) {
+    width: 15%;
+  }
+
+  span {
+    @include skeleton;
+
+    width: 75%;
+    height: $spacing-05;
+    display: block;
+  }
 }
 
-:host(#{$prefix}-structured-list-header-cell-skeleton) span {
-  @include skeleton;
+// condensed
+:host(#{$prefix}-structured-list-row[condensed])
+  ::slotted(#{$prefix}-structured-list-cell),
+:host(#{$prefix}-structured-list-header-row[condensed])
+  ::slotted(#{$prefix}-structured-list-header-cell) {
+  padding: $spacing-03;
+}
+
+:host(#{$prefix}-structured-list-row[condensed])
+  ::slotted(#{$prefix}-structured-list-cell:first-of-type),
+:host(#{$prefix}-structured-list-header-row[condensed])
+  ::slotted(#{$prefix}-structured-list-header-cell:first-of-type) {
+  padding-left: $spacing-05;
+}
 
-  width: 75%;
-  height: 1rem;
-  display: block;
+// flush
+:host(#{$prefix}-structured-list-row[flush])
+  ::slotted(#{$prefix}-structured-list-cell),
+:host(#{$prefix}-structured-list-row[condensed][flush])
+  ::slotted(#{$prefix}-structured-list-cell),
+:host(#{$prefix}-structured-list-header-row[flush])
+  ::slotted(#{$prefix}-structured-list-header-cell),
+:host(#{$prefix}-structured-list-header-row[condensed][flush])
+  ::slotted(#{$prefix}-structured-list-header-cell) {
+  padding-right: $spacing-05;
+  padding-left: 0;
 }

package/scss/components/tag/tag.scss

@@ -10,96 +10,99 @@ $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/layer/layer-tokens';
 @use '@carbon/styles/scss/components/tag/index' as *;
 
 :host(#{$prefix}-tag) {
+  @include layer-tokens.emit-layer-tokens(1);
+
   @extend .#{$prefix}--tag;
+}
 
-  &[size='sm'] {
-    @extend .#{$prefix}--tag--sm;
+:host(#{$prefix}-tag[size='sm']) {
+  @extend .#{$prefix}--tag--sm;
 
-    .#{$prefix}--tag__close-icon {
-      width: rem(18px);
-      height: rem(18px);
-      margin-left: rem(5px);
-    }
+  .#{$prefix}--tag__close-icon {
+    width: rem(18px);
+    height: rem(18px);
+    margin-left: rem(5px);
   }
+}
 
-  &[type='red'] {
-    // @extend .#{$prefix}--tag--red;
-    background-color: #{$tag-background-red};
-  }
+:host(#{$prefix}-tag[type='red']) {
+  // @extend .#{$prefix}--tag--red;
+  background-color: #{$tag-background-red};
+}
 
-  &[type='magenta'] {
-    @extend .#{$prefix}--tag--magenta;
-  }
+:host(#{$prefix}-tag[type='magenta']) {
+  @extend .#{$prefix}--tag--magenta;
+}
 
-  &[type='purple'] {
-    @extend .#{$prefix}--tag--purple;
-  }
+:host(#{$prefix}-tag[type='purple']) {
+  @extend .#{$prefix}--tag--purple;
+}
 
-  &[type='blue'] {
-    @extend .#{$prefix}--tag--blue;
-  }
+:host(#{$prefix}-tag[type='blue']) {
+  @extend .#{$prefix}--tag--blue;
+}
 
-  &[type='cyan'] {
-    @extend .#{$prefix}--tag--cyan;
-  }
+:host(#{$prefix}-tag[type='cyan']) {
+  @extend .#{$prefix}--tag--cyan;
+}
 
-  &[type='teal'] {
-    @extend .#{$prefix}--tag--teal;
-  }
+:host(#{$prefix}-tag[type='teal']) {
+  @extend .#{$prefix}--tag--teal;
+}
 
-  &[type='green'] {
-    @extend .#{$prefix}--tag--green;
-  }
+:host(#{$prefix}-tag[type='green']) {
+  @extend .#{$prefix}--tag--green;
+}
 
-  &[type='gray'] {
-    @extend .#{$prefix}--tag--gray;
-  }
+:host(#{$prefix}-tag[type='gray']) {
+  @extend .#{$prefix}--tag--gray;
+}
 
-  &[type='cool-gray'] {
-    @extend .#{$prefix}--tag--cool-gray;
-  }
+:host(#{$prefix}-tag[type='cool-gray']) {
+  @extend .#{$prefix}--tag--cool-gray;
+}
 
-  &[type='warm-gray'] {
-    @extend .#{$prefix}--tag--warm-gray;
-  }
+:host(#{$prefix}-tag[type='warm-gray']) {
+  @extend .#{$prefix}--tag--warm-gray;
+}
 
-  &[type='high-contrast'] {
-    @extend .#{$prefix}--tag--high-contrast;
-  }
+:host(#{$prefix}-tag[type='high-contrast']) {
+  @extend .#{$prefix}--tag--high-contrast;
+}
 
-  &[type='outline'] {
-    @extend .#{$prefix}--tag--outline;
-  }
+:host(#{$prefix}-tag[type='outline']) {
+  @extend .#{$prefix}--tag--outline;
+}
 
-  &[disabled] {
-    @extend .#{$prefix}--tag--disabled;
-  }
+:host(#{$prefix}-tag[disabled]) {
+  @extend .#{$prefix}--tag--disabled;
+}
 
-  &[filter] {
-    @extend .#{$prefix}--tag--filter;
+:host(#{$prefix}-tag[filter]) {
+  @extend .#{$prefix}--tag--filter;
 
-    display: none;
+  display: none;
+}
 
-    &[size='sm'] {
-      padding-right: 0;
-    }
+:host(#{$prefix}-tag[filter][size='sm']) {
+  padding-right: 0;
+}
 
-    &[open] {
-      display: inline-flex;
-    }
+:host(#{$prefix}-tag[filter][open]) {
+  display: inline-flex;
+}
 
-    &[disabled] {
-      .#{$prefix}--tag__close-icon {
-        cursor: not-allowed;
+:host(#{$prefix}-tag[filter][disabled]) {
+  .#{$prefix}--tag__close-icon {
+    cursor: not-allowed;
 
-        &,
-        &:hover {
-          background-color: transparent;
-        }
-      }
+    &,
+    &:hover {
+      background-color: transparent;
     }
   }
 }