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

package/src/lightning/sldsCommon/sldsCommon.css

@@ -11,45 +11,60 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     box-sizing: border-box;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+:host([data-render-mode='shadow']) h1,
+:host([data-render-mode='shadow']) h2,
+:host([data-render-mode='shadow']) h3,
+:host([data-render-mode='shadow']) h4,
+:host([data-render-mode='shadow']) h5,
+:host([data-render-mode='shadow']) h6 {
     font-weight: var(--sds-s-heading-font-weight, inherit);
-    margin-block-start: var(--sds-s-heading-spacing-block-start, var(--sds-s-heading-spacing-block));
-    margin-block-end: var(--sds-s-heading-spacing-block-end, var(--sds-s-heading-spacing-block));
+    margin-block-start: var(
+        --sds-s-heading-spacing-block-start,
+        var(--sds-s-heading-spacing-block)
+    );
+    margin-block-end: var(
+        --sds-s-heading-spacing-block-end,
+        var(--sds-s-heading-spacing-block)
+    );
     font-size: 1em;
 }
 
-a {
+:host([data-render-mode='shadow']) a {
     color: var(--slds-g-link-color, var(--slds-g-color-brand-base-50, #0176d3));
     text-decoration: var(--_slds-g-font-decoration, none);
     transition: color 0.1s linear;
     background-color: transparent;
 }
 
-a:active,
-a:hover {
+:host([data-render-mode='shadow']) a:active,
+:host([data-render-mode='shadow']) a:hover {
     outline: 0;
 }
 
-a:hover,
-a:focus {
+:host([data-render-mode='shadow']) a:hover,
+:host([data-render-mode='shadow']) a:focus {
     text-decoration: var(--_slds-g-font-decoration-hover, underline);
-    color: var(--slds-g-link-color-hover, var(--slds-g-color-brand-base-30, #014486));
+    color: var(
+        --slds-g-link-color-hover,
+        var(--slds-g-color-brand-base-30, #014486)
+    );
 }
 
-a:active {
-    color: var(--slds-g-link-color-active, var(--slds-g-color-brand-base-30, #014486));
+:host([data-render-mode='shadow']) a:active {
+    color: var(
+        --slds-g-link-color-active,
+        var(--slds-g-color-brand-base-30, #014486)
+    );
 }
 
-a:focus-visible {
-    outline-color: var(--_slds-g-color-outline, var(--slds-g-color-brand-base-50, #0176d3));
+:host([data-render-mode='shadow']) a:focus-visible {
+    outline-color: var(
+        --_slds-g-color-outline,
+        var(--slds-g-color-brand-base-50, #0176d3)
+    );
 }
 
-a:focus {
+:host([data-render-mode='shadow']) a:focus {
     box-shadow: var(--_slds-g-shadow);
     border-color: var(--_slds-g-color-border);
     border-width: var(--_slds-g-sizing-border);
@@ -57,16 +72,20 @@ a:focus {
     outline: var(--_slds-g-font-decoration-hover);
 }
 
-a,
-button {
+:host([data-render-mode='shadow']) a,
+:host([data-render-mode='shadow']) button {
     cursor: pointer;
 }
 
-p {
-    margin-block-start: var(--sds-s-content-spacing-block-start,
-            var(--sds-s-content-spacing-block, 0));
-    margin-block-end: var(--sds-s-content-spacing-block-end,
-            var(--sds-s-content-spacing-block, 0));
+:host([data-render-mode='shadow']) p {
+    margin-block-start: var(
+        --sds-s-content-spacing-block-start,
+        var(--sds-s-content-spacing-block, 0)
+    );
+    margin-block-end: var(
+        --sds-s-content-spacing-block-end,
+        var(--sds-s-content-spacing-block, 0)
+    );
     margin-inline-start: 0;
     margin-inline-end: 0;
     padding-block-start: 0;
@@ -75,56 +94,65 @@ p {
     padding-inline-end: 0;
 }
 
-ol,
-ul {
+:host([data-render-mode='shadow']) ol,
+:host([data-render-mode='shadow']) ul {
     list-style: none;
     padding: 0;
-    margin-block-start: var(--sds-s-content-spacing-block-start,
-            var(--sds-s-content-spacing-block));
-    margin-block-end: var(--sds-s-content-spacing-block-end,
-            var(--sds-s-content-spacing-block));
-}
-
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+    margin-block-start: var(
+        --sds-s-content-spacing-block-start,
+        var(--sds-s-content-spacing-block)
+    );
+    margin-block-end: var(
+        --sds-s-content-spacing-block-end,
+        var(--sds-s-content-spacing-block)
+    );
+}
+
+:host([data-render-mode='shadow']) button,
+:host([data-render-mode='shadow']) [type='button'],
+:host([data-render-mode='shadow']) [type='reset'],
+:host([data-render-mode='shadow']) [type='submit'] {
     -webkit-appearance: button;
     appearance: button;
     cursor: pointer;
 }
 
-[type='search'] {
+:host([data-render-mode='shadow']) [type='search'] {
     -webkit-appearance: textfield;
     outline-offset: -2px;
 }
 
-[type=search]::-webkit-search-decoration,
-[type=search]::-webkit-search-cancel-button,
-[type=search]::-webkit-search-results-button,
-[type=search]::-webkit-search-results-decoration {
+:host([data-render-mode='shadow']) [type='search']::-webkit-search-decoration,
+:host([data-render-mode='shadow'])
+    [type='search']::-webkit-search-cancel-button,
+:host([data-render-mode='shadow'])
+    [type='search']::-webkit-search-results-button,
+:host([data-render-mode='shadow'])
+    [type='search']::-webkit-search-results-decoration {
     display: none;
 }
 
 /* Below selectors are commented out
-because it seems to disrupt synthetic mode
-styling but exist in SLDS-internal.
-They are added in to individual component css
-(ex. calendar.css) */
+  because it seems to disrupt synthetic mode
+  styling but exist in SLDS-internal.
+  They are added in to individual component css
+  (ex. calendar.css) */
+
 /* button,
-input,
-optgroup,
-textarea, */
-select {
+  input,
+  optgroup,
+  textarea, */
+
+:host([data-render-mode='shadow']) select {
     color: inherit;
     font: inherit;
     margin: 0;
 }
 
-input:focus,
-button:focus,
-select:focus,
-textarea:focus {
+:host([data-render-mode='shadow']) input:focus,
+:host([data-render-mode='shadow']) button:focus,
+:host([data-render-mode='shadow']) select:focus,
+:host([data-render-mode='shadow']) textarea:focus {
     outline-offset: 0;
 }
 
@@ -150,119 +178,127 @@ textarea:focus {
     box-shadow: none;
 }
 
-code,
-kbd,
-samp,
-pre {
-    font-family: var(--sds-g-font-family-monospace, monospace);
-    font-size: var(--sds-g-font-size-base, 1rem);
-}
-
-img,
-[type='image'] {
+:host([data-render-mode='shadow']) code,
+:host([data-render-mode='shadow']) kbd,
+:host([data-render-mode='shadow']) samp,
+:host([data-render-mode='shadow']) pre {
+    font-family: var(
+        --sds-g-font-family-monospace,
+        Consolas,
+        Menlo,
+        Monaco,
+        Courier,
+        monospace,
+        monospace
+    );
+    font-size: var(--sds-g-font-size-base, 0.875rem, 1rem);
+}
+
+:host([data-render-mode='shadow']) img,
+:host([data-render-mode='shadow']) [type='image'] {
     max-width: 100%;
     height: auto;
     border: 0;
     vertical-align: middle;
 }
 
-iframe {
+:host([data-render-mode='shadow']) iframe {
     border-style: none;
 }
 
-svg:not([fill]) {
+:host([data-render-mode='shadow']) svg:not([fill]) {
     fill: currentColor;
 }
 
-abbr[title] {
+:host([data-render-mode='shadow']) abbr[title] {
     text-decoration: none;
     cursor: help;
 }
 
-table {
+:host([data-render-mode='shadow']) table {
     border-collapse: collapse;
     border-spacing: 0;
     border: 0;
     width: 100%;
 }
 
-hr {
+:host([data-render-mode='shadow']) hr {
     display: block;
-    margin: var(--sds-g-spacing-6, 2rem) 0;
-    border-top: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, #c9c9c9);
-    height: var(--sds-g-sizing-border-1, 1px);
+    margin: var(--sds-g-spacing-6, 2rem, 2rem) 0;
+    border-top: var(--sds-g-sizing-border-1, 1px, 1px) solid
+        var(--slds-g-color-border-base-1, #c9c9c9);
+    height: var(--sds-g-sizing-border-1, 1px, 1px);
     clear: both;
     box-sizing: content-box;
     border: 0;
     padding: 0;
-
 }
 
-abbr[title] {
-    border-bottom: var(--sds-g-sizing-border-1, 1px) dotted;
+:host([data-render-mode='shadow']) abbr[title] {
+    border-bottom: var(--sds-g-sizing-border-1, 1px, 1px) dotted;
     text-decoration: none;
     border: 0;
     cursor: help;
 }
 
-caption,
-th,
-td {
+:host([data-render-mode='shadow']) caption,
+:host([data-render-mode='shadow']) th,
+:host([data-render-mode='shadow']) td {
     text-align: left;
 }
 
-td,
-th {
+:host([data-render-mode='shadow']) td,
+:host([data-render-mode='shadow']) th {
     padding: 0;
 }
 
-dl {
+:host([data-render-mode='shadow']) dl {
     margin: 0;
     padding: 0;
 }
 
-dd {
+:host([data-render-mode='shadow']) dd {
     margin: 0;
 }
 
-pre {
+:host([data-render-mode='shadow']) pre {
     overflow: auto;
 }
 
-mark {
+:host([data-render-mode='shadow']) mark {
     background-color: #ff0;
     color: #000;
 }
 
-small {
+:host([data-render-mode='shadow']) small {
     font-size: 80%;
 }
 
-sub,
-sup {
+:host([data-render-mode='shadow']) sub,
+:host([data-render-mode='shadow']) sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline;
 }
 
-sup {
+:host([data-render-mode='shadow']) sup {
     top: -0.5em;
 }
 
-sub {
+:host([data-render-mode='shadow']) sub {
     bottom: -0.25em;
 }
 
-b,
-strong,
-dfn {
-    font-weight: var(--sds-g-font-weight-7, 700);
+:host([data-render-mode='shadow']) b,
+:host([data-render-mode='shadow']) strong,
+:host([data-render-mode='shadow']) dfn {
+    font-weight: var(--sds-g-font-weight-7, 700, 700);
 }
 
-b,
-strong {
-    font-weight: var(--sds-g-font-weight-bold, bold);
+:host([data-render-mode='shadow']) b,
+:host([data-render-mode='shadow']) strong {
+    font-weight: var(--sds-g-font-weight-bold, bold, bold);
 }
 
 /**
@@ -270,7 +306,7 @@ strong {
  * have correct styling in native shadow
  */
 
- [data-f6-region].f6-highlight {
+[data-f6-region].f6-highlight {
     position: relative;
 }
 

package/src/lightning/sldsUtilsAlignment/sldsUtilsAlignment.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-align_absolute-center {
+:host([data-render-mode='shadow']) .slds-align_absolute-center {
     display: flex;
     justify-content: center;
     align-content: center;

package/src/lightning/sldsUtilsBox/sldsUtilsBox.css

@@ -1,24 +1,25 @@
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
-.slds-box,
-::slotted(.slds-box) {
+:host([data-render-mode='shadow']) .slds-box,
+:host([data-render-mode='shadow']) ::slotted(.slds-box) {
     padding: var(--slds-g-spacing-4, 1rem);
-    border-radius: var(--slds-g-spacing-1, .25rem);
-    border: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, #e5e5e5);
+    border-radius: var(--slds-g-spacing-1, 0.25rem);
+    border: var(--slds-g-sizing-border-1, 1px) solid
+        var(--slds-g-color-border-base-1, #e5e5e5);
 }
 
-.slds-box_xx-small,
-::slotted(.slds-box_xx-small) {
-    padding: var(--slds-g-spacing-1, .25rem);
+:host([data-render-mode='shadow']) .slds-box_xx-small,
+:host([data-render-mode='shadow']) ::slotted(.slds-box_xx-small) {
+    padding: var(--slds-g-spacing-1, 0.25rem);
 }
 
-.slds-box_x-small,
-::slotted(.slds-box_x-small) {
-    padding: var(--slds-g-spacing-2, .5rem);
+:host([data-render-mode='shadow']) .slds-box_x-small,
+:host([data-render-mode='shadow']) ::slotted(.slds-box_x-small) {
+    padding: var(--slds-g-spacing-2, 0.5rem);
 }
 
-.slds-box_small,
-::slotted(.slds-box_small) {
-    padding: var(--slds-g-spacing-3, .75rem);
+:host([data-render-mode='shadow']) .slds-box_small,
+:host([data-render-mode='shadow']) ::slotted(.slds-box_small) {
+    padding: var(--slds-g-spacing-3, 0.75rem);
 }