lightning-base-components 1.26.4-alpha → 1.27.2-alpha

package/src/lightning/primitiveHeaderFactory/input-checkbox.slds.css

@@ -162,32 +162,32 @@
      * Base
      */
 :host([data-render-mode="shadow"]) [part='input-checkbox'] {
-    /**
+  /**
       * Remap to SLDS blueprint hooks for parity
       * https://www.lightningdesignsystem.com/components/checkbox/#Styling-Hooks-Overview
       */
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    --_slds-c-inputcheckbox-shadow: var(--slds-c-checkbox-shadow);
-    --_slds-c-inputcheckbox-shadow-focus: var(--slds-c-checkbox-shadow-focus);
-    --_slds-c-inputcheckbox-color-background: var(--slds-c-checkbox-color-background);
-    --_slds-c-inputcheckbox-color-background-checked: var(--slds-c-checkbox-color-background-checked);
-    --_slds-c-inputcheckbox-color-border: var(--slds-c-checkbox-color-border);
-    --_slds-c-inputcheckbox-color-border-checked: var(--slds-c-checkbox-color-border-checked);
-    --_slds-c-inputcheckbox-color-border-focus: var(--slds-c-checkbox-color-border-focus);
-    --_slds-c-inputcheckbox-mark-color-foreground: var(--slds-c-checkbox-mark-color-foreground);
-    --_slds-c-inputcheckbox-radius-border: var(--slds-c-checkbox-radius-border);
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+  /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+  --_slds-c-inputcheckbox-shadow: var(--slds-c-checkbox-shadow);
+  --_slds-c-inputcheckbox-shadow-focus: var(--slds-c-checkbox-shadow-focus);
+  --_slds-c-inputcheckbox-color-background: var(--slds-c-checkbox-color-background);
+  --_slds-c-inputcheckbox-color-background-checked: var(--slds-c-checkbox-color-background-checked);
+  --_slds-c-inputcheckbox-color-border: var(--slds-c-checkbox-color-border);
+  --_slds-c-inputcheckbox-color-border-checked: var(--slds-c-checkbox-color-border-checked);
+  --_slds-c-inputcheckbox-color-border-focus: var(--slds-c-checkbox-color-border-focus);
+  --_slds-c-inputcheckbox-mark-color-foreground: var(--slds-c-checkbox-mark-color-foreground);
+  --_slds-c-inputcheckbox-radius-border: var(--slds-c-checkbox-radius-border);
+  /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
 
-    /* We need 'flex' instead of SDS's 'inline-flex' for the responsive label-inline variant */
-    display: flex;
-  }
+  /* We need 'flex' instead of SDS's 'inline-flex' for the responsive label-inline variant */
+  display: flex;
+}
 /**
      * Label Container
      */
 :host([data-render-mode="shadow"]) [part='label-container'] {
-    /* Accounts for help-text in same row as label */
-    padding-inline-end: var(--slds-g-spacing-1);
-  }
+  /* Accounts for help-text in same row as label */
+  padding-inline-end: var(--slds-g-spacing-1);
+}
 /**
      * Label
      *
@@ -195,27 +195,27 @@
      * avoid collisions with other components using [part='label'] (e.g. slds-input-text)
      */
 :host([data-render-mode="shadow"]) [part='input-checkbox'] [part='label'] {
-    color: var(--_slds-c-inputcheckbox-label-color, var(--slds-g-color-on-surface-2));
-    margin-block-end: 0;
-    padding-block-start: calc(var(--slds-g-spacing-1) / 2);
-    padding-inline-start: var(--slds-g-spacing-2);
-  }
+  color: var(--_slds-c-inputcheckbox-label-color, var(--slds-g-color-on-surface-2));
+  margin-block-end: 0;
+  padding-block-start: calc(var(--slds-g-spacing-1) / 2);
+  padding-inline-start: var(--slds-g-spacing-2);
+}
 /**
      * Checkbox
      *
      * Hidden from view, see Indicator for visual faux checkbox.
      */
 :host([data-render-mode="shadow"]) [part='checkbox'] {
-    width: 1px;
-    height: 1px;
-    border: 0;
-    clip: rect(0 0 0 0);
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    pointer-events: auto;
-  }
+  width: 1px;
+  height: 1px;
+  border: 0;
+  clip: rect(0 0 0 0);
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  pointer-events: auto;
+}
 /**
      * Checkbox Indicator
      *
@@ -231,130 +231,136 @@
      * + LBC uses a styled <span>. Due to this divergence, we require custom CSS.
      */
 :host([data-render-mode="shadow"]) [part='indicator'] {
-    display: inline-block;
-    position: relative;
-    width: 1rem;
-    height: 1rem;
-    border-radius: var(--_slds-c-inputcheckbox-radius-border, var(--slds-g-radius-border-1));
-    border: var(--_slds-c-inputcheckbox-sizing-border, var(--slds-g-sizing-border-1)) solid
-      var(--_slds-c-inputcheckbox-color-border, var(--slds-g-color-border-2));
-    background-color: var(--_slds-c-inputcheckbox-color-background, var(--slds-g-color-surface-container-1));
-    box-shadow: var(--_slds-c-inputcheckbox-shadow);
-    transition: border 0.1s linear, background-color 0.1s linear;
-    vertical-align: middle;
-  }
+  display: inline-block;
+  position: relative;
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--_slds-c-inputcheckbox-radius-border, var(--slds-g-radius-border-1));
+  border: var(--_slds-c-inputcheckbox-sizing-border, var(--slds-g-sizing-border-1)) solid
+    var(--_slds-c-inputcheckbox-color-border, var(--slds-g-color-border-2));
+  background-color: var(--_slds-c-inputcheckbox-color-background, var(--slds-g-color-surface-container-1));
+  box-shadow: var(--_slds-c-inputcheckbox-shadow);
+  transition:
+    border 0.1s linear,
+    background-color 0.1s linear;
+  vertical-align: middle;
+}
 /**
      * Checked
      */
 :host([data-render-mode="shadow"][checked]) [part='indicator']::after {
-    content: '';
-    height: calc(1rem / 4);
-    width: calc(1rem / 2);
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0) rotate(-45deg);
-    border-bottom: 2px solid
-      var(--_slds-c-inputcheckbox-mark-color-foreground, var(--slds-g-color-border-accent-2));
-    border-left: 2px solid var(--_slds-c-inputcheckbox-mark-color-foreground, var(--slds-g-color-border-accent-2));
-  }
+  content: '';
+  height: calc(1rem / 4);
+  width: calc(1rem / 2);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0) rotate(-45deg);
+  border-bottom: 2px solid
+    var(--_slds-c-inputcheckbox-mark-color-foreground, var(--slds-g-color-border-accent-2));
+  border-left: 2px solid
+    var(--_slds-c-inputcheckbox-mark-color-foreground, var(--slds-g-color-border-accent-2));
+}
 :host([data-render-mode="shadow"][checked]) [part='indicator'] {
-    --_slds-c-inputcheckbox-color-background: var(--_slds-c-inputcheckbox-color-background-checked);
-    --_slds-c-inputcheckbox-color-border: var(--_slds-c-inputcheckbox-color-border-checked);
-  }
+  --_slds-c-inputcheckbox-color-background: var(--_slds-c-inputcheckbox-color-background-checked);
+  --_slds-c-inputcheckbox-color-border: var(--_slds-c-inputcheckbox-color-border-checked);
+}
 /**
      * Disabled
      */
 :host([data-render-mode="shadow"][disabled]) [part='indicator'] {
-    --_slds-c-inputcheckbox-color-background: var(
-      --_slds-c-inputcheckbox-color-background-disabled,
-      var(--slds-g-color-disabled-container-2)
-    );
-    --_slds-c-inputcheckbox-color-border: var(--_slds-c-inputcheckbox-color-border-disabled, var(--slds-g-color-border-disabled-1));
-    --_slds-c-inputcheckbox-mark-color-foreground: var(
-      --_slds-c-inputcheckbox-mark-color-foreground-disabled,
-      var(--slds-g-color-on-disabled-2)
-    );
-  }
+  --_slds-c-inputcheckbox-color-background: var(
+    --_slds-c-inputcheckbox-color-background-disabled,
+    var(--slds-g-color-disabled-container-2)
+  );
+  --_slds-c-inputcheckbox-color-border: var(
+    --_slds-c-inputcheckbox-color-border-disabled,
+    var(--slds-g-color-border-disabled-1)
+  );
+  --_slds-c-inputcheckbox-mark-color-foreground: var(
+    --_slds-c-inputcheckbox-mark-color-foreground-disabled,
+    var(--slds-g-color-on-disabled-2)
+  );
+}
 /**
      * Focused
      */
 :host(:not([disabled])) input:focus-within + .slds-checkbox__label [part='indicator'] {
-    --_slds-c-inputcheckbox-color-background: var(--_slds-c-inputcheckbox-color-background-focus);
-    --_slds-c-inputcheckbox-color-border: var(
-      --_slds-c-inputcheckbox-color-border-focus,
-      var(--slds-g-color-accent-2)
-    );
-    --_slds-c-inputcheckbox-shadow: var(
-      --_slds-c-inputcheckbox-shadow-focus,
-      0 0 3px var(--slds-g-color-accent-2)
-    );
-  }
+  --_slds-c-inputcheckbox-color-background: var(--_slds-c-inputcheckbox-color-background-focus);
+  --_slds-c-inputcheckbox-color-border: var(
+    --_slds-c-inputcheckbox-color-border-focus,
+    var(--slds-g-color-accent-2)
+  );
+  --_slds-c-inputcheckbox-shadow: var(
+    --_slds-c-inputcheckbox-shadow-focus,
+    0 0 3px var(--slds-g-color-accent-2)
+  );
+}
 /**
      * Invalid
      */
 :host([data-render-mode="shadow"][invalid]) [part='indicator'] {
-    --_slds-c-inputcheckbox-sizing-border: var(
-      --_slds-c-inputcheckbox-sizing-border-invalid,
-      var(--slds-g-sizing-border-2)
-    );
-    --_slds-c-inputcheckbox-color-border: var(
-      --_slds-c-inputcheckbox-color-border-invalid,
-      var(--slds-g-color-border-error-1)
-    );
-    --_slds-c-inputcheckbox-mark-color-foreground: var(
-      --_slds-c-inputcheckbox-mark-color-foreground-invalid,
-      var(--slds-g-color-error-1)
-    );
-  }
+  --_slds-c-inputcheckbox-sizing-border: var(
+    --_slds-c-inputcheckbox-sizing-border-invalid,
+    var(--slds-g-sizing-border-2)
+  );
+  --_slds-c-inputcheckbox-color-border: var(
+    --_slds-c-inputcheckbox-color-border-invalid,
+    var(--slds-g-color-border-error-1)
+  );
+  --_slds-c-inputcheckbox-mark-color-foreground: var(
+    --_slds-c-inputcheckbox-mark-color-foreground-invalid,
+    var(--slds-g-color-error-1)
+  );
+}
 :host([data-render-mode="shadow"][invalid]) [part='help-text'] {
-    color: var(--_slds-c-inputcheckbox-helptext-color-invalid, var(--slds-g-color-error-1));
-  }
+  color: var(--_slds-c-inputcheckbox-helptext-color-invalid, var(--slds-g-color-error-1));
+}
 /**
      * Label Inline Variant
      *
      * @TODO: Remove magic number for MQ
      */
 @media (width >= 48em) {
-    :host([data-render-mode="shadow"][variant='label-inline']) [part='label-container'] {
-      float: left;
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='label-container'] {
+    float: left;
 
-      /* TODO: Get rid of these magic numbers */
-      max-width: calc(33% - 1.125rem);
-      padding-block-start: var(--slds-g-spacing-1);
-      padding-inline-start: var(--slds-g-spacing-1);
-    }
+    /* TODO: Get rid of these magic numbers */
+    max-width: calc(33% - 1.125rem);
+    padding-block-start: var(--slds-g-spacing-1);
+    padding-inline-start: var(--slds-g-spacing-1);
+  }
 
-    :host([data-render-mode="shadow"][variant='label-inline']) [part='input-checkbox'] {
-      display: block;
-      margin-inline-start: 33%;
-      padding-block: var(--slds-g-spacing-1);
-      margin-block-end: var(--slds-g-spacing-2);
-    }
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='input-checkbox'] {
+    display: block;
+    margin-inline-start: 33%;
+    padding-block: var(--slds-g-spacing-1);
+    margin-block-end: var(--slds-g-spacing-2);
+  }
 
-    :host([data-render-mode="shadow"][variant='label-inline']) [part='inline-help'] {
-      float: left;
-      padding-block-start: var(--slds-g-spacing-1);
-    }
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='inline-help'] {
+    float: left;
+    padding-block-start: var(--slds-g-spacing-1);
+  }
 
-    :host([data-render-mode="shadow"][variant='label-inline']) [part='indicator'] {
-      /* @TODO: add change to SDS, removes line-height from display inline */
-      display: block;
-    }
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='indicator'] {
+    /* @TODO: add change to SDS, removes line-height from display inline */
+    display: block;
   }
+}
 /**
      * Standalone Checkbox
      *
      * label-inline & label-stacked uses the "standalone" checkbox that lives outside the label
      */
 :host([data-render-mode="shadow"][variant='label-inline']) [part='checkbox'],:host([data-render-mode="shadow"][variant='label-stacked']) [part='checkbox'] {
-    width: 1rem;
-    height: 1rem;
-    margin: 0;
-    clip: auto;
-    opacity: 0;
-    z-index: 1;
-  }
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  clip: auto;
+  opacity: 0;
+  z-index: 1;
+}
 /**
    * A temporarily baked-in utility class until SLDS gets a proper utility package.
    *
@@ -374,8 +380,8 @@
   text-transform: none !important;
   white-space: nowrap !important;
 }
-:host([data-render-mode="shadow"]) .slds-checkbox [type="checkbox"]:indeterminate + .slds-checkbox__label .slds-checkbox_faux::after {
-  content: "";
+:host([data-render-mode="shadow"]) .slds-checkbox [type='checkbox']:indeterminate + .slds-checkbox__label .slds-checkbox_faux::after {
+  content: '';
   display: block;
   position: absolute;
   top: 50%;

package/src/lightning/primitiveHeaderFactory/primitive-header-factory.slds.css

@@ -30,10 +30,15 @@
 }
 :host([data-render-mode="shadow"].slds-has-focus.slds-is-resizable) .slds-th__action,:host([data-render-mode="shadow"].slds-has-focus.slds-is-resizable) .slds-th__action:focus,:host([data-render-mode="shadow"].slds-has-focus.slds-is-resizable) .slds-th__action:hover,:host([data-render-mode="shadow"].slds-has-focus.slds-is-resizable) .slds-th__action:focus:hover,:host([data-render-mode="shadow"].slds-is-resizable) .slds-th__action:focus,:host([data-render-mode="shadow"].slds-is-resizable) .slds-th__action:focus:hover {
   background-color: var(--slds-g-color-surface-container-1);
-  box-shadow: var(--slds-g-color-accent-2) 0 0 0 1px inset, var(--slds-g-color-accent-2) -0.25rem 0 0 inset;
+  box-shadow:
+    var(--slds-g-color-accent-2) 0 0 0 1px inset,
+    var(--slds-g-color-accent-2) -0.25rem 0 0 inset;
 }
 :host([data-render-mode="shadow"].slds-is-sortable) .slds-th__action:hover,:host([data-render-mode="shadow"].slds-is-sortable) .slds-th__action:focus,:host([data-render-mode="shadow"].slds-is-sortable.slds-has-focus) .slds-th__action,:host([data-render-mode="shadow"].slds-is-sortable.slds-has-focus) .slds-th__action:hover,:host([data-render-mode="shadow"].slds-is-sortable.slds-has-focus) .slds-th__action:focus {
-  background-color: var(--slds-s-table-header-color-background-hover, var(--slds-g-color-suruface-container-3));
+  background-color: var(
+    --slds-s-table-header-color-background-hover,
+    var(--slds-g-color-suruface-container-3)
+  );
   color: currentcolor;
 }
 :host([data-render-mode="shadow"].slds-is-resizable) .slds-th__action:focus {
@@ -106,7 +111,7 @@
   transform: rotate(180deg);
 }
 /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-:host([data-render-mode="shadow"]) .slds-checkbox [type="checkbox"][disabled] + .slds-checkbox__label .slds-checkbox_faux {
+:host([data-render-mode="shadow"]) .slds-checkbox [type='checkbox'][disabled] + .slds-checkbox__label .slds-checkbox_faux {
   border-color: var(--slds-g-color-border-base-1);
   background-color: var(--slds-g-color-neutral-base-95);
-}
+}

package/src/lightning/primitiveHeaderFactory/selectableHeader.css

@@ -1 +1 @@
-@import './selectableHeader.lbc.native.css'
+@import './selectableHeader.lbc.native.css';

package/src/lightning/primitiveHeaderFactory/selectableHeader.lbc.native.css

@@ -2,4 +2,4 @@
 @import 'lightning/sldsUtilsVisibility';
 @import './input-checkbox.slds.css';
 @import './form-element.slds.css';
-@import './primitive-header-factory.slds.css'
+@import './primitive-header-factory.slds.css';

package/src/lightning/primitiveHeaderFactory/sortableHeader.lbc.synthetic.css

@@ -12,9 +12,15 @@ column header wrapping on hover (W-16027919) */
 
 :host(.slds-is-sortable) .slds-th__action:hover .private-dt-sort-icon_container,
 :host(.slds-is-sortable) .slds-th__action:focus .private-dt-sort-icon_container,
-:host(.slds-is-sortable.slds-has-focus) .slds-th__action .private-dt-sort-icon_container,
-:host(.slds-is-sortable.slds-has-focus) .slds-th__action:hover .private-dt-sort-icon_container,
-:host(.slds-is-sortable.slds-has-focus) .slds-th__action:focus .private-dt-sort-icon_container,
+:host(.slds-is-sortable.slds-has-focus)
+    .slds-th__action
+    .private-dt-sort-icon_container,
+:host(.slds-is-sortable.slds-has-focus)
+    .slds-th__action:hover
+    .private-dt-sort-icon_container,
+:host(.slds-is-sortable.slds-has-focus)
+    .slds-th__action:focus
+    .private-dt-sort-icon_container,
 :host(.slds-is-sortable) .slds-is-sorted .private-dt-sort-icon_container {
     display: block;
     opacity: 1;

package/src/lightning/primitiveHeaderFactory/sortingMenuHeader.lbc.native.css

@@ -1,3 +1,2 @@
 @import 'lightning/sldsCommon';
 @import './primitive-header-factory.slds.css';
-

package/src/lightning/primitiveIcon/icon.slds.css

@@ -132,7 +132,8 @@
     var(--slds-c-icon-sizing, var(--slds-g-sizing-9))
   );
 }
-:host([data-render-mode="shadow"][icon-name*='action']),:host([data-render-mode="shadow"])  .slds-icon_container_circle {
+:host([data-render-mode="shadow"][icon-name*='action']),:host([data-render-mode="shadow"]) 
+.slds-icon_container_circle {
   --slds-c-icon-spacing-block: var(--slds-g-sizing-3);
   --slds-c-icon-spacing-inline: var(--slds-g-sizing-3);
   --slds-c-icon-radius-border: calc(var(--slds-g-radius-border-circle) / 2);
@@ -233,5 +234,8 @@
 }
 :host([data-render-mode="shadow"]) .slds-icon_container {
   border-radius: var(--slds-c-icon-radius-border, var(--slds-s-icon-radius-border));
-  background-color: var(--slds-c-icon-color-background, var(--slds-s-icon-color-background, var(--sds-c-icon-color-background)));
+  background-color: var(
+    --slds-c-icon-color-background,
+    var(--slds-s-icon-color-background, var(--sds-c-icon-color-background))
+  );
 }

package/src/lightning/primitiveIcon/primitiveIcon.js

@@ -7,7 +7,11 @@ import { api } from 'lwc';
 import { features } from 'lightning/features';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
-import { normalizeString as normalize, isCSR, sanitizeURL } from 'lightning/utilsPrivate';
+import {
+    normalizeString as normalize,
+    isCSR,
+    sanitizeURL,
+} from 'lightning/utilsPrivate';
 
 import standardTemplate from './primitiveIcon.html';
 import iconStylesheets from './primitiveIcon.css';
@@ -119,7 +123,11 @@ export default class LightningPrimitiveIcon extends LightningShadowBaseClass {
     }
 
     get href() {
-        return this.src ? (features.ENABLE_SANITIZE_URL ? sanitizeURL(this.src) : this.src) : '';
+        return this.src
+            ? features.ENABLE_SANITIZE_URL
+                ? sanitizeURL(this.src)
+                : this.src
+            : '';
     }
 
     get name() {

package/src/lightning/primitiveInputCheckbox/form-element.slds.css

@@ -1,5 +1,4 @@
 
-
 /**
  * sldsFormElementUtils.css and form-element.css have many similarities
  * however, they are used for very different use cases, and this is why
@@ -255,7 +254,9 @@
   display: block;
 }
 
-:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-label),:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-editor-container) {/* for rich text via lightning-quill */
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-label),:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-editor-container) {
+  /* for rich text via lightning-quill */
+
   /* @W-14518344 The following line still exists in SLDS-internal
       but it was removed here because it was causing the input
       component to not display it's bottom border
@@ -294,8 +295,7 @@
 /* Force inner child input to not have padding and margin.
 The parent (ex. lightning-input-field) will provide it instead */
 
-:host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element,:host([data-render-mode="shadow"][variant='label-inline']) [variant='label-inline']
-{
+:host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element,:host([data-render-mode="shadow"][variant='label-inline']) [variant='label-inline'] {
   padding: 0;
   margin-block-end: 0;
 }