@carbon/web-components 2.4.0-rc.0 → 2.4.0-rc.2

package/scss/components/popover/popover.scss

@@ -92,10 +92,10 @@ $popover-caret-height: custom-property.get-var(
   );
 }
 
-:host(#{$prefix}-tooltip-content[align^='bottom']),
-:host(#{$prefix}-popover-content[align^='bottom']),
-:host(#{$prefix}-toggletip[alignment^='bottom']),
-:host(#{$prefix}-slug[alignment^='bottom']) {
+:host(#{$prefix}-tooltip-content[align^='bottom']:not([autoalign])),
+:host(#{$prefix}-popover-content[align^='bottom']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment^='bottom']:not([autoalign])),
+:host(#{$prefix}-slug[alignment^='bottom']:not([autoalign])) {
   .#{$prefix}--popover-caret {
     block-size: $popover-caret-height;
     clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
@@ -106,10 +106,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align='bottom']),
-:host(#{$prefix}-popover-content[align='bottom']),
-:host(#{$prefix}-toggletip[alignment='bottom']),
-:host(#{$prefix}-slug[alignment='bottom']) {
+:host(#{$prefix}-tooltip-content[align='bottom']:not([autoalign])),
+:host(#{$prefix}-popover-content[align='bottom']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment='bottom']:not([autoalign])),
+:host(#{$prefix}-slug[alignment='bottom']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-end: 0;
     inset-inline-start: 50%;
@@ -117,10 +117,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align='bottom-left']),
-:host(#{$prefix}-popover-content[align='bottom-left']),
-:host(#{$prefix}-toggletip[alignment='bottom-left']),
-:host(#{$prefix}-slug[alignment='bottom-left']) {
+:host(#{$prefix}-tooltip-content[align='bottom-left']:not([autoalign])),
+:host(#{$prefix}-popover-content[align='bottom-left']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment='bottom-left']:not([autoalign])),
+:host(#{$prefix}-slug[alignment='bottom-left']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-end: 0;
     inset-inline-start: 0;
@@ -131,10 +131,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align='bottom-right']),
-:host(#{$prefix}-popover-content[align='bottom-right']),
-:host(#{$prefix}-toggletip[alignment='bottom-right']),
-:host(#{$prefix}-slug[alignment='bottom-right']) {
+:host(#{$prefix}-tooltip-content[align='bottom-right']:not([autoalign])),
+:host(#{$prefix}-popover-content[align='bottom-right']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment='bottom-right']:not([autoalign])),
+:host(#{$prefix}-slug[alignment='bottom-right']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-end: 0;
     inset-inline-end: 0;
@@ -142,10 +142,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align^='left']),
-:host(#{$prefix}-popover-content[align^='left']),
-:host(#{$prefix}-toggletip[alignment^='left']),
-:host(#{$prefix}-slug[alignment^='left']) {
+:host(#{$prefix}-tooltip-content[align^='left']:not([autoalign])),
+:host(#{$prefix}-popover-content[align^='left']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment^='left']:not([autoalign])),
+:host(#{$prefix}-slug[alignment^='left']:not([autoalign])) {
   .#{$prefix}--popover-caret {
     block-size: $popover-caret-width;
     clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
@@ -156,10 +156,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align='left']),
-:host(#{$prefix}-popover-content[align='left']),
-:host(#{$prefix}-toggletip[alignment='left']),
-:host(#{$prefix}-slug[alignment='left']) {
+:host(#{$prefix}-tooltip-content[align='left']:not([autoalign])),
+:host(#{$prefix}-popover-content[align='left']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment='left']:not([autoalign])),
+:host(#{$prefix}-slug[alignment='left']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-start: 50%;
     inset-inline-end: 100%;
@@ -169,10 +169,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align='left-bottom']),
-:host(#{$prefix}-popover-content[align='left-bottom']),
-:host(#{$prefix}-toggletip[alignment='left-bottom']),
-:host(#{$prefix}-slug[alignment='left-bottom']) {
+:host(#{$prefix}-tooltip-content[align='left-bottom']:not([autoalign])),
+:host(#{$prefix}-popover-content[align='left-bottom']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment='left-bottom']:not([autoalign])),
+:host(#{$prefix}-slug[alignment='left-bottom']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-end: 50%;
     inset-inline-end: 100%;
@@ -185,10 +185,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align='left-top']),
-:host(#{$prefix}-popover-content[align='left-top']),
-:host(#{$prefix}-toggletip[alignment='left-top']),
-:host(#{$prefix}-slug[alignment='left-top']) {
+:host(#{$prefix}-tooltip-content[align='left-top']:not([autoalign])),
+:host(#{$prefix}-popover-content[align='left-top']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment='left-top']:not([autoalign])),
+:host(#{$prefix}-slug[alignment='left-top']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-start: 50%;
     inset-inline-end: 100%;
@@ -201,10 +201,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align^='right']),
-:host(#{$prefix}-popover-content[align^='right']),
-:host(#{$prefix}-toggletip[alignment^='right']),
-:host(#{$prefix}-slug[alignment^='right']) {
+:host(#{$prefix}-tooltip-content[align^='right']:not([autoalign])),
+:host(#{$prefix}-popover-content[align^='right']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment^='right']:not([autoalign])),
+:host(#{$prefix}-slug[alignment^='right']:not([autoalign])) {
   .#{$prefix}--popover-caret {
     block-size: $popover-caret-width;
     clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
@@ -215,10 +215,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align='right']),
-:host(#{$prefix}-popover-content[align='right']),
-:host(#{$prefix}-toggletip[alignment='right']),
-:host(#{$prefix}-slug[alignment='right']) {
+:host(#{$prefix}-tooltip-content[align='right']:not([autoalign])),
+:host(#{$prefix}-popover-content[align='right']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment='right']:not([autoalign])),
+:host(#{$prefix}-slug[alignment='right']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-start: 50%;
     inset-inline-start: 100%;
@@ -228,10 +228,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align='right-bottom']),
-:host(#{$prefix}-popover-content[align='right-bottom']),
-:host(#{$prefix}-toggletip[alignment='right-bottom']),
-:host(#{$prefix}-slug[alignment='right-bottom']) {
+:host(#{$prefix}-tooltip-content[align='right-bottom']:not([autoalign])),
+:host(#{$prefix}-popover-content[align='right-bottom']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment='right-bottom']:not([autoalign])),
+:host(#{$prefix}-slug[alignment='right-bottom']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-end: 50%;
     inset-inline-start: 100%;
@@ -239,10 +239,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align='right-top']),
-:host(#{$prefix}-popover-content[align='right-top']),
-:host(#{$prefix}-toggletip[alignment='right-top']),
-:host(#{$prefix}-slug[alignment='right-top']) {
+:host(#{$prefix}-tooltip-content[align='right-top']:not([autoalign])),
+:host(#{$prefix}-popover-content[align='right-top']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment='right-top']:not([autoalign])),
+:host(#{$prefix}-slug[alignment='right-top']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-start: 50%;
     inset-inline-start: 100%;
@@ -253,10 +253,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align^='top']),
-:host(#{$prefix}-popover-content[align^='top']),
-:host(#{$prefix}-toggletip[alignment^='top']),
-:host(#{$prefix}-slug[alignment^='top']) {
+:host(#{$prefix}-tooltip-content[align^='top']:not([autoalign])),
+:host(#{$prefix}-popover-content[align^='top']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment^='top']:not([autoalign])),
+:host(#{$prefix}-slug[alignment^='top']:not([autoalign])) {
   .#{$prefix}--popover-caret {
     block-size: $popover-caret-height;
     clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
@@ -267,10 +267,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align='top']),
-:host(#{$prefix}-popover-content[align='top']),
-:host(#{$prefix}-toggletip[alignment='top']),
-:host(#{$prefix}-slug[alignment='top']) {
+:host(#{$prefix}-tooltip-content[align='top']:not([autoalign])),
+:host(#{$prefix}-popover-content[align='top']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment='top']:not([autoalign])),
+:host(#{$prefix}-slug[alignment='top']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-start: 0;
     inset-inline-start: 50%;
@@ -278,10 +278,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align='top-left']),
-:host(#{$prefix}-popover-content[align='top-left']),
-:host(#{$prefix}-toggletip[alignment='top-left']),
-:host(#{$prefix}-slug[alignment='top-left']) {
+:host(#{$prefix}-tooltip-content[align='top-left']:not([autoalign])),
+:host(#{$prefix}-popover-content[align='top-left']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment='top-left']:not([autoalign])),
+:host(#{$prefix}-slug[alignment='top-left']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-start: 0;
     inset-inline-start: 0;
@@ -292,13 +292,32 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align='top-right']),
-:host(#{$prefix}-popover-content[align='top-right']),
-:host(#{$prefix}-toggletip[alignment='top-right']),
-:host(#{$prefix}-slug[alignment='top-right']) {
+:host(#{$prefix}-tooltip-content[align='top-right']:not([autoalign])),
+:host(#{$prefix}-popover-content[align='top-right']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment='top-right']:not([autoalign])),
+:host(#{$prefix}-slug[alignment='top-right']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-start: 0;
     inset-inline-end: 0;
     transform: translate($popover-offset, calc(-100% - $popover-offset));
   }
 }
+
+:host(#{$prefix}-toggletip[autoalign]),
+:host(#{$prefix}-tooltip-content[autoalign]),
+:host(#{$prefix}-popover-content[autoalign]) {
+  .#{$prefix}--popover-caret {
+    block-size: 8px;
+    inline-size: 8px;
+    transform: rotate(45deg);
+  }
+}
+
+:host(#{$prefix}-slug[autoalign]),
+:host(#{$prefix}-tooltip[autoalign]),
+:host(#{$prefix}-toggletip[autoalign]),
+:host(#{$prefix}-popover[autoalign]) {
+  .#{$prefix}--popover-container {
+    position: static;
+  }
+}

package/scss/components/slug/slug.scss

@@ -274,44 +274,187 @@ $colorMap: (
 
 // override for specific alignments
 /* stylelint-disable-next-line no-duplicate-selectors */
-:host(#{$prefix}-slug:not([kind='hollow']):not([dot-type='hollow'])) {
-  &[alignment='left-bottom'],
-  &[alignment='right-bottom'] {
-    .#{$prefix}--popover-caret::after {
-      background: transparent;
-    }
+:host(
+    #{$prefix}-slug:not([kind='hollow']):not(
+        [dot-type='hollow']
+      )[alignment='left-end']
+  ),
+:host(
+    #{$prefix}-slug:not([kind='hollow']):not(
+        [dot-type='hollow']
+      )[alignment='left-bottom']
+  ),
+:host(
+    #{$prefix}-slug:not([kind='hollow']):not(
+        [dot-type='hollow']
+      )[alignment='right-end']
+  ),
+:host(
+    #{$prefix}-slug:not([kind='hollow']):not(
+        [dot-type='hollow']
+      )[alignment='right-bottom']
+  ) {
+  .#{$prefix}--popover-caret::after {
+    background: transparent;
   }
 }
 
 // Change caret color / border when it is near the bottom of the callout
 /* stylelint-disable-next-line no-duplicate-selectors */
-:host(#{$prefix}-slug:not([kind='hollow']):not([dot-type='hollow'])) {
-  &[alignment='left-bottom'],
-  &[alignment='right-bottom'],
-  &[alignment='top'],
-  &[alignment='top-right'],
-  &[alignment='top-left'] {
-    .#{$prefix}--popover-caret::before {
-      border-color: $slug-callout-caret-bottom;
-      background: $slug-callout-caret-bottom-background;
-    }
-    // Adjust background if actions are present
-    &[has-actions] {
-      .#{$prefix}--popover-caret::before {
-        background: $slug-callout-caret-bottom-background-actions;
-      }
-    }
+:host(
+    #{$prefix}-slug:not([kind='hollow']):not(
+        [dot-type='hollow']
+      )[alignment='left-end']
+  ),
+:host(
+    #{$prefix}-slug:not([kind='hollow']):not(
+        [dot-type='hollow']
+      )[alignment='left-bottom']
+  ),
+:host(
+    #{$prefix}-slug:not([kind='hollow']):not(
+        [dot-type='hollow']
+      )[alignment='right-end']
+  ),
+:host(
+    #{$prefix}-slug:not([kind='hollow']):not(
+        [dot-type='hollow']
+      )[alignment='right-bottom']
+  ),
+:host(
+    #{$prefix}-slug:not([kind='hollow']):not(
+        [dot-type='hollow']
+      )[alignment^='top']
+  ) {
+  .#{$prefix}--popover-caret::before {
+    border-color: $slug-callout-caret-bottom;
+    background: $slug-callout-caret-bottom-background;
+  }
+}
+
+:host(
+    #{$prefix}-slug[autoalign]:not([kind='hollow']):not(
+        [dot-type='hollow']
+      )[alignment='left-end'][has-actions]
+  ),
+:host(
+    #{$prefix}-slug[autoalign]:not([kind='hollow']):not(
+        [dot-type='hollow']
+      )[alignment='left-bottom'][has-actions]
+  ),
+:host(
+    #{$prefix}-slug[autoalign]:not([kind='hollow']):not(
+        [dot-type='hollow']
+      )[alignment='right-end'][has-actions]
+  ),
+:host(
+    #{$prefix}-slug[autoalign]:not([kind='hollow']):not(
+        [dot-type='hollow']
+      )[alignment='right-bottom'][has-actions]
+  ),
+:host(
+    #{$prefix}-slug[autoalign]:not([kind='hollow']):not(
+        [dot-type='hollow']
+      )[alignment^='top'][has-actions]
+  ) {
+  .#{$prefix}--popover-caret::before {
+    background: $slug-callout-caret-bottom-background-actions;
   }
 }
 
 // Change the caret border when it is near the middle of the callout
 /* stylelint-disable-next-line no-duplicate-selectors */
-:host(#{$prefix}-slug:not([kind='hollow']):not([dot-type='hollow'])) {
-  &[alignment='left'],
-  &[alignment='right'] {
-    .#{$prefix}--popover-caret::before {
-      border-color: $slug-callout-caret-center;
-    }
+:host(
+    #{$prefix}-slug:not([kind='hollow']):not(
+        [dot-type='hollow']
+      )[alignment='left']
+  ),
+:host(
+    #{$prefix}-slug:not([kind='hollow']):not(
+        [dot-type='hollow']
+      )[alignment='right']
+  ) {
+  .#{$prefix}--popover-caret::before {
+    border-color: $slug-callout-caret-center;
+  }
+}
+
+// caret styles for auto align
+:host(#{$prefix}-slug[autoalign]) .#{$prefix}--popover-caret {
+  block-size: $spacing-04;
+  inline-size: $spacing-04;
+}
+
+:host(#{$prefix}-slug[autoalign][kind='hollow']),
+:host(#{$prefix}-slug[autoalign][dot-type='hollow']) {
+  .#{$prefix}--popover-caret {
+    block-size: $spacing-03;
+    inline-size: $spacing-03;
+    transform: rotate(45deg);
+  }
+}
+
+:host(
+    #{$prefix}-slug[autoalign]:not([kind='hollow']):not([dot-type='hollow'])
+  ) {
+  .#{$prefix}--popover-caret::before {
+    inset-block-start: 0;
+  }
+
+  .#{$prefix}--popover-caret {
+    transform: none;
+  }
+
+  .#{$prefix}--popover-caret::after {
+    inline-size: to-rem(14px);
+    inset-block-end: to-rem(5px);
+    inset-inline-start: to-rem(-1px);
+  }
+}
+
+:host(
+    #{$prefix}-slug[autoalign]:not([kind='hollow']):not(
+        [dot-type='hollow']
+      )[alignment^='left']
+  ),
+:host(
+    #{$prefix}-slug[autoalign]:not([kind='hollow']):not(
+        [dot-type='hollow']
+      )[alignment^='right']
+  ) {
+  .#{$prefix}--popover-caret::before {
+    inset-inline-start: 0;
+  }
+  .#{$prefix}--popover-caret::after {
+    block-size: to-rem(14px);
+    inline-size: to-rem(2px);
+    inset-block-start: to-rem(-1px);
+    inset-inline-start: to-rem(5px);
+  }
+}
+
+:host(
+    #{$prefix}-slug[autoalign]:not([kind='hollow']):not(
+        [dot-type='hollow']
+      )[alignment='left-end']
+  ),
+:host(
+    #{$prefix}-slug[autoalign]:not([kind='hollow']):not(
+        [dot-type='hollow']
+      )[alignment='left-bottom']
+  ),
+:host(
+    #{$prefix}-slug[autoalign]:not([kind='hollow']):not(
+        [dot-type='hollow']
+      )[alignment='right-end']
+  ),
+:host(
+    #{$prefix}-slug[autoalign]:not([kind='hollow']):not(
+        [dot-type='hollow']
+      )[alignment='right-bottom']
+  ) {
+  .#{$prefix}--popover-caret::after {
+    background: transparent;
   }
 }
 

package/scss/components/tabs/tabs.scss

@@ -28,7 +28,7 @@ $inset-transition: inset 110ms motion(standard, productive);
     overflow: scroll;
     flex: 1 1 0%;
     // for some reason, overflow: hidden shrinks the content
-    block-size: $spacing-09;
+    block-size: $spacing-08;
     scrollbar-width: none;
 
     &::-webkit-scrollbar {

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

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -10,6 +10,7 @@
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities';
+@use '@carbon/styles/scss/utilities/custom-property' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/components/toggletip/index' as *;
@@ -32,3 +33,14 @@
     background-color: $background-inverse;
   }
 }
+
+:host(#{$prefix}-slug[open][autoalign]),
+:host(#{$prefix}-toggletip[open][autoalign]) {
+  .#{$prefix}--popover-content {
+    display: block;
+
+    @include declaration('popover-background-color', $background-inverse);
+
+    @include declaration('popover-text-color', $text-inverse);
+  }
+}