@carbon/styles 1.67.0 → 1.68.0

package/scss/components/text-area/_text-area.scss

@@ -40,7 +40,8 @@
 
     min-inline-size: 10rem;
     resize: vertical;
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
   }
 

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

@@ -46,7 +46,8 @@
     font-family: inherit;
 
     inline-size: 100%;
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
 
     &:focus,
@@ -286,7 +287,8 @@
   .#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper {
     position: relative;
     background: $field;
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
   }
 

package/scss/components/tile/_tile.scss

@@ -297,7 +297,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile-content__below-the-fold {
     display: block;
     opacity: 0;
-    transition: opacity $duration-fast-02 motion(standard, productive),
+    transition:
+      opacity $duration-fast-02 motion(standard, productive),
       visibility $duration-fast-02 motion(standard, productive);
     visibility: hidden;
   }
@@ -312,7 +313,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
 
     .#{$prefix}--tile-content__below-the-fold {
       opacity: 1;
-      transition: opacity $duration-fast-02 motion(standard, productive),
+      transition:
+        opacity $duration-fast-02 motion(standard, productive),
         visibility $duration-fast-02 motion(standard, productive);
       visibility: inherit;
 
@@ -424,7 +426,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     @include ai-popover-gradient('default', 0, 'layer');
 
     border: 1px solid transparent;
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+    box-shadow:
+      inset 0 -80px 70px -65px $ai-inner-shadow,
       0 4px 8px 0 $ai-drop-shadow;
   }
 
@@ -450,7 +453,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before {
     @include ai-popover-gradient('hover', 0, 'layer');
 
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+    box-shadow:
+      inset 0 -80px 70px -65px $ai-inner-shadow,
       0 4px 10px 2px $ai-drop-shadow;
   }
 
@@ -468,7 +472,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after {
     @include ai-popover-gradient('selected', 0, 'layer');
 
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+    box-shadow:
+      inset 0 -80px 70px -65px $ai-inner-shadow,
       0 4px 8px 0 $ai-drop-shadow;
   }
 

package/scss/components/time-picker/_time-picker.scss

@@ -67,7 +67,8 @@
     align-items: center;
     block-size: convert.to-rem(40px);
     inline-size: 4.875rem;
-    transition: outline $duration-fast-01 motion(standard, productive),
+    transition:
+      outline $duration-fast-01 motion(standard, productive),
       background-color $duration-fast-01 motion(standard, productive);
 
     &::placeholder {

package/scss/components/toggle/_toggle.scss

@@ -79,7 +79,9 @@
     .#{$prefix}--toggle__switch,
   .#{$prefix}--toggle:not(.#{$prefix}--toggle--disabled):active
     .#{$prefix}--toggle__switch {
-    box-shadow: 0 0 0 1px $focus-inset, 0 0 0 3px $focus;
+    box-shadow:
+      0 0 0 1px $focus-inset,
+      0 0 0 3px $focus;
   }
 
   .#{$prefix}--toggle__switch--checked {
@@ -186,7 +188,6 @@
     @include high-contrast-mode('outline');
   }
 
-  // stylelint-disable-next-line no-duplicate-selectors
   .#{$prefix}--toggle__button:focus
     + .#{$prefix}--toggle__label
     .#{$prefix}--toggle__switch,

package/scss/components/treeview/_treeview.scss

@@ -40,6 +40,10 @@
     }
   }
 
+  .#{$prefix}--tree-node--hidden {
+    display: none;
+  }
+
   .#{$prefix}--tree-node__children {
     @include component-reset.reset;
 

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

@@ -35,7 +35,7 @@
     block-size: mini-units(6);
     border-block-end: 1px solid $border-subtle;
     inset-block-start: 0;
-    inset-inline: 0 0;
+    inset-inline: 0;
   }
 
   .#{$prefix}--header__action {
@@ -45,7 +45,8 @@
     border: convert.to-rem(1px) solid transparent;
     block-size: mini-units(6);
     inline-size: mini-units(6);
-    transition: background-color $duration-fast-02,
+    transition:
+      background-color $duration-fast-02,
       border-color $duration-fast-02;
     @include breakpoint-down('md') {
       min-inline-size: $spacing-09;
@@ -232,8 +233,10 @@
     line-height: 1.125rem;
     // Reset link styles and make sure the text isn't selectable
     text-decoration: none;
-    transition: background-color $duration-fast-02,
-      border-color $duration-fast-02, color $duration-fast-02;
+    transition:
+      background-color $duration-fast-02,
+      border-color $duration-fast-02,
+      color $duration-fast-02;
     user-select: none;
   }
 
@@ -387,7 +390,9 @@
   .#{$prefix}--header__menu-arrow {
     fill: $icon-secondary;
     margin-inline-start: mini-units(1);
-    transition: transform $duration-fast-02, fill $duration-fast-02;
+    transition:
+      transform $duration-fast-02,
+      fill $duration-fast-02;
   }
 
   //--------------------------------------------------------------------------

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

@@ -36,11 +36,12 @@
     background-color: $background;
     color: $text-secondary;
     inline-size: mini-units(6);
-    inset-block: 0 0;
+    inset-block: 0;
     inset-inline-start: 0;
     max-inline-size: mini-units(32);
     // TODO: sync with motion work
-    transition: inline-size 0.11s cubic-bezier(0.2, 0, 1, 0.9),
+    transition:
+      inline-size 0.11s cubic-bezier(0.2, 0, 1, 0.9),
       transform 0.11s cubic-bezier(0.2, 0, 1, 0.9);
     will-change: inline-size;
   }
@@ -82,7 +83,8 @@
     inset-block-start: convert.to-rem(48px);
     inset-inline-start: 0;
     opacity: 0;
-    transition: opacity $transition-expansion $standard-easing,
+    transition:
+      opacity $transition-expansion $standard-easing,
       background-color $transition-expansion $standard-easing;
   }
 
@@ -93,7 +95,8 @@
       block-size: 100vh;
       inline-size: 100vw;
       opacity: 1;
-      transition: opacity $transition-expansion $standard-easing,
+      transition:
+        opacity $transition-expansion $standard-easing,
         background-color $transition-expansion $standard-easing;
     }
   }
@@ -211,7 +214,9 @@
     padding: 0 mini-units(2);
     block-size: mini-units(4);
     color: $text-secondary;
-    transition: color $duration-fast-02, background-color $duration-fast-02,
+    transition:
+      color $duration-fast-02,
+      background-color $duration-fast-02,
       outline $duration-fast-02;
     user-select: none;
   }
@@ -270,7 +275,7 @@
       background-color: $border-interactive;
       content: '';
       inline-size: 3px;
-      inset-block: 0 0;
+      inset-block: 0;
       inset-inline-start: 0;
     }
   }
@@ -337,7 +342,9 @@
     padding: 0 mini-units(2);
     min-block-size: mini-units(4);
     text-decoration: none;
-    transition: color $duration-fast-02, background-color $duration-fast-02,
+    transition:
+      color $duration-fast-02,
+      background-color $duration-fast-02,
       outline $duration-fast-02;
   }
 
@@ -381,7 +388,7 @@
     background-color: $border-interactive;
     content: '';
     inline-size: 3px;
-    inset-block: 0 0;
+    inset-block: 0;
     inset-inline-start: 0;
   }
 

package/scss/utilities/_ai-gradient.scss

@@ -89,7 +89,8 @@
   );
 
   @if $type == 'hover' {
-    background: linear-gradient(
+    background:
+      linear-gradient(
           to top,
           theme.$ai-aura-hover-start $start,
           15%,
@@ -112,7 +113,8 @@
         )
         border-box;
   } @else if $type == 'selected' {
-    background: linear-gradient(
+    background:
+      linear-gradient(
           to top,
           theme.$ai-aura-start $start,
           15%,
@@ -126,7 +128,8 @@
       linear-gradient(to top, theme.$layer, theme.$layer)
         border-box;
   } @else {
-    background: linear-gradient(
+    background:
+      linear-gradient(
           to top,
           $background $start,
           theme.$ai-aura-start $start,

package/scss/utilities/_convert.scss

@@ -19,8 +19,8 @@ $base-font-size: 16px !default;
 /// @access public
 /// @group utilities
 @function to-rem($px) {
-  @if unit($px) != 'px' {
-    @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  @if math.unit($px) != 'px' {
+    @error "Expected argument $px to be of type `px`, instead received: `#{math.unit($px)}`";
   }
 
   @return math.div($px, $base-font-size) * 1rem;
@@ -34,8 +34,8 @@ $base-font-size: 16px !default;
 /// @deprecated
 /// @group @carbon/layout
 @function rem($px) {
-  @if unit($px) != 'px' {
-    @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  @if math.unit($px) != 'px' {
+    @error "Expected argument $px to be of type `px`, instead received: `#{math.unit($px)}`";
   }
 
   @return math.div($px, $base-font-size) * 1rem;
@@ -47,8 +47,8 @@ $base-font-size: 16px !default;
 /// @access public
 /// @group utilities
 @function em($px) {
-  @if unit($px) != 'px' {
-    @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  @if math.unit($px) != 'px' {
+    @error "Expected argument $px to be of type `px`, instead received: `#{math.unit($px)}`";
   }
 
   @return math.div($px, $base-font-size) * 1em;

package/scss/utilities/_skeleton.scss

@@ -36,6 +36,7 @@
     block-size: 100%;
     content: '';
     inline-size: 100%;
+    inset-inline-start: 0;
     will-change: transform-origin, transform, opacity;
 
     @media (prefers-reduced-motion: reduce) {

package/scss/utilities/_tooltip.scss

@@ -320,11 +320,8 @@
       transform: translate(100%, -50%);
     }
     @if ($position == 'bottom') {
-      border-width: 0
-        convert.to-rem(4px)
-        convert.to-rem(5px)
-        convert.to-rem(4px);
-      border-color: transparent transparent $background-inverse transparent;
+      border-width: 0 convert.to-rem(4px) convert.to-rem(5px);
+      border-color: transparent transparent $background-inverse;
       inset-block-end: -$caret-spacing;
       transform: translate(-50%, 100%);
     }

package/scss/utilities/_z-index.scss

@@ -4,7 +4,7 @@
 // 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 'sass:map';
 /// @access public
 /// @type Map
 /// @group utilities
@@ -30,9 +30,9 @@ $z-indexes: (
 ///     z-index: z('modal');
 ///   }
 @function z($layer) {
-  @if not map-has-key($z-indexes, $layer) {
+  @if not map.has-key($z-indexes, $layer) {
     @warn 'No layer found for `#{$layer}` in $z-indexes map. Property omitted.';
   }
 
-  @return map-get($z-indexes, $layer);
+  @return map.get($z-indexes, $layer);
 }

package/telemetry.yml

@@ -1,7 +1,7 @@
 # yaml-language-server: $schema=https://unpkg.com/@ibm/telemetry-config-schema@v1/dist/config.schema.json
 version: 1
 projectId: d2574dfc-6ec7-4d1a-9c7a-b22cc16dc747
-endpoint: https://collector-prod.1am6wm210aow.us-south.codeengine.appdomain.cloud/v1/metrics
+endpoint: https://www-api.ibm.com/ibm-telemetry/v1/metrics
 collect:
   npm:
     dependencies: null