lightning-base-components 1.18.2-alpha → 1.18.4-alpha

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

@@ -11,31 +11,54 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     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;
- }
+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-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;
@@ -48,14 +71,10 @@ 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)
-    );
+    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,
@@ -68,20 +87,20 @@ button,
 }
 
 [type='search'] {
-   -webkit-appearance: textfield;
-   outline-offset: -2px;
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
 }
 
-[type=search]::-webkit-search-decoration, 
+[type=search]::-webkit-search-decoration,
 [type=search]::-webkit-search-cancel-button,
-[type=search]::-webkit-search-results-button, 
-[type=search]::-webkit-search-results-decoration{
+[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. 
+styling but exist in SLDS-internal.
 They are added in to individual component css
 (ex. calendar.css) */
 /* button,
@@ -90,7 +109,7 @@ optgroup,
 textarea, */
 select {
     color: inherit;
-    font: inherit; 
+    font: inherit;
     margin: 0;
 }
 
@@ -127,13 +146,16 @@ code,
 kbd,
 samp,
 pre {
-    font-family: var(--sds-g-font-family-monospace);
+    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 {
@@ -145,12 +167,92 @@ svg:not([fill]) {
 }
 
 abbr[title] {
-  text-decoration: none;
-  cursor: help;
- }
+    text-decoration: none;
+    cursor: help;
+}
 
 table {
-  border-collapse: collapse;
-  border-spacing: 0;
-  width: 100%;
+    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>

package/src/lightning/sldsUtilsGrid/sldsUtilsGrid.css

@@ -0,0 +1,259 @@
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+/**
+ * Notes:
+ * - Some of the selectors available in SLDS were not included here, because they are unused in LBC
+ * - :host() is needed for `layout` and `layout-item` because classes are applied to the host element.
+ */
+
+/* Base */
+.slds-grid,
+:host(.slds-grid) {
+    display: flex;
+}
+
+.slds-grid_frame,
+:host(.slds-grid_frame) {
+    min-width: 100vw;
+    min-height: 100vh;
+    overflow: hidden;
+}
+
+.slds-grid_vertical,
+:host(.slds-grid_vertical) {
+    flex-direction: column;
+}
+
+.slds-grid_vertical-reverse,
+:host(.slds-grid_vertical-reverse) {
+    flex-direction: column-reverse;
+}
+
+.slds-grid_reverse,
+:host(.slds-grid_reverse) {
+    flex-direction: row-reverse;
+}
+
+/* Flex */
+.slds-wrap,
+:host(.slds-wrap) {
+    flex-wrap: wrap;
+    align-items: flex-start;
+}
+
+/* No Wrap */
+.slds-nowrap,
+:host(.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) {
+        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) {
+        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) {
+        flex: 1 1 auto;
+        flex-wrap: nowrap;
+        align-items: stretch;
+    }
+
+}
+
+/* Gutters */
+.slds-gutters,
+:host(.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 {
+    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"]) {
+    flex: 1 1 auto;
+}
+
+.slds-has-flexi-truncate,
+:host(.slds-has-flexi-truncate) {
+    flex: 1 1 0%;
+    min-width: 0;
+}
+
+.slds-no-flex,
+:host(.slds-no-flex) {
+    flex: none;
+}
+
+.slds-no-space,
+:host(.slds-no-space) {
+    min-width: 0;
+}
+
+.slds-grow,
+:host(.slds-grow) {
+    flex-grow: 1;
+}
+
+.slds-grow-none,
+:host(.slds-grow-none) {
+    flex-grow: 0;
+}
+
+.slds-shrink,
+:host(.slds-shrink) {
+    flex-shrink: 1;
+}
+
+.slds-shrink-none,
+:host(.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 {
+    flex-grow: 0;
+}
+
+/* Horizontal Alignment */
+.slds-grid_align-center,
+:host(.slds-grid_align-center) {
+    justify-content: center;
+}
+
+.slds-grid_align-space,
+:host(.slds-grid_align-space) {
+    justify-content: space-around;
+}
+
+.slds-grid_align-spread,
+:host(.slds-grid_align-spread) {
+    justify-content: space-between;
+}
+
+.slds-grid_align-end,
+:host(.slds-grid_align-end) {
+    justify-content: flex-end;
+}
+
+/* Vertical Alignment */
+.slds-grid_vertical-align-start,
+:host(.slds-grid_vertical-align-start) {
+    align-items: flex-start;
+    align-content: flex-start;
+}
+
+.slds-grid_vertical-align-center,
+:host(.slds-grid_vertical-align-center) {
+    align-items: center;
+    align-content: center;
+}
+
+.slds-grid_vertical-align-end,
+:host(.slds-grid_vertical-align-end) {
+    align-items: flex-end;
+    align-content: flex-end;
+}
+
+.slds-grid_vertical-stretch,
+:host(.slds-grid_vertical-stretch) {
+    align-items: stretch;
+    align-content: stretch;
+}
+
+/* Boundary */
+.slds-grid_pull-padded,
+:host(.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) {
+    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) {
+    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) {
+    vertical-align: top;
+    align-self: flex-start;
+}
+
+.slds-align-middle,
+:host(.slds-align-middle) {
+    vertical-align: middle;
+    align-self: center;
+}
+
+.slds-align-bottom,
+:host(.slds-align-bottom) {
+    vertical-align: bottom;
+    align-self: flex-end;
+}
+
+/* Bump */
+.slds-col_bump-top,
+:host(.slds-col_bump-top) {
+    margin-top: auto;
+}
+
+.slds-col_bump-right,
+:host(.slds-col_bump-right) {
+    margin-inline-end: auto;
+}
+
+.slds-col_bump-bottom,
+:host(.slds-col_bump-bottom) {
+    margin-bottom: auto;
+}
+
+.slds-col_bump-left,
+:host(.slds-col_bump-left) {
+    margin-inline-start: auto;
+}

package/src/lightning/sldsUtilsGrid/sldsUtilsGrid.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/sldsUtilsHyphenation/sldsUtilsHyphenation.css

@@ -0,0 +1,8 @@
+/* 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 {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    hyphens: auto;
+}

package/src/lightning/sldsUtilsHyphenation/sldsUtilsHyphenation.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/sldsUtilsLineClamp/sldsUtilsLineClamp.css

@@ -0,0 +1,57 @@
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+/**
+ *
+ * In SLDS `slds-line-clamp` is set to 3 as per default,
+ * and it uses mixins to generate each selector.
+ * $line-clamp: 3 !default;
+ *
+ */
+
+.slds-line-clamp {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: pre-line;
+}
+
+/* The below are commented because currently unused in LBC */
+
+/* .slds-line-clamp_x-small {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: pre-line;
+}
+
+.slds-line-clamp_small {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: pre-line;
+}
+
+.slds-line-clamp_medium {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 5;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: pre-line;
+}
+
+.slds-line-clamp_large {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 7;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: pre-line;
+} */

package/src/lightning/sldsUtilsLineClamp/sldsUtilsLineClamp.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>