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

package/scss/components/pagination/pagination.scss

@@ -21,10 +21,6 @@ $css--plex: true !default;
   position: relative;
   outline: none;
 
-  .#{$prefix}--pagination__left {
-    flex: 1;
-  }
-
   .#{$prefix}-ce--pagination__divider {
     height: 100%;
     width: rem(1px);
@@ -39,65 +35,3 @@ $css--plex: true !default;
     transform: rotate(0) #{'/*rtl:rotate(180deg)*/'};
   }
 }
-
-:host(#{$prefix}-pages-select) {
-  @extend .#{$prefix}--select__page-number;
-
-  outline: none;
-}
-
-:host(#{$prefix}-page-sizes-select) {
-  @extend .#{$prefix}--select__item-count;
-
-  outline: none;
-}
-
-:host(#{$prefix}-pages-select),
-:host(#{$prefix}-page-sizes-select) {
-  display: flex;
-  align-items: center;
-  height: 100%;
-
-  .#{$prefix}--select-input {
-    @include type-style('body-short-01');
-
-    width: auto;
-    min-width: auto;
-    height: 100%;
-    padding: 0 2.5rem 0 $spacing-05;
-    margin-right: 0;
-    border: none;
-
-    @include breakpoint('md') {
-      padding-right: rem(36px);
-    }
-
-    &:hover {
-      // TODO: check value because this is a split token
-      // (hover-ui became field-hover-01 and field-hover-02)
-      background: $field-hover-01;
-    }
-  }
-
-  .#{$prefix}--select__arrow {
-    top: auto;
-    bottom: auto;
-
-    @include breakpoint('md') {
-      right: $spacing-05;
-    }
-  }
-}
-
-:host(#{$prefix}-pages-select) .#{$prefix}--select__page-number,
-:host(#{$prefix}-page-sizes-select) .#{$prefix}--select__item-count {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  position: relative;
-}
-
-:host(#{$prefix}-pages-select) .#{$prefix}--pagination__text {
-  margin-right: 1rem;
-  margin-left: rem(1px);
-}

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

@@ -48,13 +48,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 +80,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 +112,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 +121,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/select/select.scss

@@ -8,7 +8,9 @@
 $css--plex: true !default;
 
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/components/select';
+@use '@carbon/styles/scss/theme' as *;
 
 :host(#{$prefix}-select) {
   @extend .#{$prefix}--select;
@@ -39,7 +41,32 @@ $css--plex: true !default;
     }
 
     .#{$prefix}--select__invalid-icon--warning {
-      right: 2rem;
+      right: $spacing-07;
+    }
+  }
+
+  &[pagination] {
+    .#{$prefix}--label {
+      margin: 0;
+    }
+
+    .#{$prefix}--select-input {
+      padding: 0 2.25rem 0 $spacing-05;
+
+      &:focus {
+        background-color: transparent;
+      }
+    }
+
+    .#{$prefix}--select__arrow {
+      top: 50%;
+      transform: translate(-#{$spacing-03}, -50%);
+    }
+
+    &[left-select] {
+      .#{$prefix}--select-input {
+        border-right: 1px solid $border-subtle;
+      }
     }
   }
 }

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) {
+  &[orientation='vertical'] {
+    @extend .#{$prefix}--stack-vertical;
+  }
+
+  &[orientation='horizontal'] {
+    @extend .#{$prefix}--stack-horizontal;
+  }
+
+  $index: 1;
+
+  @each $step, $value in spacing.$spacing {
+    .#{$prefix}--stack-scale-#{$index} {
+      @include custom-property.declaration('stack-gap', $value);
+    }
+
+    $index: $index + 1;
+  }
+}

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

@@ -9,6 +9,7 @@ $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/components/structured-list/structured-list' as *;
@@ -27,6 +28,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 +47,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;
+  }
+}
+
+// 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;
+  }
 }
 
-// "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;
+// 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-header-cell-skeleton) span {
-  @include skeleton;
+: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/tooltip/tooltip.scss

@@ -10,6 +10,32 @@
 @use '@carbon/styles/scss/config' as *;
 @use '../popover/popover';
 @use '@carbon/styles/scss/components/tooltip';
+@use '@carbon/styles/scss/theme' as *;
+
+// For some reason `#{prefix}-tooltip` doesn't work here, will need to investigate
+
+:host(cds-tooltip[data-table]) {
+  display: contents;
+
+  &:hover {
+    ::slotted(button) {
+      background-color: $layer-selected-hover !important;
+    }
+  }
+}
+
+:host(cds-tooltip[data-table][size='xs']),
+:host(cds-tooltip[data-table][size='sm']) {
+  ::slotted(button) {
+    height: calc(100% + 1px) !important;
+  }
+}
+
+:host(cds-tooltip[toolbar-action]) {
+  ::slotted(button) {
+    outline: none !important;
+  }
+}
 
 :host(#{prefix}-tooltip-content) {
   ::slotted(.#{$prefix}-tooltip-content) {

package/scss/components/ui-shell/header.scss

@@ -11,7 +11,12 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/popover/index';
+@use '@carbon/styles/scss/components/tooltip';
 @use '@carbon/styles/scss/components/ui-shell/header';
+@use '@carbon/styles/scss/components/ui-shell/header-panel';
+@use '@carbon/styles/scss/components/ui-shell/switcher';
 
 :host(#{$prefix}-header) {
   @extend .#{$prefix}--header;
@@ -46,6 +51,7 @@ $css--plex: true !default;
 
   a.#{$prefix}--header__menu-item {
     height: $spacing-09;
+    background-color: $layer;
 
     &:hover {
       background-color: $background-hover;
@@ -56,6 +62,41 @@ $css--plex: true !default;
       background-color: $background-active;
     }
   }
+
+  a.#{$prefix}--header__menu-item--current {
+    background-color: $layer-selected;
+
+    &:hover {
+      background-color: $layer-selected-hover;
+    }
+
+    &::after {
+      position: absolute;
+      top: -2px;
+      left: -2px;
+      bottom: -2px;
+      width: 3px;
+      height: 100%;
+      background-color: $border-interactive;
+      content: '';
+    }
+  }
+}
+
+:host(#{$prefix}-header-global-action) {
+  ::slotted(svg) {
+    fill: $icon-secondary;
+  }
+  &:hover ::slotted(svg) {
+    fill: $icon-primary;
+  }
+}
+
+:host(#{$prefix}-header-nav-item),
+:host(#{$prefix}-header-menu) {
+  a.#{$prefix}--header__menu-item {
+    box-sizing: border-box;
+  }
 }
 
 :host(#{$prefix}-header-menu-button) {
@@ -80,4 +121,32 @@ $css--plex: true !default;
 :host(#{$prefix}-header-name) {
   display: content;
   height: 100%;
+
+  a {
+    box-sizing: border-box;
+  }
+}
+
+:host(#{$prefix}-header-panel) {
+  @extend .#{$prefix}--header-panel;
+}
+
+:host(#{$prefix}-header-panel) {
+  @extend .#{$prefix}--header-panel--expanded;
+}
+
+:host(#{$prefix}-switcher) {
+  @extend .#{$prefix}--switcher;
+}
+
+:host(#{$prefix}-switcher-item) {
+  @extend .#{$prefix}--switcher__item;
+
+  a {
+    box-sizing: border-box;
+  }
+}
+
+:host(#{$prefix}-switcher-divider) {
+  @extend .#{$prefix}--switcher__item--divider;
 }

package/scss/components/ui-shell/side-nav.scss

@@ -13,45 +13,8 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/components/ui-shell/side-nav';
 
-:host(#{$prefix}-side-nav) {
-  @extend .#{$prefix}--side-nav;
-  @extend .#{$prefix}--side-nav--ux;
-  @extend .#{$prefix}--side-nav__navigation;
-
-  top: 0;
-}
-
-:host(#{$prefix}-side-nav[collapse-mode='fixed']) {
-  // TODO: Consider making `@extend .#{$prefix}--side-nav--fixed` work, possibly caused by `:not()` styles
-  width: 16rem;
-}
-
-:host(#{$prefix}-side-nav[collapse-mode='rail']) {
-  // TODO: audit
-  width: $spacing-09;
-
-  &:hover {
-    // TODO: audit
-    width: 16rem;
-  }
-}
-
-:host(#{$prefix}-side-nav[expanded]),
-:host(#{$prefix}-side-nav[collapse-mode][expanded]) {
-  @extend .#{$prefix}--side-nav--expanded;
-}
-
-:host(#{$prefix}-side-nav[usage-mode='header-nav']),
-:host(#{$prefix}-side-nav[collapse-mode][usage-mode='header-nav']) {
-  width: 0;
-}
-
-:host(#{$prefix}-side-nav[expanded][usage-mode='header-nav']),
-:host(#{$prefix}-side-nav[collapse-mode][expanded][usage-mode='header-nav']) {
-  @include breakpoint-down('lg') {
-    // TODO: audit
-    width: 16rem;
-  }
+:host(#{$prefix}-side-nav[expanded]) ::slotted(#{$prefix}-side-nav-items) {
+  overflow-y: auto;
 }
 
 :host(#{$prefix}-side-nav-items) {
@@ -74,6 +37,10 @@ $css--plex: true !default;
       display: none;
     }
   }
+
+  &[large] {
+    @extend .#{$prefix}--side-nav__item--large;
+  }
 }
 
 :host(#{$prefix}-side-nav-divider) {
@@ -86,20 +53,21 @@ $css--plex: true !default;
   @extend .#{$prefix}--side-nav__item;
 
   display: block;
-  outline: none;
-  width: auto;
-  height: auto;
 
   .#{$prefix}--side-nav__icon[hidden] {
     display: none;
   }
+
+  .#{$prefix}--side-nav__menu {
+    margin: 0;
+    padding: 0;
+  }
 }
 
 :host(#{$prefix}-side-nav-menu[active]) {
   @extend .#{$prefix}--side-nav__item--active;
 
   // TODO: audit
-  background-color: $background-selected;
   color: $text-primary;
   position: relative;
 
@@ -128,6 +96,10 @@ $css--plex: true !default;
   @extend .#{$prefix}--side-nav__item--icon;
 }
 
+:host(#{$prefix}-side-nav-menu[large]) {
+  @extend .#{$prefix}--side-nav__item--large;
+}
+
 :host(#{$prefix}-side-nav-menu-item) {
   @extend .#{$prefix}--side-nav__menu-item;
 
@@ -137,18 +109,16 @@ $css--plex: true !default;
   height: auto;
 
   a.#{$prefix}--side-nav__link {
-    // TODO: audit
-    height: $spacing-05;
-    min-height: $spacing-05;
-    padding-left: $spacing-05;
+    height: $spacing-07;
+    min-height: $spacing-07;
+    padding-left: $spacing-07;
     font-weight: 400;
   }
 }
 
 :host(#{$prefix}-side-nav-menu-item[parent-has-icon])
   a.#{$prefix}--side-nav__link {
-  // TODO: audit
-  padding-left: rem(72px);
+  padding-left: 4.5rem;
 }
 
 :host(#{$prefix}-side-nav-item) .#{$prefix}--side-nav__link:hover,
@@ -158,3 +128,11 @@ $css--plex: true !default;
   background-color: $background-hover;
   color: $text-primary;
 }
+
+:host(#{$prefix}-header-side-nav-items) {
+  @extend .#{$prefix}--side-nav__header-navigation;
+
+  &[has-divider] {
+    @extend .#{$prefix}--side-nav__header-divider;
+  }
+}

package/es/components/data-table/table-cell-skeleton.d.ts

@@ -1,20 +0,0 @@
-/**
- * @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.
- */
-import BXTableCell from './table-cell';
-/**
- * Data table cell with skeleton content.
- *
- * @element cds-table-cell-skeleton
- */
-declare class BXTableCellSkeleton extends BXTableCell {
-    render(): import("lit-html").TemplateResult<1>;
-}
-export default BXTableCellSkeleton;
-
-//# sourceMappingURL=table-cell-skeleton.d.ts.map

package/es/components/data-table/table-cell-skeleton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"sources":["components/data-table/table-cell-skeleton.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,OAAO,WAAW,MAAM,cAAc,CAAC;AAEvC;;;;GAIG;AACH,cACM,mBAAoB,SAAQ,WAAW;IAC3C,MAAM;CAGP;AAED,eAAe,mBAAmB,CAAC","file":"table-cell-skeleton.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport BXTableCell from './table-cell';\n\n/**\n * Data table cell with skeleton content.\n *\n * @element cds-table-cell-skeleton\n */\n@customElement(`${prefix}-table-cell-skeleton`)\nclass BXTableCellSkeleton extends BXTableCell {\n  render() {\n    return html` <span></span> `;\n  }\n}\n\nexport default BXTableCellSkeleton;\n"]}

package/es/components/data-table/table-cell-skeleton.js

@@ -1,42 +0,0 @@
-import _decorate from "@babel/runtime/helpers/esm/decorate";
-let _ = t => t,
-  _t;
-/**
- * @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.
- */
-
-import { html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { prefix } from '../../globals/settings';
-import BXTableCell from './table-cell';
-
-/**
- * Data table cell with skeleton content.
- *
- * @element cds-table-cell-skeleton
- */
-let BXTableCellSkeleton = _decorate([customElement(`${prefix}-table-cell-skeleton`)], function (_initialize, _BXTableCell) {
-  class BXTableCellSkeleton extends _BXTableCell {
-    constructor(...args) {
-      super(...args);
-      _initialize(this);
-    }
-  }
-  return {
-    F: BXTableCellSkeleton,
-    d: [{
-      kind: "method",
-      key: "render",
-      value: function render() {
-        return html(_t || (_t = _` <span></span> `));
-      }
-    }]
-  };
-}, BXTableCell);
-export default BXTableCellSkeleton;
-//# sourceMappingURL=table-cell-skeleton.js.map