npm - lightning-base-components - Versions diffs - 1.21.1-alpha → 1.21.2-alpha - Mend

lightning-base-components 1.21.1-alpha → 1.21.2-alpha

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (500) hide show

package/src/lightning/card/card.slds.css CHANGED Viewed

@@ -1,111 +1,60 @@
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
-:host([data-render-mode="shadow"]) [part~='card'] {
-  padding-block-start: var(--sds-c-card-spacing-block-start, var(--sds-c-card-spacing-block, 0));
-  padding-block-end: var(--sds-c-card-spacing-block-end, var(--sds-c-card-spacing-block, 0));
-  padding-inline-start: var(--sds-c-card-spacing-inline-start, var(--sds-c-card-spacing-inline, 0));
-  padding-inline-end: var(--sds-c-card-spacing-inline-end, var(--sds-c-card-spacing-inline, 0));
-  background: var(--sds-c-card-color-background, transparent);
-  border-width: var(--sds-c-card-sizing-border, 1px);
-  border-style: solid;
-  border-color: var(--sds-c-card-color-border, transparent);
-  border-radius: var(--sds-c-card-radius-border, 0.25rem);
-  background-clip: padding-box;
-  box-shadow: var(--sds-c-card-shadow);
-  color: var(--sds-c-card-text-color);
-}
-:host([data-render-mode="shadow"]) [part~='header'] {
-  padding-block-start: var(--sds-c-card-header-spacing-block-start, var(--sds-c-card-header-spacing-block));
-  padding-block-end: var(--sds-c-card-header-spacing-block-end, var(--sds-c-card-header-spacing-block));
-  padding-inline-start: var(
-    --sds-c-card-header-spacing-inline-start,
-    var(--sds-c-card-header-spacing-inline)
-  );
-  padding-inline-end: var(--sds-c-card-header-spacing-inline-end, var(--sds-c-card-header-spacing-inline));
-  margin-block-end: var(--sds-c-card-header-spacing-block-end);
-}
-:host([data-render-mode="shadow"]) [part~='body'] {
-  margin-block-start: var(--sds-c-card-body-spacing-block-start, var(--sds-c-card-body-spacing-block));
-  margin-block-end: var(--sds-c-card-body-spacing-block-end, var(--sds-c-card-body-spacing-block));
-  padding-inline-start: var(--sds-c-card-body-spacing-inline-start, var(--sds-c-card-body-spacing-inline));
-  padding-inline-end: var(--sds-c-card-body-spacing-inline-end, var(--sds-c-card-body-spacing-inline));
-}
-:host([data-render-mode="shadow"]) [part~='footer'] {
-  padding-block-start: var(--sds-c-card-footer-spacing-block-start, var(--sds-c-card-footer-spacing-block));
-  padding-block-end: var(--sds-c-card-footer-spacing-block-end, var(--sds-c-card-footer-spacing-block));
-  padding-inline-start: var(
-    --sds-c-card-footer-spacing-inline-start,
-    var(--sds-c-card-footer-spacing-inline)
-  );
-  padding-inline-end: var(--sds-c-card-footer-spacing-inline-end, var(--sds-c-card-footer-spacing-inline));
-  margin-block-start: var(--sds-c-card-footer-spacing-block-start);
-  text-align: var(--sds-c-card-footer-text-align);
-  border-top-width: var(--sds-c-card-footer-sizing-border, 1px);
-  border-top-style: solid;
-  border-top-color: var(--sds-c-card-footer-color-border, transparent);
-}
-@supports (--styling-hooks: '') {
-      /* re-assign current slds hooks using deprecated naming conventions */
-      :host([data-render-mode="shadow"]) {
-        --slds-c-card-body-spacing-block-end: var(--slds-c-card-body-spacing-blockend);
-        --slds-c-card-body-spacing-block-start: var(--slds-c-card-body-spacing-blockstart);
-        --slds-c-card-body-spacing-inline-end: var(--slds-c-card-body-spacing-inlineend);
-        --slds-c-card-body-spacing-inline-start: var(--slds-c-card-body-spacing-inlinestart);
-        --slds-c-card-footer-spacing-block-end: var(--slds-c-card-footer-spacing-blockend);
-        --slds-c-card-footer-spacing-block-start: var(--slds-c-card-footer-spacing-blockstart);
-        --slds-c-card-footer-spacing-inline-end: var(--slds-c-card-footer-spacing-inlineend);
-        --slds-c-card-footer-spacing-inline-start: var(--slds-c-card-footer-spacing-inlinestart);
-        --slds-c-card-header-spacing-block-end: var(--slds-c-card-header-spacing-blockend);
-        --slds-c-card-header-spacing-block-start: var(--slds-c-card-header-spacing-blockstart);
-        --slds-c-card-header-spacing-inline-end: var(--slds-c-card-header-spacing-inlineend);
-        --slds-c-card-header-spacing-inline-start: var(--slds-c-card-header-spacing-inlinestart);
-        --slds-c-card-spacing-block-end: var(--slds-c-card-spacing-blockend);
-        --slds-c-card-spacing-block-start: var(--slds-c-card-spacing-blockstart);
-        --slds-c-card-spacing-inline-end: var(--slds-c-card-spacing-inlineend);
-        --slds-c-card-spacing-inline-start: var(--slds-c-card-spacing-inlinestart);
-      }
-	:host([data-render-mode="shadow"]) [part="card"] {
-		position: relative;
-		--sds-c-card-spacing-block-start:
-      var(--slds-c-card-spacing-blockstart,
-        var(--slds-c-card-spacing-block, 0));
-		--sds-c-card-spacing-block-end:
-      var(--slds-c-card-spacing-blockend,
-        var(--slds-c-card-spacing-block, 0));
-		--sds-c-card-spacing-inline-start:
-      var(--slds-c-card-spacing-inlinestart,
-        var(--slds-c-card-spacing-inline, 0));
-		--sds-c-card-spacing-inline-end:
-      var(--slds-c-card-spacing-inlineend,
-        var(--slds-c-card-spacing-inline, 0));
-    --sds-c-card-color-background:
+  :host([data-render-mode="shadow"]) [part="card"] {
+    /**
+     * Reassignments for parity with SLDS blueprint
+     * https://www.lightningdesignsystem.com/components/breadcrumbs/#Styling-Hooks-Overview
+     */
+     /* stylelint-disable */
+     --slds-c-card-spacing-blockstart: var(--slds-c-card-spacing-block-start);
+     --slds-c-card-spacing-blockend: var(--slds-c-card-spacing-block-end);
+     --slds-c-card-spacing-inlinestart: var(--slds-c-card-spacing-inline-start);
+     --slds-c-card-spacing-inlineend: var(--slds-c-card-spacing-inline-end);
+     --slds-c-card-header-spacing-blockstart: var(--slds-c-card-header-spacing-block-start);
+     --slds-c-card-header-spacing-blockend: var(--slds-c-card-header-spacing-block-end);
+     --slds-c-card-header-spacing-inlinestart: var(--slds-c-card-header-spacing-inline-start);
+     --slds-c-card-header-spacing-inlineend: var(--slds-c-card-header-spacing-inline-end);
+     --slds-c-card-body-spacing-blockstart: var(--slds-c-card-body-spacing-block-start);
+     --slds-c-card-body-spacing-blockend: var(--slds-c-card-body-spacing-block-end);
+     --slds-c-card-body-spacing-inlinestart: var(--slds-c-card-body-spacing-inline-start);
+     --slds-c-card-body-spacing-inlineend: var(--slds-c-card-body-spacing-inline-end);
+     --slds-c-card-footer-spacing-blockstart: var(--slds-c-card-footer-spacing-block-start);
+     --slds-c-card-footer-spacing-blockend: var(--slds-c-card-footer-spacing-block-end);
+     --slds-c-card-footer-spacing-inlinestart: var(--slds-c-card-footer-spacing-inline-start);
+     --slds-c-card-footer-spacing-inlineend: var(--slds-c-card-footer-spacing-inline-end);
+     /* stylelint-enable */
+    position: relative;
+    /* stylelint-disable */
+    padding-block-start:
+      var(--slds-c-card-spacing-blockstart, 0);
+    padding-block-end:
+      var(--slds-c-card-spacing-blockend 0);
+    padding-inline-start:
+      var(--slds-c-card-spacing-inlinestart, 0);
+    padding-inline-end:
+      var(--slds-c-card-spacing-inlineend, 0);
+    /* stylelint-enable */
+    background:
       var(--slds-c-card-color-background,
-        var(--slds-g-color-neutral-base-100));
-		--sds-c-card-sizing-border:
+        var(--slds-g-color-surface-container-1));
+    border-width:
       var(--slds-c-card-sizing-border,
-        var(--sds-g-sizing-border-1, 1px));
-		--sds-c-card-color-border:
+        var(--slds-g-sizing-border-1));
+    border-color:
       var(--slds-c-card-color-border,
         var(--slds-g-color-border-base-1,
-          var(--sds-g-color-neutral-base-80, #c9c9c9)));
-		--sds-c-card-radius-border:
+          var(--slds-g-color-border-1)));
+    border-radius:
       var(--slds-c-card-radius-border,
-        var(--sds-g-radius-border-2, 0.25rem));
-		--sds-c-card-shadow:
+        var(--slds-g-radius-border-2));
+    box-shadow:
       var(--slds-c-card-shadow,
-        0 2px 2px 0 var(--sds-g-color-neutral-base-90, #e5e5e5)); /* Note: remove sds color when slds color is implemented to subsystem */
-    --sds-c-card-text-color:
-      var(--slds-c-card-text-color);
+        0 2px 2px 0 var(--slds-g-shadow-2));
+    color: var(--slds-c-card-text-color);
     border-style: solid;
-		background-clip: padding-box;
-	}
+    background-clip: padding-box;
+  }
   :host([data-render-mode="shadow"]) [part='header'] {
     display: grid;
@@ -114,75 +63,74 @@
     align-items: center;
     /* Padding */
-		--sds-c-card-header-spacing-block-start:
-			var(--slds-c-card-header-spacing-blockstart,
-				var(--slds-c-card-header-spacing-block,
-          var(--sds-g-spacing-3, 0.75rem)));
-		--sds-c-card-header-spacing-block-end:
-			var(--slds-c-card-header-spacing-blockend,
-        var(--slds-c-card-header-spacing-block, 0));
-		--sds-c-card-header-spacing-inline-start:
-			var(--slds-c-card-header-spacing-inlinestart,
-				var(--slds-c-card-header-spacing-inline,
-          var(--sds-g-spacing-4, 1rem)));
-		--sds-c-card-header-spacing-inline-end:
-			var(--slds-c-card-header-spacing-inlineend,
-				var(--slds-c-card-header-spacing-inline,
-          var(--sds-g-spacing-4, 1rem)));
+    /* stylelint-disable */
+    padding-block-start:
+      var(--slds-c-card-header-spacing-blockstart,
+          var(--slds-g-spacing-3));
+    padding-block-end:
+      var(--slds-c-card-header-spacing-blockend, 0);
+    padding-inline-start:
+      var(--slds-c-card-header-spacing-inlinestart,
+          var(--slds-g-spacing-4));
+    padding-inline-end:
+      var(--slds-c-card-header-spacing-inlineend,
+          var(--slds-g-spacing-4));
     /* Margin */
     margin-block-end: var(--slds-c-card-header-spacing-blockend,
-        var(--sds-g-spacing-3, 0.75rem));
+        var(--slds-g-spacing-3));
+    /* stylelint-enable */
     /**
      * These become reassignments once base headings get hooks.
      * See [part='header'] h2 rule block for more info.
      */
-    color: var(--slds-c-card-header-text-color);
     font-size: var(--slds-c-card-heading-font-size);
     font-weight: var(--slds-g-font-weight-bold,
-      var(--sds-g-font-weight-bold, bold));
-    line-height: var(--sds-g-font-lineheight-2, 1.25);
-	}
+        var(--slds-g-font-weight-bold));
+    line-height: var(--slds-g-font-lineheight-2);
+  }
   /*
-   * Header's grid layout areas
-   *
-   * The header sections utilize grid areas and 'part' apis to allow the header's
-   * layout be modular (grid-area) and explicitly customized (part).
-   */
+* Header's grid layout areas
+*
+* The header sections utilize grid areas and 'part' apis to allow the header's
+* layout be modular (grid-area) and explicitly customized (part).
+*/
   :host([data-render-mode="shadow"]) [part="icon"] {
     grid-area: icon;
     line-height: 0;
   }
-	:host([data-render-mode="shadow"]) [part="title"] {
-		grid-area: title;
-	}
+  :host([data-render-mode="shadow"]) [part="title"] {
+    grid-area: title;
+  }
   :host([data-render-mode="shadow"]) [part="actions"] {
     grid-area: actions;
   }
-	/**
-   * This would be a reassignment in :host if styling hooks existed for headings.
-   * Until that exists, we have to do a hard reset here. This can be removed once
-   * headings get hooks.
-   *
-   * :host { --sds-g-heading-font-size: var(--slds-c-card-heading-font-size); }
-   */
+  /**
+* This would be a reassignment in :host if styling hooks existed for headings.
+* Until that exists, we have to do a hard reset here. This can be removed once
+* headings get hooks.
+*
+* :host { --slds-g-heading-font-size: var(--slds-c-card-heading-font-size); }
+*/
   :host([data-render-mode="shadow"]) [part="title"] h2 {
-    font-weight: inherit;
+    font-weight: var(--slds-c-card-heading-font-weight, var(--slds-g-font-weight-7));
     font-size: inherit;
   }
   /**
-   * Recreating truncation explicitly here so the behavior is consistent with
-   * current SLDS.
-   *
-   * @TODO: Evaluate if this should be a utility or something similar.
-   */
+* Recreating truncation explicitly here so the behavior is consistent with
+* current SLDS.
+*
+* @TODO: Evaluate if this should be a utility or something similar.
+*/
   :host([data-render-mode="shadow"]) [part="title"] span {
     display: block;
     overflow: hidden;
@@ -190,51 +138,47 @@
   }
   :host([data-render-mode="shadow"]) [part="body"] {
-    --sds-c-card-body-spacing-block-start:
-      var(--slds-c-card-body-spacing-blockstart,
-        var(--slds-c-card-body-spacing-block));
-    --sds-c-card-body-spacing-block-end:
-      var(--slds-c-card-body-spacing-blockend,
-        var(--slds-c-card-body-spacing-block));
-    --sds-c-card-body-spacing-inline-start:
-      var(--slds-c-card-body-spacing-inlinestart,
-        var(--slds-c-card-body-spacing-inline));
-    --sds-c-card-body-spacing-inline-end:
-      var(--slds-c-card-body-spacing-inlineend,
-        var(--slds-c-card-body-spacing-inline));
+    /* stylelint-disable */
+    margin-block-start:
+      var(--slds-c-card-body-spacing-blockstart);
+    margin-block-end:
+      var(--slds-c-card-body-spacing-blockend);
+    padding-inline-start:
+      var(--slds-c-card-body-spacing-inlinestart);
+    padding-inline-end:
+      var(--slds-c-card-body-spacing-inlineend);
     --slds-c-card-color-border: transparent;
     --slds-c-card-shadow: none;
   }
   :host([data-render-mode="shadow"]) [part='footer'] {
-    --sds-c-card-footer-spacing-block-start:
+    padding-block-start:
       var(--slds-c-card-footer-spacing-blockstart,
-        var(--slds-c-card-footer-spacing-block,
-          var(--sds-g-spacing-3, 0.75rem)));
-    --sds-c-card-footer-spacing-block-end:
+          var(--slds-g-spacing-3));
+    padding-block-end:
       var(--slds-c-card-footer-spacing-blockend,
-        var(--slds-c-card-footer-spacing-block,
-          var(--sds-g-spacing-3, 0.75rem)));
-    --sds-c-card-footer-spacing-inline-start:
+          var(--slds-g-spacing-3));
+    padding-inline-start:
       var(--slds-c-card-footer-spacing-inlinestart,
-        var(--slds-c-card-footer-spacing-inline,
-          var(--sds-g-spacing-4, 1rem)));
-    --sds-c-card-footer-spacing-inline-end:
+          var(--slds-g-spacing-4));
+    padding-inline-end:
       var(--slds-c-card-footer-spacing-inlineend,
-        var(--slds-c-card-footer-spacing-inline,
-          var(--sds-g-spacing-4, 1rem)));
-    --sds-c-card-footer-sizing-border:
+          var(--slds-g-spacing-4));
+    border-top-width:
       var(--slds-c-card-footer-sizing-border,
-        var(--sds-g-sizing-border-1, 1px));
-    --sds-c-card-footer-color-border:
+        var(--slds-g-sizing-border-1));
+    border-top-color:
       var(--slds-c-card-footer-color-border,
         var(--slds-g-color-border-base-1,
-          var(--sds-g-color-neutral-base-80, #c9c9c9)));
+          var(--slds-g-color-border-1)));
     border-top-style: solid;
-    text-align: var(--slds-c-card-footer-font-align, center);
+    text-align: var(--slds-c-card-footer-text-align, center);
+    justify-content: center;
+    /* stylelint-enable */
     font-size: var(--slds-c-card-footer-font-size,
-      var(--sds-g-font-scale-neg-2, 0.8125rem));
+        var(--slds-g-font-scale-neg-2));
   }
   :host([data-render-mode="shadow"]) .slds-card__body:empty,:host([data-render-mode="shadow"])
@@ -243,15 +187,15 @@
   }
   /* Note: Refactor the below. Utility classes that should be removed once utility implementation is completed. */
   :host([data-render-mode="shadow"]) .slds-media__figure {
     flex-shrink: 0;
-    margin-inline-end: var(--slds-c-card-icon-spacing-inlineend,
-      var(--sds-g-spacing-3, 0.75rem));
+    margin-inline-end: var(--slds-g-spacing-3);
   }
   :host([data-render-mode="shadow"]) .slds-text-heading_small {
-    font-size: var(--sds-g-font-size-base, 1rem);
-    line-height: var(--sds-g-font-lineheight-2, 1.25);
+    font-size: var(--slds-g-font-size-base);
+    line-height: var(--slds-g-font-lineheight-2);
   }
   :host([data-render-mode="shadow"]) .slds-truncate {
@@ -260,4 +204,3 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-}

package/src/lightning/carousel/carousel.css CHANGED Viewed

@@ -1,7 +1 @@
-slot {
-    /* W-6709264: Workaround for IE11/Edge to prevent slot items from stacking vertically. */
-    display: flex;
-    /* W-7665481: Workaround for above when space is limited in other browsers. */
-    max-width: 100%;
-}
+@import './carousel.lbc.synthetic.css';

package/src/lightning/carousel/carousel.lbc.synthetic.css ADDED Viewed

@@ -0,0 +1,7 @@
+slot {
+    /* W-6709264: Workaround for IE11/Edge to prevent slot items from stacking vertically. */
+    display: flex;
+    /* W-7665481: Workaround for above when space is limited in other browsers. */
+    max-width: 100%;
+}