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

package/src/lightning/interactiveDialogBase/modal-footer.slds.css

@@ -1,61 +1,59 @@
 
+:host([data-render-mode="shadow"]) .slds-modal__footer {
+  /* stylelint-disable sds-stylelint-plugin/styling-hooks-deprecated */
 
-  :host([data-render-mode="shadow"]) .slds-modal__footer {
+  /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
 
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-deprecated */
-
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-
-    /**
+  /**
      * Remap to SLDS blueprint hooks for parity
      * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
      */
-    --slds-c-modal-footer-color-background: var(--slds-c-modalfooter-color-background);
-    --slds-c-modal-footer-text-color: var(--slds-c-modalfooter-text-color);
-    --slds-c-modal-footer-spacing-block-start: var(--slds-c-modalfooter-spacing-block-start);
-    --slds-c-modal-footer-spacing-inline-end: var(--slds-c-modalfooter-spacing-inline-end);
-    --slds-c-modal-footer-spacing-block-end: var(--slds-c-modalfooter-spacing-block-end);
-    --slds-c-modal-footer-spacing-inline-start: var(--slds-c-modalfooter-spacing-inline-start);
-
-    border-end-end-radius: var(--slds-c-modalfooter-radius-border, var(--slds-g-radius-border-2));
-    border-end-start-radius: var(--slds-c-modalfooter-radius-border, var(--slds-g-radius-border-2));
-    border-block-start-width: var(--slds-c-modalfooter-sizing-border, var(--slds-g-sizing-border-2));
-    border-block-start-style: solid;
-    border-block-start-color: var(--slds-c-modalfooter-color-border, var(--slds-g-color-border-1));
-    background-color: var(--slds-c-modalfooter-color-background, var(--slds-g-color-surface-container-2));
-    color: var(--slds-c-modalfooter-text-color);
-    -ms-flex-negative: 0;
-    flex-shrink: 0;
-    padding-block-start: var(--slds-c-modalfooter-spacing-block-start, var(--slds-g-spacing-3));
-    padding-inline-end: var(--slds-c-modalfooter-spacing-inline-end, var(--slds-g-spacing-4));
-    padding-block-end: var(--slds-c-modalfooter-spacing-block-end, var(--slds-g-spacing-3));
-    padding-inline-start: var(--slds-c-modalfooter-spacing-inline-start, var(--slds-g-spacing-4));
-    text-align: right;
-    box-shadow: var(--slds-c-modalfooter-shadow, 0 2px 3px 0 rgba(0, 0, 0, 16%));
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-deprecated */
-
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-  }
-
-  /* TODO W-12674349: Replace with visibility utility classes when available */
-
-  :host([data-render-mode="shadow"]) .slds-hide {
-    display: none !important;
+  --slds-c-modal-footer-color-background: var(--slds-c-modalfooter-color-background);
+  --slds-c-modal-footer-text-color: var(--slds-c-modalfooter-text-color);
+  --slds-c-modal-footer-spacing-block-start: var(--slds-c-modalfooter-spacing-block-start);
+  --slds-c-modal-footer-spacing-inline-end: var(--slds-c-modalfooter-spacing-inline-end);
+  --slds-c-modal-footer-spacing-block-end: var(--slds-c-modalfooter-spacing-block-end);
+  --slds-c-modal-footer-spacing-inline-start: var(--slds-c-modalfooter-spacing-inline-start);
+
+  border-end-end-radius: var(--slds-c-modalfooter-radius-border, var(--slds-g-radius-border-2));
+  border-end-start-radius: var(--slds-c-modalfooter-radius-border, var(--slds-g-radius-border-2));
+  border-block-start-width: var(--slds-c-modalfooter-sizing-border, var(--slds-g-sizing-border-2));
+  border-block-start-style: solid;
+  border-block-start-color: var(--slds-c-modalfooter-color-border, var(--slds-g-color-border-1));
+  background-color: var(--slds-c-modalfooter-color-background, var(--slds-g-color-surface-container-2));
+  color: var(--slds-c-modalfooter-text-color);
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  padding-block-start: var(--slds-c-modalfooter-spacing-block-start, var(--slds-g-spacing-3));
+  padding-inline-end: var(--slds-c-modalfooter-spacing-inline-end, var(--slds-g-spacing-4));
+  padding-block-end: var(--slds-c-modalfooter-spacing-block-end, var(--slds-g-spacing-3));
+  padding-inline-start: var(--slds-c-modalfooter-spacing-inline-start, var(--slds-g-spacing-4));
+  text-align: right;
+  box-shadow: var(--slds-c-modalfooter-shadow, 0 2px 3px 0 rgba(0, 0, 0, 16%));
+  /* stylelint-enable sds-stylelint-plugin/styling-hooks-deprecated */
+
+  /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+}
+
+/* TODO W-12674349: Replace with visibility utility classes when available */
+
+:host([data-render-mode="shadow"]) .slds-hide {
+  display: none !important;
+}
+
+/* Sizes: Full */
+
+/* Original SLDS implementation was desktop-first. This is now mobile-first for <=480px  */
+
+@media (width <= 30em) {
+  :host([data-render-mode="shadow"][data-size='full']) [part='modal-footer'] {
+    grid-area: footer;
+    border-start-end-radius: 0;
+    border-end-start-radius: 0;
+    box-shadow: none;
   }
 
-  /* Sizes: Full */
-
-  /* Original SLDS implementation was desktop-first. This is now mobile-first for <=480px  */
-
-  @media (width <= 30em) {
-    :host([data-render-mode="shadow"][data-size='full']) [part='modal-footer'] {
-      grid-area: footer;
-      border-start-end-radius: 0;
-      border-end-start-radius: 0;
-      box-shadow: none;
-    }
-
-    /**
+  /**
      * INTERNAL USE ONLY - SUBJECT TO CHANGE AND REMOVAL
      *
      * SLDS Blueprint <> LBC Parity Patch
@@ -67,24 +65,24 @@
      * makes this not feasible. Not ideal, but this is the best solution for now.
      * Selectors are scoped to lightning-* to avoid any potential outside conflicts.
      */
-    :host([data-render-mode="shadow"][data-size='full']) {
-      display: contents;
-    }
+  :host([data-render-mode="shadow"][data-size='full']) {
+    display: contents;
   }
+}
 
-  :host([data-render-mode="shadow"]) .slds-modal__footer .slds-button + .slds-button {
-    margin-inline-start: var(--slds-g-spacing-2);
-  }
+:host([data-render-mode="shadow"]) .slds-modal__footer .slds-button + .slds-button {
+  margin-inline-start: var(--slds-g-spacing-2);
+}
 
-  /* styles used in multi-column-sorting-modal and can be used in future usecases of
+/* styles used in multi-column-sorting-modal and can be used in future usecases of
      modal-footer
   */
 
-  :host([data-render-mode="shadow"].slds-modal__footer_directional) ::slotted(.slds-button:first-child) {
-    float: inline-start;
-    margin-inline-start: 0;
-  }
+:host([data-render-mode="shadow"].slds-modal__footer_directional) ::slotted(.slds-button:first-child) {
+  float: inline-start;
+  margin-inline-start: 0;
+}
 
-  :host([data-render-mode="shadow"].slds-modal__footer_directional) ::slotted(.slds-button) {
-    margin-inline-start: var(--slds-g-spacing-2);
-  }
+:host([data-render-mode="shadow"].slds-modal__footer_directional) ::slotted(.slds-button) {
+  margin-inline-start: var(--slds-g-spacing-2);
+}

package/src/lightning/interactiveDialogBase/modal-header.slds.css

@@ -1,62 +1,61 @@
 
+/* stylelint-disable sds-stylelint-plugin/styling-hooks-deprecated */
 
-  /* stylelint-disable sds-stylelint-plugin/styling-hooks-deprecated */
+/* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
 
-  /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-
-  :host([data-render-mode="shadow"]) .slds-modal__header {
-    /**
+:host([data-render-mode="shadow"]) .slds-modal__header {
+  /**
      * Remap to SLDS blueprint hooks for parity
      * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
      */
-    --slds-c-modal-header-color-background: var(--slds-c-modalheader-color-background);
-    --slds-c-modal-header-text-color: var(--slds-c-modalheader-text-color);
-    --slds-c-modal-header-spacing-block-start: var(--slds-c-modalheader-spacing-block-start);
-    --slds-c-modal-header-spacing-inline-end: var(--slds-c-modalheader-spacing-inline-end);
-    --slds-c-modal-header-spacing-block-end: var(--slds-c-modalheader-spacing-block-end);
-    --slds-c-modal-header-spacing-inline-start: var(--slds-c-modalheader-spacing-inline-start);
+  --slds-c-modal-header-color-background: var(--slds-c-modalheader-color-background);
+  --slds-c-modal-header-text-color: var(--slds-c-modalheader-text-color);
+  --slds-c-modal-header-spacing-block-start: var(--slds-c-modalheader-spacing-block-start);
+  --slds-c-modal-header-spacing-inline-end: var(--slds-c-modalheader-spacing-inline-end);
+  --slds-c-modal-header-spacing-block-end: var(--slds-c-modalheader-spacing-block-end);
+  --slds-c-modal-header-spacing-inline-start: var(--slds-c-modalheader-spacing-inline-start);
 
-    --slds-c-modal-heading-font-size: var(--slds-c-modalheader-heading-font-size);
-    --slds-c-modal-heading-font-weight: var(--slds-c-modalheader-heading-font-weight);
-    --slds-c-modal-heading-font-lineheight: var(--slds-c-modalheader-heading-font-lineheight);
+  --slds-c-modal-heading-font-size: var(--slds-c-modalheader-heading-font-size);
+  --slds-c-modal-heading-font-weight: var(--slds-c-modalheader-heading-font-weight);
+  --slds-c-modal-heading-font-lineheight: var(--slds-c-modalheader-heading-font-lineheight);
 
-    position: relative;
-    border-start-end-radius: var(--slds-c-modalheader-radius-border, var(--slds-g-radius-border-2));
-    border-start-start-radius: var(--slds-c-modalheader-radius-border, var(--slds-g-radius-border-2));
-    border-block-end-width: var(--slds-c-modalheader-sizing-border, var(--slds-g-sizing-border-2));
-    border-block-end-style: solid;
-    border-block-end-color: var(--slds-c-modalheader-color-border, var(--slds-g-color-border-1));
-    background-color: var(--slds-c-modalheader-color-background, var(--slds-g-color-surface-container-1));
-    color: var(--slds-c-modalheader-text-color);
-    flex-shrink: 0;
-    padding-block-start: var(--slds-c-modalheader-spacing-block-start, var(--slds-g-spacing-4));
-    padding-inline-end: var(--slds-c-modalheader-spacing-inline-end, var(--slds-g-spacing-4));
-    padding-block-end: var(--slds-c-modalheader-spacing-block-end, var(--slds-g-spacing-4));
-    padding-inline-start: var(--slds-c-modalheader-spacing-inline-start, var(--slds-g-spacing-4));
-    text-align: center;
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-deprecated */
+  position: relative;
+  border-start-end-radius: var(--slds-c-modalheader-radius-border, var(--slds-g-radius-border-2));
+  border-start-start-radius: var(--slds-c-modalheader-radius-border, var(--slds-g-radius-border-2));
+  border-block-end-width: var(--slds-c-modalheader-sizing-border, var(--slds-g-sizing-border-2));
+  border-block-end-style: solid;
+  border-block-end-color: var(--slds-c-modalheader-color-border, var(--slds-g-color-border-1));
+  background-color: var(--slds-c-modalheader-color-background, var(--slds-g-color-surface-container-1));
+  color: var(--slds-c-modalheader-text-color);
+  flex-shrink: 0;
+  padding-block-start: var(--slds-c-modalheader-spacing-block-start, var(--slds-g-spacing-4));
+  padding-inline-end: var(--slds-c-modalheader-spacing-inline-end, var(--slds-g-spacing-4));
+  padding-block-end: var(--slds-c-modalheader-spacing-block-end, var(--slds-g-spacing-4));
+  padding-inline-start: var(--slds-c-modalheader-spacing-inline-start, var(--slds-g-spacing-4));
+  text-align: center;
+  /* stylelint-enable sds-stylelint-plugin/styling-hooks-deprecated */
 
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-  }
+  /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+}
 
-  :host([data-render-mode="shadow"]) .slds-modal__title {
-    font-weight: var(--slds-c-modalheader-heading-font-weight);
-    font-size: var(--slds-c-modalheader-heading-font-size, 1.25rem);
-    line-height: var(--slds-c-modalheader-heading-font-lineheight, var(--slds-g-font-lineheight-2));
-  }
+:host([data-render-mode="shadow"]) .slds-modal__title {
+  font-weight: var(--slds-c-modalheader-heading-font-weight);
+  font-size: var(--slds-c-modalheader-heading-font-size, 1.25rem);
+  line-height: var(--slds-c-modalheader-heading-font-lineheight, var(--slds-g-font-lineheight-2));
+}
 
-  /* Sizes: Full */
+/* Sizes: Full */
 
-  /* Original SLDS implementation was desktop-first. This is now mobile-first for <=480px  */
+/* Original SLDS implementation was desktop-first. This is now mobile-first for <=480px  */
 
-  @media (width <= 30em) {
-    :host([data-render-mode="shadow"][data-size='full']) [part='modal-header'] {
-      grid-area: header;
-      border-start-start-radius: 0;
-      border-start-end-radius: 0;
-    }
+@media (width <= 30em) {
+  :host([data-render-mode="shadow"][data-size='full']) [part='modal-header'] {
+    grid-area: header;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
 
-    /**
+  /**
      * INTERNAL USE ONLY - SUBJECT TO CHANGE AND REMOVAL
      *
      * SLDS Blueprint <> LBC Parity Patch
@@ -68,7 +67,7 @@
      * makes this not feasible. Not ideal, but this is the best solution for now.
      * Selectors are scoped to lightning-* to avoid any potential outside conflicts.
      */
-    :host([data-render-mode="shadow"][data-size='full']) {
-      display: contents;
-    }
+  :host([data-render-mode="shadow"][data-size='full']) {
+    display: contents;
   }
+}

package/src/lightning/layout/__docs__/layout.md

@@ -41,19 +41,19 @@ The layout can be customized by setting the following attributes.
 
 Spread layout items out horizontally based on the following values.
 
--   `center`: Appends the `slds-grid_align-center` class to the grid. This attribute orders the layout items into a horizontal line without any spacing, and places the group into the center of the container.
--   `space`: Appends the `slds-grid_align-space` class to the grid. The layout items are spaced horizontally across the container, starting and ending with a space.
--   `spread`: Appends the `slds-grid_align-spread` class to the grid. The layout items are spaced horizontally across the container, starting and ending with a layout item.
--   `end`: Appends the `slds-grid_align-end` class to the grid. The layout items are grouped together and aligned horizontally on the right side of the container.
+- `center`: Appends the `slds-grid_align-center` class to the grid. This attribute orders the layout items into a horizontal line without any spacing, and places the group into the center of the container.
+- `space`: Appends the `slds-grid_align-space` class to the grid. The layout items are spaced horizontally across the container, starting and ending with a space.
+- `spread`: Appends the `slds-grid_align-spread` class to the grid. The layout items are spaced horizontally across the container, starting and ending with a layout item.
+- `end`: Appends the `slds-grid_align-end` class to the grid. The layout items are grouped together and aligned horizontally on the right side of the container.
 
 #### `vertical-align`
 
 Spread layout items out vertically based on the following values.
 
--   `start`: Appends the `slds-grid_vertical-align-start` class to the grid. The layout items are aligned at the top of the container.
--   `center`: Appends the `slds-grid_vertical-align-center` class to the grid. The layout items are aligned in the center of the container.
--   `end`: Appends the `slds-grid_vertical-align-end` class to the grid. The layout items are aligned at the bottom of the container.
--   `stretch`: Appends the `slds-grid_vertical-stretch` class to the grid. The layout items extend vertically to fill the container.
+- `start`: Appends the `slds-grid_vertical-align-start` class to the grid. The layout items are aligned at the top of the container.
+- `center`: Appends the `slds-grid_vertical-align-center` class to the grid. The layout items are aligned in the center of the container.
+- `end`: Appends the `slds-grid_vertical-align-end` class to the grid. The layout items are aligned at the bottom of the container.
+- `stretch`: Appends the `slds-grid_vertical-stretch` class to the grid. The layout items extend vertically to fill the container.
 
 #### `pull-to-boundary`
 
@@ -63,9 +63,9 @@ side of the container to the boundary. Choose the size that corresponds to the
 padding on your layout items. For instance, if
 `lightning-layout-item padding="horizontalSmall"`, choose `pull-to-boundary="small"`.
 
--   `small`: Appends the `slds-grid_pull-padded` class to the grid.
--   `medium`: Appends the `slds-grid_pull-padded-medium` class to the grid.
--   `large`: Appends the `slds-grid_pull-padded-large` class to the grid.
+- `small`: Appends the `slds-grid_pull-padded` class to the grid.
+- `medium`: Appends the `slds-grid_pull-padded-medium` class to the grid.
+- `large`: Appends the `slds-grid_pull-padded-large` class to the grid.
 
 Use the `class` or `multiple-rows` attributes to customize the styling in other
 ways.
@@ -74,8 +74,8 @@ ways.
 
 `lightning-layout` enables you to create several types of columns.
 
--   Flexible widths that adjust based on their content
--   Fixed widths that take up a percentage of the container
+- Flexible widths that adjust based on their content
+- Fixed widths that take up a percentage of the container
 
 Create a simple layout by enclosing single or multiple `lightning-layout-item` components within `lightning-layout`. `lightning-layout-item` creates a column within `lightning-layout`.
 

package/src/lightning/layout/__examples__/pullToBoundary/pullToBoundary.css

@@ -3,7 +3,7 @@
     margin: 10px 0 20px;
 }
 
- .custom-box {
+.custom-box {
     text-align: center;
     background-color: #f4f6f9;
     padding: 1rem;

package/src/lightning/layout/__examples__/simple/simple.css

@@ -8,8 +8,8 @@
 }
 
 .field-title {
-    font-size: .75rem;
+    font-size: 0.75rem;
     line-height: 1.25;
     color: #54698d;
-    margin-bottom: .25rem;
+    margin-bottom: 0.25rem;
 }

package/src/lightning/layout/__examples__/verticalAlignCenter/verticalAlignCenter.css

@@ -3,15 +3,15 @@
     margin: 10px 0 20px;
 }
 
- .large {
+.large {
     height: 200px;
 }
 
- .x-large {
+.x-large {
     height: 300px;
 }
 
- .custom-box {
+.custom-box {
     text-align: center;
     background-color: #f4f6f9;
     padding: 1rem;

package/src/lightning/layout/__examples__/verticalAlignStretch/verticalAlignStretch.css

@@ -3,15 +3,15 @@
     margin: 10px 0 20px;
 }
 
- .large {
+.large {
     height: 200px;
 }
 
- .x-large {
+.x-large {
     height: 300px;
 }
 
- .custom-box {
+.custom-box {
     text-align: center;
     background-color: #f4f6f9;
     padding: 1rem;

package/src/lightning/layout/layout.css

@@ -1,2 +1,2 @@
 @import './layout.lbc.synthetic.css';
-@import './layout.lbc.native.css';
+@import './layout.lbc.native.css';

package/src/lightning/layout/layout.lbc.native.css

@@ -1,2 +1,2 @@
 @import 'lightning/sldsCommon';
-@import 'lightning/sldsUtilsGrid';
+@import 'lightning/sldsUtilsGrid';

package/src/lightning/layout/layout.lbc.synthetic.css

@@ -1,5 +1,4 @@
-@media all and (-ms-high-contrast: none),
-(-ms-high-contrast: active) {
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     .slds-slot {
         display: flex;
     }

package/src/lightning/layoutItem/layoutItem.css

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

package/src/lightning/lookupAddress/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;
 }