lightning-base-components 1.18.1-alpha → 1.18.3-alpha

package/src/lightning/select/select.slds.css

@@ -32,6 +32,13 @@
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 @supports (--styling-hooks: '') {
+    /* TODO: Swap with utility classes */
+    :host([data-render-mode="shadow"]) fieldset {
+      border: 0;
+      margin: 0;
+      padding: 0;
+    }
+
     /* FORM ELEMENT: BASE */
     :host([data-render-mode="shadow"]) .slds-form-element {
         position: relative;
@@ -59,11 +66,6 @@
         position: relative;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__control .slds-radio,:host([data-render-mode="shadow"]) 
-    .slds-form-element__control .slds-checkbox {
-        display: block;
-    }
-
     :host([data-render-mode="shadow"]) .slds-form-element__icon {
         display: inline-block;
         position: relative;
@@ -78,7 +80,7 @@
     }
 
     :host([data-render-mode="shadow"]) .slds-form-element__help,:host([data-render-mode="shadow"]) 
-    .slds-form-element__helper { 
+    .slds-form-element__helper {
         font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
         margin-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
         display: block;
@@ -165,29 +167,31 @@
         display: block;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']):not(:host([data-render-mode="shadow"]) .slds-form-element_readonly) {
-        margin-block-end: var(--sds-g-spacing-2, 0.5rem);
-    }
-  
-    :host([data-render-mode="shadow"][variant~='label-stacked']):not(:host([data-render-mode="shadow"]) .slds-is-editing) {
-        padding: 0 var(--sds-g-spacing-1, 0.25rem);
+    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
+
+    /* :host([variant~='label-stacked']):not(.slds-form-element_readonly) {
+        margin-block-end: var(--sds-g-spacing-2);
     }
-  
+
+    :host([variant~='label-stacked']):not(.slds-is-editing) {
+        padding: 0 var(--sds-g-spacing-1);
+    } */
+
+    /* :host([variant~='label-stacked']):not([class*="slds-size"]) {
+          width: 100%;
+          flex-basis: 100%;
+    } */
+
     :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element {
         padding: 0;
         margin-block-end: 0;
     }
-  
-    :host([data-render-mode="shadow"][variant~='label-stacked']):not([class*="slds-size"]) {
-          width: 100%;
-          flex-basis: 100%;
-    }
-  
+
     :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
         border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
-  
+
     :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
         width: 100%;
         flex-basis: 100%;
@@ -200,26 +204,39 @@
     }
 
     /* --------------------------------------- */
-    
+
     /* FORM ELEMENT: INLINE */
 
     :host([data-render-mode="shadow"][variant~='label-inline']) {
         display: block;
     }
-  
-    :host([data-render-mode="shadow"][variant~='label-inline']):not(:host([data-render-mode="shadow"]) .slds-form-element_readonly) {
+
+    /*
+    we have to combine with slds class here to avoid duplication
+    of this rule in child elements who import this stylesheet
+    in lighting-input this slds class is synonymous with the variant
+    */
+
+    :host([data-render-mode="shadow"][variant~='label-inline'].slds-form-element_horizontal) {
+        padding: var(--sds-g-spacing-1, 0.25rem);
         margin-block-end: var(--sds-g-spacing-2, 0.5rem);
     }
-  
-    :host([data-render-mode="shadow"][variant~='label-inline']):not([class*="slds-size"]) {
+
+    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
+
+    /* :host([variant~='label-inline']):not(.slds-form-element_readonly) {
+        margin-block-end: var(--sds-g-spacing-2);
+    }
+
+    :host([variant~='label-inline']):not([class*="slds-size"]) {
         width: 100%;
         flex-basis: 100%;
     }
-  
-    :host([data-render-mode="shadow"][variant~='label-inline']):not(:host([data-render-mode="shadow"]) .slds-is-editing) {
-        padding: var(--sds-g-spacing-1, 0.25rem);   
-    }
-  
+
+    :host([variant~='label-inline']:not(.slds-is-editing)) {
+        padding: var(--sds-g-spacing-1);
+    } */
+
     :host([data-render-mode="shadow"][variant~='label-inline']).slds-is-edited {
         padding-block-start: var(--sds-g-sizing-6, 1.25rem)
     }
@@ -234,16 +251,20 @@
           position: relative;
           z-index: 1;
         }
-  
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) lightning-helptext {
+          float: left;
+        }
+
         :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control {
-          padding-inline-start: 33%;
+          margin-inline-start: 33%;
           clear: none; /* Reset clear: left when switching to horizontal form layout */
         }
-  
+
         :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control .slds-form-element__control {
           padding-inline-start: 0; /* Remove left padding on nested form controls, due to issues related to lightning-form components */
         }
-      
+
         :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list__column .slds-form-element__label {
             width: auto;
             max-width: 100%;
@@ -255,12 +276,43 @@
             margin-block-end: 0;
         }
 
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__help {
+          margin-inline-start: 33%;
+        }
+
         :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list {
             clear: none;
         }
     }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: COMPOUND */
+
+    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row {
+      display: flex;
+      margin-bottom: var(--sds-g-spacing-1, 0.25rem);
+      margin-left: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
+      margin-right: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row .slds-form-element__label {
+      padding-top: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element {
+      padding-left: var(--sds-g-spacing-1, 0.25rem);
+      padding-right: var(--sds-g-spacing-1, 0.25rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
+      align-items: flex-end;
+    }
 }
 
+/* Copyright (c) 2015-present, Salesforce, Inc. All rights reserved
+Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
 @supports (--styling-hooks: '') {
     /* SELECT */
     :host([data-render-mode="shadow"]) [part~='select'] {

package/src/lightning/shadowBaseClassPrivate/shadowBaseClassPrivate.js

@@ -5,7 +5,7 @@ export default class LightningShadowBaseClass extends LightningElement {
 
     connectedCallback() {
         if (!this.template.synthetic) {
-            this.template.host.setAttribute('data-render-mode', 'shadow');
+            this.setAttribute('data-render-mode', 'shadow');
         }
     }
 }

package/src/lightning/sldsCommon/sldsCommon.css

@@ -5,92 +5,254 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
  * Normalize box sizing to border box for all browsers.
  */
 
- *,
- ::before,
- ::after {
-   box-sizing: border-box;
- }
-
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
-   font-weight: var(--sds-s-heading-font-weight);
-   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));
- }
-
- p {
-   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));
- }
-
- ol,
- 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'] {
-   appearance: button;
-   appearance: button;
-   cursor: pointer;
- }
-
- [type='search'] {
-   appearance: textfield;
-   outline-offset: -2px;
- }
-
- input:focus,
- button:focus,
- select:focus,
- textarea:focus {
-   outline-offset: 0;
- }
-
- ::-moz-focus-inner {
-   border-style: none;
-   padding: 0;
- }
-
- ::-webkit-search-decoration {
-   appearance: none;
- }
-
- ::-webkit-file-upload-button {
-   appearance: button;
-   font: inherit;
- }
-
- :-moz-focusring {
-   outline: 1px dotted ButtonText;
- }
-
- :-moz-ui-invalid {
-   box-shadow: none;
- }
-
- code,
- kbd,
- samp,
- pre {
-   font-family: var(--sds-g-font-family-monospace);
- }
-
- img,
- [type='image'] {
-   max-width: 100%;
-   height: auto;
- }
-
- iframe {
-   border-style: none;
- }
+*,
+::before,
+::after {
+    box-sizing: border-box;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+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));
+    font-size: 1em;
+}
+
+a {
+    color: var(--slds-g-color-brand-base-50, #0176d3);
+    text-decoration: none;
+    transition: color 0.1s linear;
+    background-color: transparent;
+}
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+a:hover,
+a:focus {
+    text-decoration: underline;
+    color: var(--slds-g-color-brand-base-30, #014486);
+}
+
+a:active {
+    color: var(--slds-g-color-brand-base-30, #014486);
+}
+
+a:focus-visible {
+    outline-color: var(--slds-g-color-brand-base-50, #0176d3);
+}
+
+a,
+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));
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+}
+
+ol,
+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'] {
+    -webkit-appearance: button;
+    appearance: button;
+    cursor: pointer;
+}
+
+[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 {
+    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) */
+/* button,
+input,
+optgroup,
+textarea, */
+select {
+    color: inherit;
+    font: inherit;
+    margin: 0;
+}
+
+input:focus,
+button:focus,
+select:focus,
+textarea:focus {
+    outline-offset: 0;
+}
+
+::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+}
+
+::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit;
+}
+
+:-moz-focusring {
+    outline: 1px dotted ButtonText;
+}
+
+:-moz-ui-invalid {
+    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'] {
+    max-width: 100%;
+    height: auto;
+    border: 0;
+    vertical-align: middle;
+}
+
+iframe {
+    border-style: none;
+}
+
+svg:not([fill]) {
+    fill: currentColor;
+}
+
+abbr[title] {
+    text-decoration: none;
+    cursor: help;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    border: 0;
+    width: 100%;
+}
+
+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);
+    clear: both;
+    box-sizing: content-box;
+    border: 0;
+    padding: 0;
+
+}
+
+abbr[title] {
+    border-bottom: var(--sds-g-sizing-border-1, 1px) dotted;
+    text-decoration: none;
+    border: 0;
+    cursor: help;
+}
+
+caption,
+th,
+td {
+    text-align: left;
+}
+
+td,
+th {
+    padding: 0;
+}
+
+dl {
+    margin: 0;
+    padding: 0;
+}
+
+dd {
+    margin: 0;
+}
+
+pre {
+    overflow: auto;
+}
+
+mark {
+    background-color: #ff0;
+    color: #000;
+}
+
+small {
+    font-size: 80%;
+}
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+b,
+strong,
+dfn {
+    font-weight: var(--sds-g-font-weight-7, 700);
+}
+
+b,
+strong {
+    font-weight: var(--sds-g-font-weight-bold, bold);
+}

package/src/lightning/sldsUtilsAlignment/sldsUtilsAlignment.css

@@ -0,0 +1,10 @@
+/* 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 {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    margin: auto;
+}

package/src/lightning/sldsUtilsAlignment/sldsUtilsAlignment.js-meta.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <isExposed>true</isExposed>
+</LightningComponentBundle>

package/src/lightning/sldsUtilsBorders/sldsUtilsBorders.css

@@ -0,0 +1,18 @@
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+.slds-border_top {
+    border-top: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, #e5e5e5);
+}
+
+.slds-border_right {
+    border-right: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, #e5e5e5);
+}
+
+.slds-border_bottom {
+    border-bottom: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, #e5e5e5);
+}
+
+.slds-border_left {
+    border-left: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, #e5e5e5);
+}

package/src/lightning/sldsUtilsBorders/sldsUtilsBorders.js-meta.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <isExposed>true</isExposed>
+</LightningComponentBundle>

package/src/lightning/sldsUtilsBox/sldsUtilsBox.css

@@ -0,0 +1,24 @@
+/* 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) {
+    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);
+}
+
+.slds-box_xx-small,
+::slotted(.slds-box_xx-small) {
+    padding: var(--slds-g-spacing-1, .25rem);
+}
+
+.slds-box_x-small,
+::slotted(.slds-box_x-small) {
+    padding: var(--slds-g-spacing-2, .5rem);
+}
+
+.slds-box_small,
+::slotted(.slds-box_small) {
+    padding: var(--slds-g-spacing-3, .75rem);
+}

package/src/lightning/sldsUtilsBox/sldsUtilsBox.js-meta.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <isExposed>true</isExposed>
+</LightningComponentBundle>

package/src/lightning/sldsUtilsFloats/sldsUtilsFloats.css

@@ -0,0 +1,20 @@
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+.slds-clearfix:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.slds-float_left {
+    float: left;
+}
+
+.slds-float_none {
+    float: none;
+}
+
+.slds-float_right {
+    float: right;
+}

package/src/lightning/sldsUtilsFloats/sldsUtilsFloats.js-meta.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <isExposed>true</isExposed>
+</LightningComponentBundle>