@carbon/styles 1.77.2 → 1.78.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.77.2",
+  "version": "1.78.0-rc.0",
   "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.2",
-    "@carbon/layout": "^11.30.2",
+    "@carbon/feature-flags": "^0.25.0-rc.0",
+    "@carbon/grid": "^11.33.0-rc.0",
+    "@carbon/layout": "^11.31.0-rc.0",
     "@carbon/motion": "^11.25.0",
-    "@carbon/themes": "^11.48.2",
-    "@carbon/type": "^11.36.2",
+    "@carbon/themes": "^11.49.0-rc.0",
+    "@carbon/type": "^11.37.0-rc.0",
     "@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": "5c8f7e2a47c2bfb2865f1f2f4efe55b26f45ad5c"
+  "gitHead": "0c142888f7e3aefd5a5b5b0b2c34c2552894bb56"
 }

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/breadcrumb/_breadcrumb.scss

@@ -57,6 +57,11 @@
     }
   }
 
+  .#{$prefix}--breadcrumb-item .#{$prefix}--link:active,
+  .#{$prefix}--breadcrumb-item .#{$prefix}--link:visited:active:hover {
+    color: $text-primary;
+  }
+
   .#{$prefix}--breadcrumb-item::after {
     color: $text-primary;
     content: '/';
@@ -96,20 +101,40 @@
   .#{$prefix}--breadcrumb-item .#{$prefix}--overflow-menu {
     position: relative;
     block-size: convert.to-rem(18px);
-    inline-size: convert.to-rem(20px);
+    inline-size: $spacing-05;
 
     &:focus {
+      border: none;
+      box-shadow: none;
       outline: 1px solid $focus;
+      outline-offset: 0;
     }
 
     &:hover {
       background: transparent;
+
+      &::after {
+        background: $link-primary-hover;
+      }
+    }
+
+    &:active {
+      &::after {
+        background: $text-primary;
+      }
+    }
+
+    &:focus,
+    &:hover {
+      &::after {
+        opacity: 1;
+      }
     }
 
     // Used to mimic link underline
     &::after {
       position: absolute;
-      background: $link-primary-hover;
+      background: $focus;
       block-size: 1px;
       content: '';
       inline-size: convert.to-rem(12px);
@@ -123,16 +148,6 @@
     }
   }
 
-  .#{$prefix}--breadcrumb--sm
-    .#{$prefix}--breadcrumb-item
-    .#{$prefix}--overflow-menu {
-    inline-size: $spacing-05;
-  }
-
-  .#{$prefix}--breadcrumb-item .#{$prefix}--overflow-menu:hover::after {
-    opacity: 1;
-  }
-
   .#{$prefix}--breadcrumb-item
     .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open {
     background: transparent;
@@ -153,6 +168,12 @@
     fill: $link-primary-hover;
   }
 
+  .#{$prefix}--breadcrumb-item
+    .#{$prefix}--overflow-menu:active
+    .#{$prefix}--overflow-menu__icon {
+    fill: $text-primary;
+  }
+
   .#{$prefix}--breadcrumb-menu-options:focus {
     outline: none;
   }
@@ -176,6 +197,23 @@
     inset-inline-start: initial;
   }
 
+  .#{$prefix}--breadcrumb
+    .#{$prefix}--overflow-menu.#{$prefix}--btn--icon-only {
+    min-block-size: 1.125rem;
+    padding-inline: 0;
+  }
+
+  .#{$prefix}--breadcrumb--sm
+    .#{$prefix}--breadcrumb-item
+    .#{$prefix}--overflow-menu {
+    block-size: $spacing-05;
+    inline-size: $spacing-05;
+    min-block-size: $spacing-05;
+    .#{$prefix}--overflow-menu__icon {
+      transform: translateY(3px);
+    }
+  }
+
   // Skeleton State
   .#{$prefix}--breadcrumb.#{$prefix}--skeleton .#{$prefix}--link {
     @include skeleton;
@@ -183,10 +221,4 @@
     block-size: 1rem;
     inline-size: convert.to-rem(100px);
   }
-
-  .#{$prefix}--breadcrumb
-    .#{$prefix}--overflow-menu.#{$prefix}--btn--icon-only {
-    min-block-size: 1.125rem;
-    padding-inline: 0;
-  }
 }

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