lightning-base-components 1.21.2-alpha → 1.21.4-alpha

package/src/lightning/sldsUtilsGrid/sldsUtilsGrid.css

@@ -8,252 +8,255 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
  */
 
 /* Base */
-.slds-grid,
-:host(.slds-grid) {
+
+:host([data-render-mode='shadow']) .slds-grid,
+:host([data-render-mode='shadow'].slds-grid) {
     display: flex;
 }
 
-.slds-grid_frame,
-:host(.slds-grid_frame) {
+:host([data-render-mode='shadow']) .slds-grid_frame,
+:host([data-render-mode='shadow'].slds-grid_frame) {
     min-width: 100vw;
     min-height: 100vh;
     overflow: hidden;
 }
 
-.slds-grid_vertical,
-:host(.slds-grid_vertical) {
+:host([data-render-mode='shadow']) .slds-grid_vertical,
+:host([data-render-mode='shadow'].slds-grid_vertical) {
     flex-direction: column;
 }
 
-.slds-grid_vertical-reverse,
-:host(.slds-grid_vertical-reverse) {
+:host([data-render-mode='shadow']) .slds-grid_vertical-reverse,
+:host([data-render-mode='shadow'].slds-grid_vertical-reverse) {
     flex-direction: column-reverse;
 }
 
-.slds-grid_reverse,
-:host(.slds-grid_reverse) {
+:host([data-render-mode='shadow']) .slds-grid_reverse,
+:host([data-render-mode='shadow'].slds-grid_reverse) {
     flex-direction: row-reverse;
 }
 
 /* Flex */
-.slds-wrap,
-:host(.slds-wrap) {
+
+:host([data-render-mode='shadow']) .slds-wrap,
+:host([data-render-mode='shadow'].slds-wrap) {
     flex-wrap: wrap;
     align-items: flex-start;
 }
 
 /* No Wrap */
-.slds-nowrap,
-:host(.slds-nowrap) {
+
+:host([data-render-mode='shadow']) .slds-nowrap,
+:host([data-render-mode='shadow'].slds-nowrap) {
     flex: 1 1 auto;
     flex-wrap: nowrap;
     align-items: stretch;
 }
 
 @media (min-width: 30em) {
-
     /* This is deprecated, included for backward compatibility. use `slds-nowrap` instead */
-    .slds-nowrap_small,
-    :host(.slds-nowrap_small) {
+    :host([data-render-mode='shadow']) .slds-nowrap_small,
+    :host([data-render-mode='shadow'].slds-nowrap_small) {
         flex: 1 1 auto;
         flex-wrap: nowrap;
         align-items: stretch;
     }
-
 }
 
 @media (min-width: 48em) {
-
     /* This is deprecated, included for backward compatibility. use `slds-nowrap` instead */
-    .slds-nowrap_medium,
-    :host(.slds-nowrap_medium) {
+    :host([data-render-mode='shadow']) .slds-nowrap_medium,
+    :host([data-render-mode='shadow'].slds-nowrap_medium) {
         flex: 1 1 auto;
         flex-wrap: nowrap;
         align-items: stretch;
     }
-
 }
 
 @media (min-width: 64em) {
-
     /* This is deprecated, included for backward compatibility. use `slds-nowrap` instead */
-    .slds-nowrap_large,
-    :host(.slds-nowrap_large) {
+    :host([data-render-mode='shadow']) .slds-nowrap_large,
+    :host([data-render-mode='shadow'].slds-nowrap_large) {
         flex: 1 1 auto;
         flex-wrap: nowrap;
         align-items: stretch;
     }
-
 }
 
 /* Gutters */
-.slds-gutters,
-:host(.slds-gutters) {
+
+:host([data-render-mode='shadow']) .slds-gutters,
+:host([data-render-mode='shadow'].slds-gutters) {
     margin-inline-end: (var(--slds-g-spacing-3, 0.75rem) * -1);
     margin-inline-start: (var(--slds-g-spacing-3, 0.75rem) * -1);
 }
 
-.slds-gutters .slds-col,
-:host(.slds-gutters) .slds-col {
+:host([data-render-mode='shadow']) .slds-gutters .slds-col,
+:host([data-render-mode='shadow'].slds-gutters) .slds-col {
     padding-right: var(--slds-g-spacing-3, 0.75rem);
     padding-left: var(--slds-g-spacing-3, 0.75rem);
 }
 
 /* Col */
-.slds-col,
-:host(.slds-col),
-[class*="slds-col_padded"],
-:host([class*="slds-col_padded"]) {
+
+:host([data-render-mode='shadow']) .slds-col,
+:host([data-render-mode='shadow'].slds-col),
+:host([data-render-mode='shadow']) [class*='slds-col_padded'],
+:host([data-render-mode='shadow'][class*='slds-col_padded']) {
     flex: 1 1 auto;
 }
 
-.slds-has-flexi-truncate,
-:host(.slds-has-flexi-truncate) {
+:host([data-render-mode='shadow']) .slds-has-flexi-truncate,
+:host([data-render-mode='shadow'].slds-has-flexi-truncate) {
     flex: 1 1 0%;
     min-width: 0;
 }
 
-.slds-no-flex,
-:host(.slds-no-flex) {
+:host([data-render-mode='shadow']) .slds-no-flex,
+:host([data-render-mode='shadow'].slds-no-flex) {
     flex: none;
 }
 
-.slds-no-space,
-:host(.slds-no-space) {
+:host([data-render-mode='shadow']) .slds-no-space,
+:host([data-render-mode='shadow'].slds-no-space) {
     min-width: 0;
 }
 
-.slds-grow,
-:host(.slds-grow) {
+:host([data-render-mode='shadow']) .slds-grow,
+:host([data-render-mode='shadow'].slds-grow) {
     flex-grow: 1;
 }
 
-.slds-grow-none,
-:host(.slds-grow-none) {
+:host([data-render-mode='shadow']) .slds-grow-none,
+:host([data-render-mode='shadow'].slds-grow-none) {
     flex-grow: 0;
 }
 
-.slds-shrink,
-:host(.slds-shrink) {
+:host([data-render-mode='shadow']) .slds-shrink,
+:host([data-render-mode='shadow'].slds-shrink) {
     flex-shrink: 1;
 }
 
-.slds-shrink-none,
-:host(.slds-shrink-none) {
+:host([data-render-mode='shadow']) .slds-shrink-none,
+:host([data-render-mode='shadow'].slds-shrink-none) {
     flex-shrink: 0;
 }
 
-.slds-grid_align-center .slds-col,
-.slds-grid_align-space .slds-col,
-.slds-grid_align-spread .slds-col,
-.slds-grid_align-end .slds-col,
-:host(.slds-grid_align-center) .slds-col,
-:host(.slds-grid_align-space) .slds-col,
-:host(.slds-grid_align-spread) .slds-col,
-:host(.slds-grid_align-end) .slds-col {
+:host([data-render-mode='shadow']) .slds-grid_align-center .slds-col,
+:host([data-render-mode='shadow']) .slds-grid_align-space .slds-col,
+:host([data-render-mode='shadow']) .slds-grid_align-spread .slds-col,
+:host([data-render-mode='shadow']) .slds-grid_align-end .slds-col,
+:host([data-render-mode='shadow'].slds-grid_align-center) .slds-col,
+:host([data-render-mode='shadow'].slds-grid_align-space) .slds-col,
+:host([data-render-mode='shadow'].slds-grid_align-spread) .slds-col,
+:host([data-render-mode='shadow'].slds-grid_align-end) .slds-col {
     flex-grow: 0;
 }
 
 /* Horizontal Alignment */
-.slds-grid_align-center,
-:host(.slds-grid_align-center) {
+
+:host([data-render-mode='shadow']) .slds-grid_align-center,
+:host([data-render-mode='shadow'].slds-grid_align-center) {
     justify-content: center;
 }
 
-.slds-grid_align-space,
-:host(.slds-grid_align-space) {
+:host([data-render-mode='shadow']) .slds-grid_align-space,
+:host([data-render-mode='shadow'].slds-grid_align-space) {
     justify-content: space-around;
 }
 
-.slds-grid_align-spread,
-:host(.slds-grid_align-spread) {
+:host([data-render-mode='shadow']) .slds-grid_align-spread,
+:host([data-render-mode='shadow'].slds-grid_align-spread) {
     justify-content: space-between;
 }
 
-.slds-grid_align-end,
-:host(.slds-grid_align-end) {
+:host([data-render-mode='shadow']) .slds-grid_align-end,
+:host([data-render-mode='shadow'].slds-grid_align-end) {
     justify-content: flex-end;
 }
 
 /* Vertical Alignment */
-.slds-grid_vertical-align-start,
-:host(.slds-grid_vertical-align-start) {
+
+:host([data-render-mode='shadow']) .slds-grid_vertical-align-start,
+:host([data-render-mode='shadow'].slds-grid_vertical-align-start) {
     align-items: flex-start;
     align-content: flex-start;
 }
 
-.slds-grid_vertical-align-center,
-:host(.slds-grid_vertical-align-center) {
+:host([data-render-mode='shadow']) .slds-grid_vertical-align-center,
+:host([data-render-mode='shadow'].slds-grid_vertical-align-center) {
     align-items: center;
     align-content: center;
 }
 
-.slds-grid_vertical-align-end,
-:host(.slds-grid_vertical-align-end) {
+:host([data-render-mode='shadow']) .slds-grid_vertical-align-end,
+:host([data-render-mode='shadow'].slds-grid_vertical-align-end) {
     align-items: flex-end;
     align-content: flex-end;
 }
 
-.slds-grid_vertical-stretch,
-:host(.slds-grid_vertical-stretch) {
+:host([data-render-mode='shadow']) .slds-grid_vertical-stretch,
+:host([data-render-mode='shadow'].slds-grid_vertical-stretch) {
     align-items: stretch;
     align-content: stretch;
 }
 
 /* Boundary */
-.slds-grid_pull-padded,
-:host(.slds-grid_pull-padded) {
+
+:host([data-render-mode='shadow']) .slds-grid_pull-padded,
+:host([data-render-mode='shadow'].slds-grid_pull-padded) {
     margin-inline-end: (var(--slds-g-spacing-3, 0.75rem) * -1);
     margin-inline-start: (var(--slds-g-spacing-3, 0.75rem) * -1);
 }
 
-.slds-grid_pull-padded-medium,
-:host(.slds-grid_pull-padded-medium) {
+:host([data-render-mode='shadow']) .slds-grid_pull-padded-medium,
+:host([data-render-mode='shadow'].slds-grid_pull-padded-medium) {
     margin-inline-end: (var(--slds-g-spacing-4, 1rem) * -1);
     margin-inline-start: (var(--slds-g-spacing-4, 1rem) * -1);
 }
 
-.slds-grid_pull-padded-large,
-:host(.slds-grid_pull-padded-large) {
+:host([data-render-mode='shadow']) .slds-grid_pull-padded-large,
+:host([data-render-mode='shadow'].slds-grid_pull-padded-large) {
     margin-inline-end: (var(--slds-g-spacing-5, 1.5rem) * -1);
     margin-inline-start: (var(--slds-g-spacing-5, 1.5rem) * -1);
 }
 
-.slds-align-top,
-:host(.slds-align-top) {
+:host([data-render-mode='shadow']) .slds-align-top,
+:host([data-render-mode='shadow'].slds-align-top) {
     vertical-align: top;
     align-self: flex-start;
 }
 
-.slds-align-middle,
-:host(.slds-align-middle) {
+:host([data-render-mode='shadow']) .slds-align-middle,
+:host([data-render-mode='shadow'].slds-align-middle) {
     vertical-align: middle;
     align-self: center;
 }
 
-.slds-align-bottom,
-:host(.slds-align-bottom) {
+:host([data-render-mode='shadow']) .slds-align-bottom,
+:host([data-render-mode='shadow'].slds-align-bottom) {
     vertical-align: bottom;
     align-self: flex-end;
 }
 
 /* Bump */
-.slds-col_bump-top,
-:host(.slds-col_bump-top) {
+
+:host([data-render-mode='shadow']) .slds-col_bump-top,
+:host([data-render-mode='shadow'].slds-col_bump-top) {
     margin-top: auto;
 }
 
-.slds-col_bump-right,
-:host(.slds-col_bump-right) {
+:host([data-render-mode='shadow']) .slds-col_bump-right,
+:host([data-render-mode='shadow'].slds-col_bump-right) {
     margin-inline-end: auto;
 }
 
-.slds-col_bump-bottom,
-:host(.slds-col_bump-bottom) {
+:host([data-render-mode='shadow']) .slds-col_bump-bottom,
+:host([data-render-mode='shadow'].slds-col_bump-bottom) {
     margin-bottom: auto;
 }
 
-.slds-col_bump-left,
-:host(.slds-col_bump-left) {
+:host([data-render-mode='shadow']) .slds-col_bump-left,
+:host([data-render-mode='shadow'].slds-col_bump-left) {
     margin-inline-start: auto;
 }

package/src/lightning/sldsUtilsHyphenation/sldsUtilsHyphenation.css

@@ -1,7 +1,7 @@
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
-.slds-hyphenate {
+:host([data-render-mode='shadow']) .slds-hyphenate {
     overflow-wrap: break-word;
     word-wrap: break-word;
     hyphens: auto;