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

package/scss/components/popover/popover.scss

@@ -12,6 +12,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/utilities/custom-property';
+@use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme';
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/components/popover';
@@ -49,7 +50,7 @@ $popover-caret-height: custom-property.get-var(
 :host(#{$prefix}-popover[tabTip][open]) {
   ::slotted(.#{$prefix}--popover--tab-tip__button) {
     background: theme.$layer !important; /* stylelint-disable-line declaration-no-important */
-    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 $spacing-01 $spacing-01 rgba(0, 0, 0, 0.2);
   }
 }
 
@@ -59,7 +60,9 @@ $popover-caret-height: custom-property.get-var(
 }
 
 :host(#{$prefix}-tooltip-content[open]),
-:host(#{$prefix}-popover-content[open]) {
+:host(#{$prefix}-popover-content[open]),
+:host(#{$prefix}-toggletip[open]),
+:host(#{$prefix}-slug[open]) {
   .#{$prefix}--popover-content {
     display: block;
   }
@@ -74,7 +77,9 @@ $popover-caret-height: custom-property.get-var(
 }
 
 :host(#{$prefix}-tooltip-content[open][caret]),
-:host(#{$prefix}-popover-content[open][caret]) {
+:host(#{$prefix}-popover-content[open][caret]),
+:host(#{$prefix}-toggletip[open]),
+:host(#{$prefix}-slug[open]) {
   .#{$prefix}--popover-caret {
     display: block;
   }
@@ -83,12 +88,14 @@ $popover-caret-height: custom-property.get-var(
 :host(#{$prefix}-popover-content[dropShadow]) {
   @include custom-property.declaration(
     'popover-drop-shadow',
-    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2))
+    drop-shadow(0 $spacing-01 $spacing-01 rgba(0, 0, 0, 0.2))
   );
 }
 
 :host(#{$prefix}-tooltip-content[align^='bottom']),
-:host(#{$prefix}-popover-content[align^='bottom']) {
+:host(#{$prefix}-popover-content[align^='bottom']),
+:host(#{$prefix}-toggletip[alignment^='bottom']),
+:host(#{$prefix}-slug[alignment^='bottom']) {
   .#{$prefix}--popover-caret {
     bottom: 0;
     left: 50%;
@@ -100,7 +107,9 @@ $popover-caret-height: custom-property.get-var(
 }
 
 :host(#{$prefix}-tooltip-content[align='bottom']),
-:host(#{$prefix}-popover-content[align='bottom']) {
+:host(#{$prefix}-popover-content[align='bottom']),
+:host(#{$prefix}-toggletip[alignment='bottom']),
+:host(#{$prefix}-slug[alignment='bottom']) {
   .#{$prefix}--popover-content {
     bottom: 0;
     left: 50%;
@@ -109,7 +118,9 @@ $popover-caret-height: custom-property.get-var(
 }
 
 :host(#{$prefix}-tooltip-content[align='bottom-left']),
-:host(#{$prefix}-popover-content[align='bottom-left']) {
+:host(#{$prefix}-popover-content[align='bottom-left']),
+:host(#{$prefix}-toggletip[alignment='bottom-left']),
+:host(#{$prefix}-slug[alignment='bottom-left']) {
   .#{$prefix}--popover-content {
     bottom: 0;
     left: 0;
@@ -121,7 +132,9 @@ $popover-caret-height: custom-property.get-var(
 }
 
 :host(#{$prefix}-tooltip-content[align='bottom-right']),
-:host(#{$prefix}-popover-content[align='bottom-right']) {
+:host(#{$prefix}-popover-content[align='bottom-right']),
+:host(#{$prefix}-toggletip[alignment='bottom-right']),
+:host(#{$prefix}-slug[alignment='bottom-right']) {
   .#{$prefix}--popover-content {
     right: 0;
     bottom: 0;
@@ -130,7 +143,9 @@ $popover-caret-height: custom-property.get-var(
 }
 
 :host(#{$prefix}-tooltip-content[align^='left']),
-:host(#{$prefix}-popover-content[align^='left']) {
+:host(#{$prefix}-popover-content[align^='left']),
+:host(#{$prefix}-toggletip[alignment^='left']),
+:host(#{$prefix}-slug[alignment^='left']) {
   .#{$prefix}--popover-caret {
     top: 50%;
     right: 100%;
@@ -142,7 +157,9 @@ $popover-caret-height: custom-property.get-var(
 }
 
 :host(#{$prefix}-tooltip-content[align='left']),
-:host(#{$prefix}-popover-content[align='left']) {
+:host(#{$prefix}-popover-content[align='left']),
+:host(#{$prefix}-toggletip[alignment='left']),
+:host(#{$prefix}-slug[alignment='left']) {
   .#{$prefix}--popover-content {
     top: 50%;
     right: 100%;
@@ -153,7 +170,9 @@ $popover-caret-height: custom-property.get-var(
 }
 
 :host(#{$prefix}-tooltip-content[align='left-bottom']),
-:host(#{$prefix}-popover-content[align='left-bottom']) {
+:host(#{$prefix}-popover-content[align='left-bottom']),
+:host(#{$prefix}-toggletip[alignment='left-bottom']),
+:host(#{$prefix}-slug[alignment='left-bottom']) {
   .#{$prefix}--popover-content {
     right: 100%;
     bottom: -50%;
@@ -167,7 +186,9 @@ $popover-caret-height: custom-property.get-var(
 }
 
 :host(#{$prefix}-tooltip-content[align='left-top']),
-:host(#{$prefix}-popover-content[align='left-top']) {
+:host(#{$prefix}-popover-content[align='left-top']),
+:host(#{$prefix}-toggletip[alignment='left-top']),
+:host(#{$prefix}-slug[alignment='left-top']) {
   .#{$prefix}--popover-content {
     top: -50%;
     right: 100%;
@@ -181,7 +202,9 @@ $popover-caret-height: custom-property.get-var(
 }
 
 :host(#{$prefix}-tooltip-content[align^='right']),
-:host(#{$prefix}-popover-content[align^='right']) {
+:host(#{$prefix}-popover-content[align^='right']),
+:host(#{$prefix}-toggletip[alignment^='right']),
+:host(#{$prefix}-slug[alignment^='right']) {
   .#{$prefix}--popover-caret {
     top: 50%;
     left: 100%;
@@ -193,7 +216,9 @@ $popover-caret-height: custom-property.get-var(
 }
 
 :host(#{$prefix}-tooltip-content[align='right']),
-:host(#{$prefix}-popover-content[align='right']) {
+:host(#{$prefix}-popover-content[align='right']),
+:host(#{$prefix}-toggletip[alignment='right']),
+:host(#{$prefix}-slug[alignment='right']) {
   .#{$prefix}--popover-content {
     top: 50%;
     left: 100%;
@@ -204,7 +229,9 @@ $popover-caret-height: custom-property.get-var(
 }
 
 :host(#{$prefix}-tooltip-content[align='right-bottom']),
-:host(#{$prefix}-popover-content[align='right-bottom']) {
+:host(#{$prefix}-popover-content[align='right-bottom']),
+:host(#{$prefix}-toggletip[alignment='right-bottom']),
+:host(#{$prefix}-slug[alignment='right-bottom']) {
   .#{$prefix}--popover-content {
     bottom: 50%;
     left: 100%;
@@ -213,7 +240,9 @@ $popover-caret-height: custom-property.get-var(
 }
 
 :host(#{$prefix}-tooltip-content[align='right-top']),
-:host(#{$prefix}-popover-content[align='right-top']) {
+:host(#{$prefix}-popover-content[align='right-top']),
+:host(#{$prefix}-toggletip[alignment='right-top']),
+:host(#{$prefix}-slug[alignment='right-top']) {
   .#{$prefix}--popover-content {
     top: 50%;
     left: 100%;
@@ -225,7 +254,9 @@ $popover-caret-height: custom-property.get-var(
 }
 
 :host(#{$prefix}-tooltip-content[align^='top']),
-:host(#{$prefix}-popover-content[align^='top']) {
+:host(#{$prefix}-popover-content[align^='top']),
+:host(#{$prefix}-toggletip[alignment^='top']),
+:host(#{$prefix}-slug[alignment^='top']) {
   .#{$prefix}--popover-caret {
     top: 0;
     left: 50%;
@@ -237,7 +268,9 @@ $popover-caret-height: custom-property.get-var(
 }
 
 :host(#{$prefix}-tooltip-content[align='top']),
-:host(#{$prefix}-popover-content[align='top']) {
+:host(#{$prefix}-popover-content[align='top']),
+:host(#{$prefix}-toggletip[alignment='top']),
+:host(#{$prefix}-slug[alignment='top']) {
   .#{$prefix}--popover-content {
     top: 0;
     left: 50%;
@@ -246,7 +279,9 @@ $popover-caret-height: custom-property.get-var(
 }
 
 :host(#{$prefix}-tooltip-content[align='top-left']),
-:host(#{$prefix}-popover-content[align='top-left']) {
+:host(#{$prefix}-popover-content[align='top-left']),
+:host(#{$prefix}-toggletip[alignment='top-left']),
+:host(#{$prefix}-slug[alignment='top-left']) {
   .#{$prefix}--popover-content {
     top: 0;
     left: 0;
@@ -258,7 +293,9 @@ $popover-caret-height: custom-property.get-var(
 }
 
 :host(#{$prefix}-tooltip-content[align='top-right']),
-:host(#{$prefix}-popover-content[align='top-right']) {
+:host(#{$prefix}-popover-content[align='top-right']),
+:host(#{$prefix}-toggletip[alignment='top-right']),
+:host(#{$prefix}-slug[alignment='top-right']) {
   .#{$prefix}--popover-content {
     top: 0;
     right: 0;

package/scss/components/select/select.scss

@@ -70,3 +70,22 @@ $css--plex: true !default;
     border-right: 1px solid $border-subtle;
   }
 }
+
+:host(#{$prefix}-select) {
+  ::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}-select[warn]),
+:host(#{$prefix}-select[invalid]) {
+  ::slotted(#{$prefix}-slug) {
+    inset-inline-end: $spacing-10;
+  }
+}

package/scss/components/slug/slug.scss

@@ -0,0 +1,135 @@
+/**
+ * @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.
+ */
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/ai-gradient' as *;
+@use '@carbon/styles/scss/components/slug/index' as *;
+@use '../toggle-tip/toggletip.scss';
+
+:host(#{$prefix}-slug) {
+  @extend .#{$prefix}--slug;
+
+  .#{$prefix}--slug__text {
+    @include font-family('sans');
+  }
+}
+
+:host(#{$prefix}-slug[enabled]) {
+  .#{$prefix}--popover-content {
+    @include callout-gradient();
+
+    border: 1px solid $border-subtle;
+    border-radius: $spacing-05;
+    // 84px seems to make this fully opaque?
+    backdrop-filter: blur(25px);
+    // box-shadow seems to match the spec better
+    // than the same values plugged into `drop-shadow`
+    // filter: drop-shadow(-45px 45px 100px rgba(0, 0, 0, 0.2));
+    box-shadow: -45px 45px 100px rgba(0, 0, 0, 0.2);
+    color: $text-primary;
+    min-inline-size: to-rem(280px);
+  }
+
+  .#{$prefix}--toggletip-actions {
+    position: absolute;
+    justify-content: flex-end;
+    background: $layer-accent;
+    border-end-end-radius: to-rem(15px);
+    border-end-start-radius: to-rem(15px);
+    column-gap: 0;
+    inline-size: 100%;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+  }
+
+  .#{$prefix}--toggletip-content {
+    // This sets the max size to the size of the action bar with 3 buttons
+    max-inline-size: to-rem(334px);
+    padding-block-end: $spacing-11;
+    padding-block-start: $spacing-07;
+    padding-inline: $spacing-07;
+
+    --cds-button-focus-color: var(--cds-focus);
+  }
+}
+
+:host(#{$prefix}-slug[revert-active]) {
+  transform: translate($spacing-03, -50%);
+}
+
+:host(#{$prefix}-slug[open]) {
+  z-index: 1;
+}
+
+:host(#{$prefix}-slug-action-button) {
+  @include emit-layout-tokens();
+  .#{$prefix}--btn--primary {
+    order: 1;
+    border-end-end-radius: 1rem;
+  }
+}
+
+:host(
+    #{$prefix}-slug[kind='inline']:not([size='md']):not([size='lg']):not(
+        [size='xl']
+      )
+  ) {
+  .#{$prefix}--slug__button {
+    font-size: $spacing-04;
+  }
+}
+
+:host(#{$prefix}-slug[kind='inline'][size='lg']),
+:host(#{$prefix}-slug[kind='inline'][size='xl']) {
+  .#{$prefix}--slug__button {
+    font-size: $spacing-05;
+  }
+}
+
+:host(#{$prefix}-slug[dot-type='hollow']),
+:host(#{$prefix}-slug[kind='hollow']) {
+  @extend .#{$prefix}--slug--hollow;
+
+  .#{$prefix}--slug__button--hollow:hover {
+    border-color: $slug-hollow-hover;
+    color: $slug-hollow-hover;
+  }
+
+  .#{$prefix}--toggletip-content {
+    row-gap: 0;
+  }
+
+  .#{$prefix}--slug__button--lg .#{$prefix}--slug__text::before {
+    block-size: $spacing-03;
+    inline-size: $spacing-03;
+  }
+}
+
+:host(#{$prefix}-slug:not([kind='inline'])) {
+  .#{$prefix}--slug__button:focus {
+    border: $background;
+  }
+}
+
+:host(#{$prefix}-slug:not([kind='hollow']):not([dot-type='hollow'])) {
+  .#{$prefix}--popover-caret {
+    background: $border-subtle;
+  }
+
+  .#{$prefix}--slug__button.#{$prefix}--slug__button--mini:focus,
+  .#{$prefix}--slug__button.#{$prefix}--slug__button--2xs:focus {
+    box-shadow: inset 0 0 0 1px $focus, inset 0 0 0 2px $focus-inset;
+  }
+}

package/scss/components/stack/stack.scss

@@ -10,7 +10,7 @@ $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';
+@use '@carbon/styles/scss/components/stack/index' as *;
 
 :host(#{$prefix}-stack) {
   $index: 1;
@@ -24,10 +24,10 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-stack[orientation='vertical']) {
+:host(#{$prefix}-stack[orientation='vertical']) div {
   @extend .#{$prefix}--stack-vertical;
 }
 
-:host(#{$prefix}-stack[orientation='horizontal']) {
+:host(#{$prefix}-stack[orientation='horizontal']) div {
   @extend .#{$prefix}--stack-horizontal;
 }

package/scss/components/tabs/tabs.scss

@@ -27,7 +27,7 @@ $inset-transition: inset 110ms motion(standard, productive);
     flex: 1 1 0%;
     position: relative;
     overflow: scroll;
-    height: 42px; // for some reason, overflow: hidden shrinks the content
+    height: $spacing-09; // for some reason, overflow: hidden shrinks the content
     scrollbar-width: none;
 
     &::-webkit-scrollbar {
@@ -35,7 +35,7 @@ $inset-transition: inset 110ms motion(standard, productive);
     }
   }
 
-  /* Set to zero-slecificity so it can be overridden by dynamic stylesheet */
+  /* Set to zero-specificity so it can be overridden by dynamic stylesheet */
   /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
   :where(.#{$prefix}--tabs-nav-content) {
     position: absolute;
@@ -80,11 +80,9 @@ $inset-transition: inset 110ms motion(standard, productive);
     @include focus-outline('reset');
     @include type-style('body-compact-01');
 
-    display: flex;
     align-items: center;
     width: 100%;
     overflow: hidden;
-    max-width: 10rem;
     padding: $spacing-04 $spacing-05 $spacing-03;
     border-bottom: $tab-underline-color;
     color: $text-secondary;
@@ -105,7 +103,7 @@ $inset-transition: inset 110ms motion(standard, productive);
     .#{$prefix}--tabs__nav-link {
       @include type-style('heading-compact-01');
 
-      border-bottom: 2px solid $border-interactive;
+      border-bottom: $spacing-01 solid $border-interactive;
     }
   }
 
@@ -134,7 +132,7 @@ $inset-transition: inset 110ms motion(standard, productive);
     height: $spacing-09;
     padding: $spacing-03 $spacing-05;
     // height - vertical padding
-    /* stylelint-disable declaration-property-unit-whitelist */
+    /* stylelint-disable declaration-property-unit-allowed-list */
     line-height: calc(#{$spacing-09} - (#{$spacing-03} * 2));
   }
 }
@@ -209,7 +207,7 @@ $inset-transition: inset 110ms motion(standard, productive);
     // height - vertical padding
     line-height: calc(#{$spacing-09} - (#{$spacing-03} * 2));
     // Draws the border without affecting the inner-content
-    box-shadow: inset 0 2px 0 0 $interactive;
+    box-shadow: inset 0 $spacing-01 0 0 $interactive;
     border-bottom: none;
   }
 
@@ -254,13 +252,13 @@ $inset-transition: inset 110ms motion(standard, productive);
 }
 
 :host(#{$prefix}-tab-skeleton) {
-  margin-left: rem(2px);
+  margin-left: $spacing-01;
 
   .#{$prefix}--tabs__nav-link {
     @include skeleton;
 
     width: rem(75px);
-    height: rem(12px);
+    height: $spacing-04;
   }
 }
 

package/scss/components/text-input/text-input.scss

@@ -9,6 +9,7 @@ $css--plex: true !default;
 
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/components/text-input/index';
 @use '@carbon/styles/scss/layout' as *;
@@ -27,18 +28,51 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-text-input[show-password-visibility-toggle][size='sm'])
-  .#{$prefix}--text-input__invalid-icon {
-  right: $spacing-07;
+:host(#{$prefix}-text-input[show-password-visibility-toggle]) {
+  &[size='sm'] {
+    .#{$prefix}--text-input__invalid-icon {
+      right: $spacing-07;
+    }
+  }
 }
 
-:host(#{$prefix}-text-input[show-password-visibility-toggle][size='md'])
-  .#{$prefix}--text-input__invalid-icon,
-.#{$prefix}--text-input__invalid-icon {
-  right: $spacing-08;
+:host(#{$prefix}-text-input[show-password-visibility-toggle]) {
+  &[size='md'] {
+    .#{$prefix}--text-input__invalid-icon {
+      right: $spacing-07;
+    }
+  }
 }
 
-:host(#{$prefix}-text-input[show-password-visibility-toggle][size='lg'])
-  .#{$prefix}--text-input__invalid-icon {
-  right: $spacing-09;
+:host(#{$prefix}-text-input[show-password-visibility-toggle]) {
+  &[size='lg'] {
+    .#{$prefix}--text-input__invalid-icon {
+      right: $spacing-07;
+    }
+  }
+}
+
+:host(#{$prefix}-text-input) {
+  ::slotted(#{$prefix}-slug) {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: $spacing-05;
+  }
+
+  ::slotted(#{$prefix}-slug:not([revert-active])) {
+    transform: translateY(-50%);
+  }
+}
+
+:host(#{$prefix}-text-input[warn]),
+:host(#{$prefix}-text-input[invalid]) {
+  .#{$prefix}--text-input__field-wrapper--slug {
+    .#{$prefix}--text-input {
+      padding-inline-end: $spacing-10;
+    }
+  }
+
+  ::slotted(#{$prefix}-slug) {
+    inset-inline-end: $spacing-08;
+  }
 }

package/scss/components/textarea/textarea.scss

@@ -7,9 +7,13 @@
 
 $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/components/text-area/index';
 
 :host(#{$prefix}-textarea) {
+  @include emit-layout-tokens();
+
   outline: none;
 }
 
@@ -19,3 +23,34 @@ $css--plex: true !default;
 :host(#{$prefix}-textarea) textarea:not([cols]) {
   width: 100%;
 }
+
+:host(#{$prefix}-textarea) {
+  ::slotted(#{$prefix}-slug) {
+    position: absolute;
+    inset-block-start: $spacing-04;
+    inset-inline-end: $spacing-05;
+  }
+
+  ::slotted(#{$prefix}-slug[revert-active]) {
+    inset-block-start: $spacing-02;
+    inset-inline-end: $spacing-03;
+    transform: translate(0);
+  }
+}
+
+:host(#{$prefix}-textarea[warn]),
+:host(#{$prefix}-textarea[invalid]) {
+  .#{$prefix}--text-area__wrapper--slug {
+    .#{$prefix}--text-area {
+      padding-inline-end: $spacing-10;
+    }
+  }
+
+  ::slotted(#{$prefix}-slug) {
+    inset-inline-end: $spacing-08;
+  }
+
+  ::slotted(#{$prefix}-slug[revert-active]) {
+    inset-inline-end: $spacing-07;
+  }
+}

package/scss/components/tile/tile.scss

@@ -49,7 +49,7 @@ $css--plex: true !default;
   .#{$prefix}--tile {
     // Overrides what `.#{$prefix}--link` defines
     padding: $spacing-05;
-    outline: 2px solid transparent;
+    outline: $spacing-01 solid transparent;
   }
 
   .#{$prefix}--tile--clickable {

package/scss/components/toggle-tip/toggletip.scss

@@ -14,10 +14,11 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/components/toggletip/index' as *;
 @use '@carbon/styles/scss/components/tooltip/index' as *;
-@use '@carbon/styles/scss/components/popover/index' as *;
 @use '@carbon/styles/scss/utilities/button-reset';
+@use '../popover/popover.scss' as *;
 
-:host(#{$prefix}-toggletip) {
+:host(#{$prefix}-toggletip),
+:host(#{$prefix}-slug) {
   // TODO: audit
   @extend .#{$prefix}--toggletip;
 

package/scss/components/tooltip/tooltip.scss

@@ -8,12 +8,11 @@
  */
 
 @use '@carbon/styles/scss/config' as *;
-@use '../popover/popover';
+@use '../popover/popover' as *;
 @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(#{$prefix}-tooltip[data-table]) {
   display: contents;
 

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

@@ -35,7 +35,7 @@ $css--plex: true !default;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
-    height: rem(24px);
+    height: $spacing-06;
     width: rem(1px);
     background-color: $border-subtle;
   }
@@ -77,9 +77,9 @@ $css--plex: true !default;
 
     &::after {
       position: absolute;
-      top: -2px;
-      left: -2px;
-      bottom: -2px;
+      top: -#{$spacing-01};
+      left: -#{$spacing-01};
+      bottom: -#{$spacing-01};
       width: 3px;
       height: 100%;
       background-color: $border-interactive;

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

@@ -77,7 +77,7 @@ $css--plex: true !default;
     top: 0;
     bottom: 0;
     left: 0;
-    width: 4px;
+    width: $spacing-02;
     background-color: $border-interactive;
   }
 }

package/es/components/accordion/accordion-item-skeleton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"sources":["components/accordion/accordion-item-skeleton.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,wBAAwB,CAAC;AAGhC;;GAEG;AACH,cACM,wBAAyB,SAAQ,UAAU;IAC/C,MAAM;IAaN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,wBAAwB,CAAC","file":"accordion-item-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 { LitElement, html } from 'lit';\nimport ChevronRight16 from '@carbon/icons/lib/chevron--right/16';\nimport { customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport '../skeleton-text/index';\nimport styles from './accordion.scss';\n\n/**\n * Skeleton of accordion item.\n */\n@customElement(`${prefix}-accordion-item-skeleton`)\nclass CDSAccordionItemSkeleton extends LitElement {\n  render() {\n    return html`\n      <span class=\"${prefix}--accordion__heading\">\n        ${ChevronRight16({\n          part: 'expando-icon',\n          class: `${prefix}--accordion__arrow`,\n        })}\n        <cds-skeleton-text\n          class=\"${prefix}--accordion__title\"></cds-skeleton-text>\n      </span>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSAccordionItemSkeleton;\n"]}