@carbon/styles 1.57.0-rc.0 → 1.58.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.57.0-rc.0",
+  "version": "1.58.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.22.0-rc.0",
-    "@carbon/feature-flags": "^0.20.0-rc.0",
-    "@carbon/grid": "^11.23.0-rc.0",
-    "@carbon/layout": "^11.22.0-rc.0",
-    "@carbon/motion": "^11.18.0-rc.0",
-    "@carbon/themes": "^11.35.0-rc.0",
-    "@carbon/type": "^11.27.0-rc.0",
+    "@carbon/colors": "^11.22.0",
+    "@carbon/feature-flags": "^0.20.0",
+    "@carbon/grid": "^11.23.0",
+    "@carbon/layout": "^11.22.0",
+    "@carbon/motion": "^11.18.0",
+    "@carbon/themes": "^11.35.0",
+    "@carbon/type": "^11.27.0",
     "@ibm/plex": "6.0.0-next.6",
     "@ibm/telemetry-js": "^1.5.0"
   },
@@ -68,5 +68,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "401633ab2d5fdeaeb89f66bb9040cc1de008599d"
+  "gitHead": "23f19271f964a10a9fbc4616a43b05f5cc14e7d1"
 }

package/scss/components/dialog/_dialog.scss

@@ -0,0 +1,155 @@
+//
+// Copyright IBM Corp. 2014, 2024
+//
+// 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:list';
+@use '../button';
+@use '../../config' as *;
+@use '../../breakpoint' as *;
+@use '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../type' as *;
+@use '../../utilities/ai-gradient' as *;
+@use '../../utilities/convert';
+@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;
+    background-color: $layer;
+    color: $text-primary;
+    inline-size: 48rem;
+    max-block-size: 50%;
+    max-inline-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%;
+    }
+    @include breakpoint(lg) {
+      max-inline-size: 72%;
+    }
+    @include breakpoint(xlg) {
+      max-inline-size: 64%;
+    }
+    @include breakpoint(xlg) {
+      max-inline-size: 60%;
+    }
+
+    &[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;
+      }
+    }
+
+    /** starting style also not supported widely
+    * https://caniuse.com/mdn-css_at-rules_starting-style
+    */
+    /*   Before-open state  */
+    /* Needs to be after the previous dialog[open] rule to take effect,
+    as the specificity is the same */
+    /* stylelint-disable-next-line scss/at-rule-no-unknown */
+    @starting-style {
+      &[open] {
+        opacity: 0;
+        transform: translateY(calc(-1 * #{$spacing-06}));
+      }
+    }
+  }
+
+  .#{$prefix}--dialog__header {
+    position: relative;
+    overflow: visible;
+    inline-size: 100%;
+    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;
+    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);
+
+    @media (prefers-reduced-motion) {
+      transition: none;
+    }
+  }
+
+  /** starting style also not supported widely
+  * 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. */
+  /* stylelint-disable-next-line scss/at-rule-no-unknown */
+  @starting-style {
+    .#{$prefix}--dialog[open]::backdrop {
+      opacity: 0;
+    }
+  }
+
+  .#{$prefix}--dialog__header-controls {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+  }
+}

package/scss/components/dialog/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'dialog';
+@use 'dialog';
+
+@include dialog.dialog;

package/scss/components/pagination/_pagination.scss

@@ -174,6 +174,11 @@
     margin-inline-start: 1rem;
   }
 
+  .#{$prefix}--pagination__right
+    .#{$prefix}--pagination__text.#{$prefix}--pagination__page-text.#{$prefix}--pagination__unknown-pages-text {
+    margin-inline-end: $spacing-05;
+  }
+
   .#{$prefix}--pagination__right .#{$prefix}--pagination__text:empty {
     margin: 0;
   }

package/scss/components/structured-list/_structured-list.scss

@@ -209,8 +209,12 @@
     .#{$prefix}--structured-list-svg {
       fill: transparent;
     }
+    .#{$prefix}--structured-list--selection
+      .#{$prefix}--structured-list-td:last-child {
+      inline-size: $spacing-07;
+      padding-inline-start: 0;
+    }
   }
-
   @if (
     enabled('enable-v12-structured-list-visible-icons') or
       $enable-v12-structured-list-visible-icons
@@ -268,4 +272,12 @@
     margin-block-start: $spacing-01;
     vertical-align: top;
   }
+
+  .#{$prefix}--structured-list--selection
+    .#{$prefix}--structured-list-td:first-child:has(
+      .#{$prefix}--structured-list__icon
+    ) {
+    inline-size: $spacing-07;
+    padding-inline-end: 0;
+  }
 }