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

package/src/lightning/sldsUtilsSizing/sldsUtilsSizing.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/sldsUtilsThemes/sldsUtilsThemes.css

@@ -0,0 +1,295 @@
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+/**
+ *
+ * TODO: all the .slds-button--neutral related lines are commented out because unused by LBC.
+ * They are related to some legacy usage of the theme utilities with the link variant of the button neutral.
+ * The SLDS _themes.css uses the old BEM syntax and there may be a bug with part of the code that uses the new one.
+ * Also, the documentation on the SLDS site doesn't show any relevant examples
+ * (https://www.lightningdesignsystem.com/utilities/themes/)
+ *
+ * In addition, in the Native Shadow world, this construct may not work as expected with nested shadows.
+ * At the moment it doesn't make sense to include them in here, but keeping them commented out for discussion if needed
+ *
+ */
+
+/* .slds-theme {} */
+
+.slds-theme_default {
+    background-color: var(--slds-g-color-neutral-base-100, #fff);
+    color: var(--slds-g-color-neutral-base-10, #181818);
+}
+
+.slds-theme_shade {
+    background-color: var(--slds-g-color-neutral-base-95, #f3f3f3);
+}
+
+.slds-theme_inverse {
+    color: var(--slds-g-color-neutral-base-100, #fff);
+    background-color: var(--slds-g-color-brand-base-10, #001639);
+    border-color: var(--slds-g-color-brand-base-10, #001639);
+}
+
+/* .slds-theme_inverse a:not(.slds-button--neutral) {
+    color: var(--slds-g-color-neutral-base-100, #fff);
+    text-decoration: underline;
+}
+
+.slds-theme_inverse a:not(.slds-button--neutral):link,
+.slds-theme_inverse a:not(.slds-button--neutral):visited {
+    color: var(--slds-g-color-neutral-base-100, #fff);
+}
+
+.slds-theme_inverse a:not(.slds-button--neutral):hover,
+.slds-theme_inverse a:not(.slds-button--neutral):focus {
+    text-decoration: none;
+}
+
+.slds-theme_inverse a:not(.slds-button--neutral):active {
+    color: var(--slds-g-color-neutral-100-opacity-50, rgb(255 255 255 / 50%));
+}
+
+.slds-theme_inverse a:not(.slds-button--neutral)[disabled] {
+    color: var(--slds-g-color-neutral-100-opacity-10, rgb(255 255 255 / 15%));
+} */
+
+.slds-theme_alt-inverse {
+    color: var(--slds-g-color-neutral-base-100, #fff);
+    background-color: var(--slds-g-color-brand-base-20, #032d60);
+    border-color: var(--slds-g-color-brand-base-20, #032d60);
+}
+
+/* .slds-theme_alt-inverse a:not(.slds-button--neutral) {
+    color: var(--slds-g-color-neutral-base-100, #fff);
+    text-decoration: underline;
+}
+
+.slds-theme_alt-inverse a:not(.slds-button--neutral):link,
+.slds-theme_alt-inverse a:not(.slds-button--neutral):visited {
+    color: var(--slds-g-color-neutral-base-100, #fff);
+}
+
+.slds-theme_alt-inverse a:not(.slds-button--neutral):hover,
+.slds-theme_alt-inverse a:not(.slds-button--neutral):focus {
+    text-decoration: none;
+}
+
+.slds-theme_alt-inverse a:not(.slds-button--neutral):active {
+    color: var(--slds-g-color-neutral-100-opacity-50, rgb(255 255 255 / 50%));
+}
+
+.slds-theme_alt-inverse a:not(.slds-button--neutral)[disabled] {
+    color: var(--slds-g-color-neutral-100-opacity-10, rgb(255 255 255 / 15%));
+} */
+
+.slds-theme_success {
+    color: var(--slds-g-color-neutral-base-100, #fff);
+    background-color: var(--slds-g-color-success-base-50, #2e844a);
+}
+
+/* .slds-theme_success a:not(.slds-button--neutral) {
+    color: var(--slds-g-color-neutral-base-100, #fff);
+    text-decoration: underline;
+}
+
+.slds-theme_success a:not(.slds-button--neutral):link,
+.slds-theme_success a:not(.slds-button--neutral):visited {
+    color: var(--slds-g-color-neutral-base-100, #fff);
+}
+
+.slds-theme_success a:not(.slds-button--neutral):hover,
+.slds-theme_success a:not(.slds-button--neutral):focus {
+    text-decoration: none;
+}
+
+.slds-theme_success a:not(.slds-button--neutral):active {
+    color: var(--slds-g-color-neutral-100-opacity-50, rgb(255 255 255 / 50%));
+}
+
+.slds-theme_success a:not(.slds-button--neutral)[disabled] {
+    color: var(--slds-g-color-neutral-100-opacity-10, rgb(255 255 255 / 15%));
+} */
+
+.slds-theme_info {
+    color: var(--slds-g-color-neutral-base-100, #fff);
+    background-color: var(--slds-g-color-neutral-base-50, #747474);
+}
+
+/* .slds-theme_info a:not(.slds-button--neutral) {
+    color: var(--slds-g-color-neutral-base-100, #fff);
+    text-decoration: underline;
+}
+
+.slds-theme_info a:not(.slds-button--neutral):link,
+.slds-theme_info a:not(.slds-button--neutral):visited {
+    color: var(--slds-g-color-neutral-base-100, #fff);
+}
+
+.slds-theme_info a:not(.slds-button--neutral):hover,
+.slds-theme_info a:not(.slds-button--neutral):focus {
+    text-decoration: none;
+}
+
+.slds-theme_info a:not(.slds-button--neutral):active {
+    color: var(--slds-g-color-neutral-100-opacity-50, rgb(255 255 255 / 50%));
+}
+
+.slds-theme_info a:not(.slds-button--neutral)[disabled] {
+    color: var(--slds-g-color-neutral-100-opacity-10, rgb(255 255 255 / 15%));
+} */
+
+.slds-theme_warning {
+    background-color: var(--slds-g-color-warning-base-60, #fe9339);
+    color: var(--slds-g-color-neutral-base-10, #181818);
+}
+
+/**
+ * TODO: Unsure why .slds-theme_warning involves more css for links and buttons
+ * It seems to be related to legacy implementation.
+ * However, the color contrast doesn't seem to be compliant.
+ * In addition, we may not want to have the same implementation in Native Shadow.
+ * For the time being it's better to keep these selectors disabled, and have the
+ * warning theme to have similar behavior as the other ones.
+ *
+ */
+
+/* .slds-theme_warning a {
+    color: var(--slds-g-color-neutral-base-10, #181818);
+    text-decoration: underline;
+}
+
+.slds-theme_warning a:link,
+.slds-theme_warning a:visited {
+    color: var(--slds-g-color-neutral-base-10, #181818);
+}
+
+.slds-theme_warning a:hover,
+.slds-theme_warning a:focus {
+    text-decoration: none;
+}
+
+.slds-theme_warning a:focus {
+    box-shadow: 0 0 3px var(--slds-g-color-neutral-base-30, #514f4d);
+    border: 1px solid var(--slds-g-color-neutral-base-30, #514f4d);
+}
+
+.slds-theme_warning a:active {
+    color: var(--slds-g-color-neutral-base-30, #514f4d);
+}
+
+.slds-theme_warning a[disabled] {
+    color: var(--slds-g-color-neutral-base-30, #514f4d);
+}
+
+.slds-theme_warning button {
+    color: var(--slds-g-color-neutral-base-30, #514f4d);
+    text-decoration: underline;
+}
+
+.slds-theme_warning button:hover {
+    color: var(--slds-g-color-neutral-base-50, #706e6b);
+}
+
+.slds-theme_warning button:focus {
+    color: var(--slds-g-color-neutral-base-30, #514f4d);
+    box-shadow: 0 0 3px var(--slds-g-color-neutral-base-30, #514f4d);
+    border: 1px solid var(--slds-g-color-neutral-base-30, #514f4d);
+}
+
+.slds-theme_warning button:active {
+    color: var(--slds-g-color-neutral-base-50, #706e6b);
+}
+
+.slds-theme_warning .slds-icon,
+.slds-theme_warning .slds-button__icon {
+    fill: var(--slds-g-color-neutral-base-30, #514f4d);
+} */
+
+.slds-theme_error {
+    color: var(--slds-g-color-neutral-base-100, #fff);
+    background-color: var(--slds-g-color-error-base-40, #ea001e);
+}
+
+/* .slds-theme_error a:not(.slds-button--neutral) {
+    color: var(--slds-g-color-neutral-base-100, #fff);
+    text-decoration: underline;
+}
+
+.slds-theme_error a:not(.slds-button--neutral):link,
+.slds-theme_error a:not(.slds-button--neutral):visited {
+    color: var(--slds-g-color-neutral-base-100, #fff);
+}
+
+.slds-theme_error a:not(.slds-button--neutral):hover,
+.slds-theme_error a:not(.slds-button--neutral):focus {
+    text-decoration: none;
+}
+
+.slds-theme_error a:not(.slds-button--neutral):active {
+    color: var(--slds-g-color-neutral-100-opacity-50, rgb(255 255 255 / 50%));
+}
+
+.slds-theme_error a:not(.slds-button--neutral)[disabled] {
+    color: var(--slds-g-color-neutral-100-opacity-10, rgb(255 255 255 / 15%));
+} */
+
+.slds-theme_offline {
+    color: var(--slds-g-color-neutral-base-100, #fff);
+    background-color: var(--slds-g-color-neutral-base-30, #444);
+}
+
+/* .slds-theme_offline a:not(.slds-button--neutral) {
+    color: var(--slds-g-color-neutral-base-100, #fff);
+    text-decoration: underline;
+}
+
+.slds-theme_offline a:not(.slds-button--neutral):link,
+.slds-theme_offline a:not(.slds-button--neutral):visited {
+    color: var(--slds-g-color-neutral-base-100, #fff);
+}
+
+.slds-theme_offline a:not(.slds-button--neutral):hover,
+.slds-theme_offline a:not(.slds-button--neutral):focus {
+    text-decoration: none;
+}
+
+.slds-theme_offline a:not(.slds-button--neutral):active {
+    color: var(--slds-g-color-neutral-100-opacity-50, rgb(255 255 255 / 50%));
+}
+
+.slds-theme_offline a:not(.slds-button--neutral)[disabled] {
+    color: var(--slds-g-color-neutral-100-opacity-10, rgb(255 255 255 / 15%));
+} */
+
+.slds-theme_alert-texture {
+    background-image: linear-gradient(45deg, rgb(0 0 0 / 2.5%) 25%, transparent 25%, transparent 50%, rgb(0 0 0 / 2.5%) 50%, rgb(0 0 0 / 2.5%) 75%, transparent 75%, transparent);
+    background-size: 64px 64px;
+}
+
+.slds-theme_inverse-text {
+    color: var(--slds-g-color-neutral-base-100, #fff);
+}
+
+/* .slds-theme_inverse-text a:not(.slds-button--neutral) {
+    color: var(--slds-g-color-neutral-base-100, #fff);
+    text-decoration: underline;
+}
+
+.slds-theme_inverse-text a:not(.slds-button--neutral):link,
+.slds-theme_inverse-text a:not(.slds-button--neutral):visited {
+    color: var(--slds-g-color-neutral-base-100, #fff);
+}
+
+.slds-theme_inverse-text a:not(.slds-button--neutral):hover,
+.slds-theme_inverse-text a:not(.slds-button--neutral):focus {
+    text-decoration: none;
+}
+
+.slds-theme_inverse-text a:not(.slds-button--neutral):active {
+    color: var(--slds-g-color-neutral-100-opacity-50, rgb(255 255 255 / 50%));
+}
+
+.slds-theme_inverse-text a:not(.slds-button--neutral)[disabled] {
+    color: var(--slds-g-color-neutral-100-opacity-10, rgb(255 255 255 / 15%));
+} */

package/src/lightning/sldsUtilsThemes/sldsUtilsThemes.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/sldsUtilsTruncation/sldsUtilsTruncation.css

@@ -0,0 +1,14 @@
+/* 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
+ */
+
+.slds-truncate {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

package/src/lightning/sldsUtilsTruncation/sldsUtilsTruncation.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/slider/__docs__/slider.md

@@ -86,8 +86,8 @@ To apply custom styling, use the `:host` selector. Use SLDS styling hooks to cus
 
 ```css
 :host {
-    --sds-c-slider-track-color-background: orange;
-    --sds-c-slider-thumb-color-foreground: black;
+    --slds-c-slider-track-color-background: orange;
+    --slds-c-slider-thumb-color-foreground: black;
 }
 ```
 

package/src/lightning/spinner/spinner.css

@@ -1,2 +1,2 @@
-/* @import 'lightning/sldsCommon';
-@import './spinner.slds.css'; */
+@import 'lightning/sldsCommon';
+@import './spinner.slds.css';

package/src/lightning/spinner/spinner.js

@@ -1,4 +1,5 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import { normalizeString as normalize } from 'lightning/utilsPrivate';
 
@@ -8,7 +9,7 @@ const DEFAULT_VARIANT = 'base';
 /**
  * Displays an animated spinner.
  */
-export default class LightningSpinner extends LightningElement {
+export default class LightningSpinner extends LightningShadowBaseClass {
     /**
      * The alternative text used to describe the reason for the wait and need for a spinner.
      * @type {string}
@@ -58,6 +59,7 @@ export default class LightningSpinner extends LightningElement {
     _altText = '';
 
     connectedCallback() {
+        super.connectedCallback();
         this.classList.add('slds-spinner_container');
         this.template.addEventListener('mousewheel', this.stopScrolling);
         this.template.addEventListener('touchmove', this.stopScrolling);