@carbon/web-components 2.0.1 → 2.0.2-rc.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 {

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;
   }
 

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;