@carbon/styles 1.90.0-rc.0 → 1.91.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.90.0-rc.0",
+  "version": "1.91.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.40.0-rc.0",
-    "@carbon/feature-flags": "^0.30.0",
-    "@carbon/grid": "^11.43.0-rc.0",
-    "@carbon/layout": "^11.41.0-rc.0",
-    "@carbon/motion": "^11.35.0-rc.0",
-    "@carbon/themes": "^11.60.0-rc.0",
-    "@carbon/type": "^11.47.0-rc.0",
+    "@carbon/colors": "^11.41.0-rc.0",
+    "@carbon/feature-flags": "^0.31.0-rc.0",
+    "@carbon/grid": "^11.44.0-rc.0",
+    "@carbon/layout": "^11.42.0-rc.0",
+    "@carbon/motion": "^11.36.0-rc.0",
+    "@carbon/themes": "^11.61.0-rc.0",
+    "@carbon/type": "^11.48.0-rc.0",
     "@ibm/plex": "6.0.0-next.6",
     "@ibm/plex-mono": "1.1.0",
     "@ibm/plex-sans": "1.1.0",
@@ -54,7 +54,7 @@
     "@ibm/plex-sans-devanagari": "1.1.0",
     "@ibm/plex-sans-hebrew": "0.0.3-alpha.0",
     "@ibm/plex-sans-thai": "0.0.3-alpha.0",
-    "@ibm/plex-sans-thai-looped": "0.0.3-alpha.0",
+    "@ibm/plex-sans-thai-looped": "1.1.0",
     "@ibm/plex-serif": "0.0.3-alpha.0",
     "@ibm/telemetry-js": "^1.5.0"
   },
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "d70cdbd45cfce813ce7ec6b396fcfa95ad2a81b6"
+  "gitHead": "eae1402aa3c86b644feefc43bd3202915404e924"
 }

package/scss/_feature-flags.scss

@@ -15,6 +15,7 @@
     'enable-v12-structured-list-visible-icons': false,
     'enable-dialog-element': false,
     'enable-v12-toggle-reduced-label-spacing': false,
+    'enable-presence': false,
   )
   !default
 );

package/scss/components/dialog/_dialog.scss

@@ -8,6 +8,7 @@
 @use 'sass:list';
 @use '../button';
 @use '../../config' as *;
+@use '../../feature-flags' as *;
 @use '../../breakpoint' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
@@ -21,7 +22,7 @@
 /// Dialog styles
 /// @access public
 /// @group dialog
-@mixin dialog {
+@mixin dialog($enable-presence: false) {
   .#{$prefix}--dialog {
     position: fixed;
     padding: 0;
@@ -32,20 +33,6 @@
     inline-size: 48rem;
     inset: 0;
     max-block-size: 100%;
-    opacity: 0;
-    transform: translateY(calc(-1 * #{$spacing-06}));
-    /** opening and closing is used in as allow-discrete is not currently supported wide enough
-     * https://caniuse.com/mdn-css_properties_display_is_transitionable
-     */
-    transition:
-      opacity $duration-moderate-02 motion(exit, expressive),
-      transform $duration-moderate-02 motion(exit, expressive),
-      overlay $duration-moderate-02 motion(exit, expressive) allow-discrete,
-      display $duration-moderate-02 motion(exit, expressive) allow-discrete;
-
-    @media (prefers-reduced-motion) {
-      transition: none;
-    }
 
     @include breakpoint(md) {
       max-inline-size: 84%;
@@ -57,21 +44,86 @@
       max-inline-size: 48%;
     }
 
-    &[open] {
-      opacity: 1;
-      transform: translateY(0);
-
+    @if not(enabled('enable-presence') or $enable-presence) {
+      opacity: 0;
+      transform: translateY(calc(-1 * #{$spacing-06}));
+      /** opening and closing is used in as allow-discrete is not currently supported wide enough
+       * https://caniuse.com/mdn-css_properties_display_is_transitionable
+       */
       transition:
-        opacity $duration-moderate-02 motion(entrance, expressive),
-        transform $duration-moderate-02 motion(entrance, expressive),
-        overlay $duration-moderate-02 motion(entrance, expressive)
-          allow-discrete,
-        display $duration-moderate-02 motion(entrance, expressive)
-          allow-discrete;
+        opacity $duration-moderate-02 motion(exit, expressive),
+        transform $duration-moderate-02 motion(exit, expressive),
+        overlay $duration-moderate-02 motion(exit, expressive) allow-discrete,
+        display $duration-moderate-02 motion(exit, expressive) allow-discrete;
 
       @media (prefers-reduced-motion) {
         transition: none;
       }
+
+      &[open] {
+        opacity: 1;
+        transform: translateY(0);
+
+        transition:
+          opacity $duration-moderate-02 motion(entrance, expressive),
+          transform $duration-moderate-02 motion(entrance, expressive),
+          overlay
+            $duration-moderate-02
+            motion(entrance, expressive)
+            allow-discrete,
+          display
+            $duration-moderate-02
+            motion(entrance, expressive)
+            allow-discrete;
+
+        @media (prefers-reduced-motion) {
+          transition: none;
+        }
+      }
+    } @else {
+      animation: #{$prefix}--presence-dialog__enter
+        $duration-moderate-02
+        motion(entrance, expressive)
+        forwards;
+
+      @media (prefers-reduced-motion) {
+        animation: none;
+      }
+
+      &[data-exiting] {
+        animation: #{$prefix}--presence-dialog__exit
+          $duration-moderate-02
+          motion(exit, expressive)
+          forwards;
+
+        @media (prefers-reduced-motion) {
+          animation: none;
+        }
+      }
+
+      @keyframes #{$prefix}--presence-dialog__enter {
+        from {
+          opacity: 0;
+          transform: translateY(calc(-1 * #{$spacing-06}));
+        }
+
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      @keyframes #{$prefix}--presence-dialog__exit {
+        from {
+          opacity: 1;
+          transform: translateY(0);
+        }
+
+        to {
+          opacity: 0;
+          transform: translateY(calc(-1 * #{$spacing-06}));
+        }
+      }
     }
 
     /** starting style also not supported widely
@@ -99,30 +151,79 @@
     padding-inline: $spacing-05 $spacing-09;
   }
 
-  /* Transition the :backdrop when the dialog modal is promoted to the top layer */
   .#{$prefix}--dialog::backdrop {
     background-color: $overlay;
     opacity: 0;
-    /* opening and closing is used in as allow-discrete is not currently supported wide enough
-     * https://caniuse.com/mdn-css_properties_display_is_transitionable
-     */
-    transition:
-      background-color $duration-moderate-02 motion(entrance, expressive),
-      opacity $duration-moderate-02 motion(entrance, expressive);
-
-    @media (prefers-reduced-motion) {
-      transition: none;
-    }
   }
 
-  .#{$prefix}--dialog[open]::backdrop {
-    opacity: 1;
-    transition:
-      background-color $duration-moderate-02 motion(exit, expressive),
-      opacity $duration-moderate-02 motion(exit, expressive);
+  @if not(enabled('enable-presence') or $enable-presence) {
+    /* Transition the :backdrop when the dialog modal is promoted to the top layer */
+    .#{$prefix}--dialog::backdrop {
+      /* opening and closing is used in as allow-discrete is not currently supported wide enough
+       * https://caniuse.com/mdn-css_properties_display_is_transitionable
+       */
+      transition:
+        background-color $duration-moderate-02 motion(entrance, expressive),
+        opacity $duration-moderate-02 motion(entrance, expressive);
 
-    @media (prefers-reduced-motion) {
-      transition: none;
+      @media (prefers-reduced-motion) {
+        transition: none;
+      }
+    }
+
+    .#{$prefix}--dialog[open]::backdrop {
+      opacity: 1;
+      transition:
+        background-color $duration-moderate-02 motion(exit, expressive),
+        opacity $duration-moderate-02 motion(exit, expressive);
+
+      @media (prefers-reduced-motion) {
+        transition: none;
+      }
+    }
+  } @else {
+    .#{$prefix}--dialog {
+      &::backdrop {
+        animation: #{$prefix}--presence-dialog-backdrop__enter
+          $duration-moderate-02
+          motion(entrance, expressive)
+          forwards;
+
+        @media (prefers-reduced-motion) {
+          animation: none;
+        }
+      }
+
+      &[data-exiting]::backdrop {
+        animation: #{$prefix}--presence-dialog-backdrop__exit
+          $duration-moderate-02
+          motion(exit, expressive)
+          forwards;
+
+        @media (prefers-reduced-motion) {
+          animation: none;
+        }
+      }
+    }
+
+    @keyframes #{$prefix}--presence-dialog-backdrop__enter {
+      from {
+        opacity: 0;
+      }
+
+      to {
+        opacity: 1;
+      }
+    }
+
+    @keyframes #{$prefix}--presence-dialog-backdrop__exit {
+      from {
+        opacity: 1;
+      }
+
+      to {
+        opacity: 0;
+      }
     }
   }
 
@@ -130,7 +231,7 @@
   * https://caniuse.com/mdn-css_at-rules_starting-style
   */
   /* This starting-style rule cannot be nested inside the above selector
-because the nesting selector cannot represent pseudo-elements. */
+  because the nesting selector cannot represent pseudo-elements. */
 
   @starting-style {
     .#{$prefix}--dialog[open]::backdrop {

package/scss/components/modal/_modal.scss

@@ -26,7 +26,8 @@
 /// @group modal
 @mixin modal(
   $enable-experimental-focus-wrap-without-sentinels: false,
-  $enable-dialog-element: false
+  $enable-dialog-element: false,
+  $enable-presence: false
 ) {
   .#{$prefix}--modal {
     // For modals using the native dialog element, the modal visibility is handled
@@ -49,41 +50,39 @@
       inline-size: 100vw;
       inset-block-start: 0;
       inset-inline-start: 0;
-      opacity: 0;
-      transition:
-        opacity $duration-moderate-02 motion(exit, expressive),
-        visibility 0ms linear $duration-moderate-02;
-      visibility: hidden;
-    }
 
-    // For modals using the native dialog element, the modal visibility is handled
-    // by the Dialog styles.
-    @if not(
-      enabled('enable-experimental-focus-wrap-without-sentinels') or
-        $enable-experimental-focus-wrap-without-sentinels or
-        enabled('enable-dialog-element') or
-        $enable-dialog-element
-    )
-    {
-      &.is-visible {
-        opacity: 1;
-        transition:
-          opacity $duration-moderate-02 motion(entrance, expressive),
-          visibility 0ms linear;
-        visibility: inherit;
-
-        @media screen and (prefers-reduced-motion: reduce) {
-          transition: none;
-        }
+      &.#{$prefix}--modal--enable-presence {
+        @include modal-animations($has-presence: true);
+      }
+
+      &:not(.#{$prefix}--modal--enable-presence) {
+        @include modal-animations(
+          $has-presence: enabled('enable-presence') or $enable-presence
+        );
       }
     }
 
     @include update_fields_on_layer;
   }
 
-  .#{$prefix}--modal.is-visible .#{$prefix}--modal-container {
-    transform: translate3d(0, 0, 0);
-    transition: transform $duration-moderate-02 motion(entrance, expressive);
+  // For modals using the native dialog element, the modal visibility is handled
+  // by the Dialog styles.
+  @if not(
+    enabled('enable-experimental-focus-wrap-without-sentinels') or
+      $enable-experimental-focus-wrap-without-sentinels or
+      enabled('enable-dialog-element') or
+      $enable-dialog-element
+  )
+  {
+    .#{$prefix}--modal--enable-presence {
+      @include modal-container-animations($has-presence: true);
+    }
+
+    :not(.#{$prefix}--modal--enable-presence) {
+      @include modal-container-animations(
+        $has-presence: enabled('enable-presence') or $enable-presence
+      );
+    }
   }
 
   // -----------------------------
@@ -102,12 +101,10 @@
     // make modal edge visible on high contrast themes (#3880)
     outline: 3px solid transparent;
     outline-offset: -3px;
-    transform: translate3d(0, -24px, 0);
     transform-origin: top center;
-    transition: transform $duration-moderate-02 motion(exit, expressive);
 
     @include breakpoint(md) {
-      position: static;
+      position: relative;
       block-size: auto;
       inline-size: 84%;
       max-block-size: 90%;
@@ -493,3 +490,121 @@
     @include high-contrast-mode('focus');
   }
 }
+
+@mixin modal-animations($has-presence: false) {
+  @if not($has-presence) {
+    opacity: 0;
+    transition:
+      opacity $duration-moderate-02 motion(exit, expressive),
+      visibility 0ms linear $duration-moderate-02;
+    visibility: hidden;
+
+    &.is-visible {
+      opacity: 1;
+      transition:
+        opacity $duration-moderate-02 motion(entrance, expressive),
+        visibility 0ms linear;
+      visibility: inherit;
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    }
+  } @else {
+    animation: #{$prefix}--presence-modal__enter
+      $duration-moderate-02
+      motion(entrance, expressive)
+      forwards;
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+
+    &[data-exiting] {
+      animation: #{$prefix}--presence-modal__exit
+        $duration-moderate-02
+        motion(exit, expressive)
+        forwards;
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        animation: none;
+      }
+    }
+
+    @keyframes #{$prefix}--presence-modal__enter {
+      from {
+        opacity: 0;
+      }
+
+      to {
+        opacity: 1;
+      }
+    }
+
+    @keyframes #{$prefix}--presence-modal__exit {
+      from {
+        opacity: 1;
+      }
+
+      to {
+        opacity: 0;
+      }
+    }
+  }
+}
+
+@mixin modal-container-animations($has-presence: false) {
+  @if not($has-presence) {
+    &.is-visible .#{$prefix}--modal-container {
+      transform: translate3d(0, 0, 0);
+      transition: transform $duration-moderate-02 motion(entrance, expressive);
+    }
+
+    .#{$prefix}--modal-container {
+      transform: translate3d(0, -24px, 0);
+      transition: transform $duration-moderate-02 motion(exit, expressive);
+    }
+  } @else {
+    &[data-exiting] .#{$prefix}--modal-container {
+      animation: #{$prefix}--presence-modal-container__exit
+        $duration-moderate-02
+        motion(exit, expressive)
+        forwards;
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        animation: none;
+      }
+    }
+
+    .#{$prefix}--modal-container {
+      animation: #{$prefix}--presence-modal-container__enter
+        $duration-moderate-02
+        motion(entrance, expressive)
+        forwards;
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        animation: none;
+      }
+    }
+
+    @keyframes #{$prefix}--presence-modal-container__enter {
+      from {
+        transform: translate3d(0, -24px, 0);
+      }
+
+      to {
+        transform: translate3d(0, 0, 0);
+      }
+    }
+
+    @keyframes #{$prefix}--presence-modal-container__exit {
+      from {
+        transform: translate3d(0, 0, 0);
+      }
+
+      to {
+        transform: translate3d(0, -24px, 0);
+      }
+    }
+  }
+}

package/scss/components/toggle/_toggle.scss

@@ -176,7 +176,7 @@
     background-color: transparent;
 
     &::before {
-      background-color: $text-primary;
+      background-color: $icon-primary;
       inset-block-start: convert.to-rem(2px);
       inset-inline-start: convert.to-rem(2px);
     }

package/scss/components/toggletip/_toggletip.scss

@@ -22,7 +22,9 @@
     color: theme.$text-secondary;
     margin-inline-end: spacing.$spacing-03;
   }
-
+  :host([slot='label-text']) .#{$prefix}--toggletip-label {
+    @include type.type-style('label-01');
+  }
   .#{$prefix}--toggletip-button {
     @include button-reset.reset();