@carbon/styles 1.68.0-rc.0 → 1.69.0-rc.0

package/css/styles.css

@@ -1112,6 +1112,14 @@ em {
   --cds-grid-column-hang: 0.96875rem;
 }
 
+.cds--css-grid--start {
+  margin-inline-start: 0;
+}
+
+.cds--css-grid--end {
+  margin-inline-end: 0;
+}
+
 .cds--subgrid {
   display: grid;
   grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
@@ -4065,8 +4073,8 @@ li.cds--accordion__item--disabled:last-of-type {
   --cds-popover-text-color: var(--cds-text-inverse, #ffffff);
 }
 
-.cds--popover--drop-shadow .cds--popover {
-  --cds-popover-drop-shadow: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
+.cds--popover--drop-shadow .cds--popover > .cds--popover-content {
+  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
 }
 
 .cds--popover--caret {
@@ -11342,7 +11350,7 @@ fieldset[disabled] .cds--form__helper-text {
 
 .cds--data-table td,
 .cds--data-table tbody th {
-  border-block-end: 1px solid var(--cds-border-subtle);
+  border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
   border-block-start: 1px solid var(--cds-layer);
   color: var(--cds-text-secondary, #525252);
   padding-inline: 1rem 1rem;
@@ -11352,6 +11360,16 @@ fieldset[disabled] .cds--form__helper-text {
   padding-inline-start: 0.75rem;
 }
 
+.cds--layer-two .cds--data-table td,
+.cds--layer-two .cds--data-table tbody th {
+  border-block-end: 1px solid var(--cds-border-subtle-02, #e0e0e0);
+}
+
+.cds--layer-three .cds--data-table td,
+.cds--layer-three .cds--data-table tbody th {
+  border-block-end: 1px solid var(--cds-border-subtle-03, #c6c6c6);
+}
+
 @supports (-moz-appearance: none) {
   .cds--data-table td {
     background-clip: padding-box;
@@ -12450,10 +12468,6 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
   transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
-.cds--batch-actions ~ .cds--toolbar-content {
-  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
-}
-
 .cds--toolbar-content .cds--search .cds--search-input {
   padding: 0 3rem;
   background-color: transparent;
@@ -13139,7 +13153,15 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
 }
 
 .cds--data-table td.cds--table-expand {
-  border-block-end: 1px solid var(--cds-border-subtle);
+  border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
+}
+
+.cds--layer-two .cds--data-table td.cds--table-expand {
+  border-block-end: 1px solid var(--cds-border-subtle-02, #e0e0e0);
+}
+
+.cds--layer-three .cds--data-table td.cds--table-expand {
+  border-block-end: 1px solid var(--cds-border-subtle-03, #c6c6c6);
 }
 
 .cds--data-table th.cds--table-expand + .cds--table-column-checkbox,
@@ -14559,7 +14581,7 @@ th .cds--table-sort__flex {
   display: inline-grid;
   align-items: center;
   grid-gap: 0 1.5rem;
-  grid-template: auto auto/auto min-content;
+  grid-template: auto/auto min-content;
 }
 .cds--dropdown__wrapper--inline .cds--label {
   font-size: var(--cds-body-compact-01-font-size, 0.875rem);
@@ -15842,6 +15864,12 @@ button.cds--dropdown-text:focus {
 }
 
 .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__field {
+  position: relative;
+  padding: 0;
+  border: none;
+  background: var(--cds-skeleton-background, #e8e8e8);
+  box-shadow: none;
+  pointer-events: none;
   position: absolute;
   padding: 0;
   block-size: 0.5rem;
@@ -15849,19 +15877,59 @@ button.cds--dropdown-text:focus {
   inset-block-start: 2.25rem;
   inset-inline-start: 1rem;
 }
+.cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__field:hover, .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__field:focus, .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__field:active {
+  border: none;
+  cursor: default;
+  outline: none;
+}
+.cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__field::before {
+  position: absolute;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
+  background: var(--cds-skeleton-element, #c6c6c6);
+  block-size: 100%;
+  content: "";
+  inline-size: 100%;
+  inset-inline-start: 0;
+  will-change: transform-origin, transform, opacity;
+}
+@media (prefers-reduced-motion: reduce) {
+  .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__field::before {
+    animation: none;
+  }
+}
 
 .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__label {
+  position: relative;
+  padding: 0;
+  border: none;
+  background: var(--cds-skeleton-background, #e8e8e8);
+  box-shadow: none;
+  pointer-events: none;
   position: absolute;
   block-size: 0.5rem;
   inline-size: 25%;
   inset-block-start: 1rem;
   inset-inline-start: 1rem;
 }
-
-.cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__field,
-.cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__label {
-  animation: 3000ms ease-in-out skeleton infinite;
+.cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__label:hover, .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__label:focus, .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__label:active {
+  border: none;
+  cursor: default;
+  outline: none;
+}
+.cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__label::before {
+  position: absolute;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
+  block-size: 100%;
+  content: "";
+  inline-size: 100%;
+  inset-inline-start: 0;
+  will-change: transform-origin, transform, opacity;
+}
+@media (prefers-reduced-motion: reduce) {
+  .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__label::before {
+    animation: none;
+  }
 }
 
 .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--slug {
@@ -16907,7 +16975,6 @@ button.cds--dropdown-text:focus {
   background: var(--cds-skeleton-background, #e8e8e8);
   box-shadow: none;
   pointer-events: none;
-  block-size: 2.5rem;
   inline-size: 100%;
 }
 .cds--number.cds--skeleton:hover, .cds--number.cds--skeleton:focus, .cds--number.cds--skeleton:active {
@@ -16934,6 +17001,18 @@ button.cds--dropdown-text:focus {
   display: none;
 }
 
+.cds--number.cds--skeleton.cds--number--sm {
+  block-size: 2rem;
+}
+
+.cds--number.cds--skeleton.cds--number--md {
+  block-size: 2.5rem;
+}
+
+.cds--number.cds--skeleton.cds--number--lg {
+  block-size: 3rem;
+}
+
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--number__control-btn:hover,
   .cds--number__control-btn:focus {