@carbon/styles 1.77.0-rc.0 → 1.77.1

package/scss/__tests__/type-test.js

@@ -130,8 +130,8 @@ describe('@carbon/styles/scss/type', () => {
     const { stylesheet } = css.parse(result.css.toString());
     const [rule] = stylesheet.rules;
     for (const declaration of rule.declarations) {
-      expect(declaration.property).toEqual(
-        expect.stringContaining('--custom-')
+      expect(declaration.value).toEqual(
+        expect.stringContaining('var(--custom-')
       );
     }
   });

package/scss/_config.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2023
+// Copyright IBM Corp. 2018, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -18,11 +18,11 @@ $css--body: true !default;
 /// @group config
 $css--font-face: true !default;
 
-/// If true, emit the custom type properties in in :root
+/// If true, emit the custom type properties in :root
 /// @access public
 /// @type Bool
 /// @group config
-$css--emit-type-custom-props: true !default;
+$css--emit-type-custom-props: false !default;
 
 /// If true, include reset CSS
 /// @access public

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/menu/_menu.scss

@@ -98,14 +98,6 @@
     }
   }
 
-  .#{$prefix}--menu-item__icon {
-    display: none;
-  }
-
-  .#{$prefix}--menu--with-icons .#{$prefix}--menu-item__icon {
-    display: flex;
-  }
-
   .#{$prefix}--menu-item__label {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -121,18 +113,74 @@
     @include component-reset.reset;
   }
 
+  .#{$prefix}--menu-item__icon,
+  .#{$prefix}--menu-item__selection-icon {
+    display: none;
+  }
+
   .#{$prefix}--menu--with-icons > .#{$prefix}--menu-item,
   .#{$prefix}--menu--with-icons
     > .#{$prefix}--menu-item-group
     > ul
     > .#{$prefix}--menu-item,
   .#{$prefix}--menu--with-icons
+    > .#{$prefix}--menu-item-radio-group
+    > ul
+    > .#{$prefix}--menu-item,
+  .#{$prefix}--menu--with-selectable-items > .#{$prefix}--menu-item,
+  .#{$prefix}--menu--with-selectable-items
+    > .#{$prefix}--menu-item-group
+    > ul
+    > .#{$prefix}--menu-item,
+  .#{$prefix}--menu--with-selectable-items
     > .#{$prefix}--menu-item-radio-group
     > ul
     > .#{$prefix}--menu-item {
     grid-template-columns: 1rem 1fr max-content;
   }
 
+  .#{$prefix}--menu--with-icons
+    > .#{$prefix}--menu-item
+    > .#{$prefix}--menu-item__icon,
+  .#{$prefix}--menu--with-icons
+    > .#{$prefix}--menu-item-group
+    > ul
+    > .#{$prefix}--menu-item
+    > .#{$prefix}--menu-item__icon,
+  .#{$prefix}--menu--with-icons
+    > .#{$prefix}--menu-item-radio-group
+    > ul
+    > .#{$prefix}--menu-item
+    > .#{$prefix}--menu-item__icon,
+  .#{$prefix}--menu--with-selectable-items
+    > .#{$prefix}--menu-item
+    > .#{$prefix}--menu-item__selection-icon,
+  .#{$prefix}--menu--with-selectable-items
+    > .#{$prefix}--menu-item-group
+    > ul
+    > .#{$prefix}--menu-item
+    > .#{$prefix}--menu-item__selection-icon,
+  .#{$prefix}--menu--with-selectable-items
+    > .#{$prefix}--menu-item-radio-group
+    > ul
+    > .#{$prefix}--menu-item
+    > .#{$prefix}--menu-item__selection-icon {
+    display: flex;
+  }
+
+  .#{$prefix}--menu--with-icons.#{$prefix}--menu--with-selectable-items
+    > .#{$prefix}--menu-item,
+  .#{$prefix}--menu--with-icons.#{$prefix}--menu--with-selectable-items
+    > .#{$prefix}--menu-item-group
+    > ul
+    > .#{$prefix}--menu-item,
+  .#{$prefix}--menu--with-icons.#{$prefix}--menu--with-selectable-items
+    > .#{$prefix}--menu-item-radio-group
+    > ul
+    > .#{$prefix}--menu-item {
+    grid-template-columns: 1rem 1rem 1fr max-content;
+  }
+
   .#{$prefix}--menu-item--disabled {
     color: $text-disabled;
     cursor: not-allowed;

package/scss/components/menu-button/_menu-button.scss

@@ -30,19 +30,4 @@
   .#{$prefix}--menu-button__trigger--open svg {
     transform: rotate(180deg);
   }
-
-  // Menu alignment classes
-  $popover-offset: custom-property.get-var('popover-offset', 3rem);
-
-  .#{$prefix}--menu-button__top {
-    transform: translate(0, calc(-100% - $popover-offset));
-  }
-
-  .#{$prefix}--menu-button__top-start {
-    transform: translate(0, calc(-100% - $popover-offset));
-  }
-
-  .#{$prefix}--menu-button__top-end {
-    transform: translate(0, calc(-100% - $popover-offset));
-  }
 }

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