@carbon/styles 1.77.0 → 1.77.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.77.0",
+  "version": "1.77.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -41,12 +41,12 @@
   },
   "dependencies": {
     "@carbon/colors": "^11.30.0",
-    "@carbon/feature-flags": "^0.24.0",
-    "@carbon/grid": "^11.32.0",
-    "@carbon/layout": "^11.30.0",
+    "@carbon/feature-flags": "^0.24.1",
+    "@carbon/grid": "^11.32.1",
+    "@carbon/layout": "^11.30.1",
     "@carbon/motion": "^11.25.0",
-    "@carbon/themes": "^11.48.0",
-    "@carbon/type": "^11.36.0",
+    "@carbon/themes": "^11.48.1",
+    "@carbon/type": "^11.36.1",
     "@ibm/plex": "6.0.0-next.6",
     "@ibm/plex-mono": "0.0.3-alpha.0",
     "@ibm/plex-sans": "0.0.3-alpha.0",
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "7ffd4731509c6e3d768cfb9029478b27db8f807d"
+  "gitHead": "538413f7766dea6ef4bc4eb5e752b0119779f10a"
 }

package/scss/_feature-flags.scss

@@ -13,6 +13,7 @@
     'enable-experimental-tile-contrast': false,
     'enable-v12-tile-radio-icons': false,
     'enable-v12-structured-list-visible-icons': false,
+    'enable-dialog-element': false,
   )
   !default
 );

package/scss/components/_index.scss

@@ -25,6 +25,7 @@
 @use 'data-table/skeleton';
 @use 'data-table/sort';
 @use 'date-picker';
+@use 'dialog';
 @use 'dropdown';
 @use 'file-uploader';
 @use 'fluid-combo-box';

package/scss/components/dialog/_dialog.scss

@@ -18,16 +18,14 @@
 @use '../../utilities/component-reset';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
-@use '../../utilities/z-index' as *;
 
 /// Dialog styles
 /// @access public
 /// @group dialog
 @mixin dialog {
   .#{$prefix}--dialog {
-    /* size */
     padding: 0;
-    border: 1px solid $border-subtle-01;
+    border: none;
     background-color: $layer;
     color: $text-primary;
     inline-size: 48rem;
@@ -101,15 +99,6 @@
     min-block-size: $spacing-09;
   }
 
-  .#{$prefix}--dialog__content {
-    padding: $spacing-05;
-    block-size: 100%;
-  }
-
-  .#{$prefix}--dialog--modal {
-    border: 1px solid transparent;
-  }
-
   /* Transition the :backdrop when the dialog modal is promoted to the top layer */
   .#{$prefix}--dialog::backdrop {
     background-color: $overlay;

package/scss/components/modal/_modal.scss

@@ -7,6 +7,7 @@
 
 @use '../button';
 @use '../../config' as *;
+@use '../../feature-flags' as *;
 @use '../../breakpoint' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
@@ -23,34 +24,57 @@
 /// Modal styles
 /// @access public
 /// @group modal
-@mixin modal {
+@mixin modal(
+  $enable-experimental-focus-wrap-without-sentinels: false,
+  $enable-dialog-element: false
+) {
   .#{$prefix}--modal {
-    position: fixed;
-    z-index: z('modal');
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: $overlay;
-    block-size: 100vh;
-    content: '';
-    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;
-
-    &.is-visible {
-      opacity: 1;
+    // 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
+    )
+    {
+      position: fixed;
+      z-index: z('modal');
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: $overlay;
+      block-size: 100vh;
+      content: '';
+      inline-size: 100vw;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      opacity: 0;
       transition:
-        opacity $duration-moderate-02 motion(entrance, expressive),
-        visibility 0ms linear;
-      visibility: inherit;
+        opacity $duration-moderate-02 motion(exit, expressive),
+        visibility 0ms linear $duration-moderate-02;
+      visibility: hidden;
+    }
 
-      @media screen and (prefers-reduced-motion: reduce) {
-        transition: none;
+    // 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;
+        }
       }
     }