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

package/src/lightning/colorPickerPanel/popover.slds.css

@@ -1,129 +1,128 @@
 
-  :host([data-render-mode="shadow"]) .slds-popover {
-      position: relative;
-      border-radius: var(--slds-g-radius-border-2);
-      width: var(--slds-g-sizing-15);
-      min-height: calc(var(--slds-g-sizing-5) * 2);
-      z-index: var(--slds-c-popover-position-zindex, 6000);
-      background-color: var(--slds-c-popover-color-background,
-          var(--slds-g-color-surface-container-1));
-      display: inline-block;
-      box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 16%);
-      border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-popover_edit {
-    border-block-start: 0;
-    border-start-start-radius: 0;
-    border-start-end-radius: 0;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-popover_edit .slds-popover__body {
-    padding: var(--slds-g-spacing-1);
-    padding-inline-start: 0;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-popover__meta {
-      margin-block-end: var(--slds-g-sizing-4);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-popover__body {
-      padding-block: var(--slds-g-spacing-2);
-      padding-inline: var(--slds-g-spacing-3);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-popover__body .slds-popover__header {
-      padding-block: 0 var(--slds-g-sizing-3);
-      padding-inline: 0;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-popover__body,:host([data-render-mode="shadow"]) 
-  .slds-popover__header,:host([data-render-mode="shadow"]) 
-  .slds-popover__footer {
-      position: relative;
-      padding-block: var(--slds-g-spacing-2);
-      padding-inline: var(--slds-g-spacing-3);
-      word-wrap: break-word;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-popover__header {
-      border-bottom: 0;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-popover__footer {
-      border-block-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
-      background-color: var(--slds-g-color-surface-container-2);
-      border-end-start-radius: inherit;
-      border-end-end-radius: inherit;
-      padding-block: var(--slds-g-spacing-2);
-      padding-inline: var(--slds-g-spacing-3);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-popover__footer_form {
-      text-align: center;
-      background: var(--slds-g-color-surface-container-2);
-      border-radius: 0 0 var(--slds-g-radius-border-2) var(--slds-g-radius-border-2);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-popover__body_small {
-      max-height: var(--slds-g-sizing-14);
-      overflow-y: auto;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-popover__close {
-      position: relative;
-      margin-block: var(--slds-g-spacing-1);
-      margin-inline: var(--slds-g-spacing-1);
-      z-index: calc(var(--slds-c-popover-position-zindex, 6000) + 1);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-popover_small {
-      max-width: var(--slds-g-sizing-14);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-popover_medium {
-      min-width: var(--slds-g-sizing-15);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-popover_large {
-      min-width: 25rem;
-      max-width: 512px;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-popover[class*="theme_"] {
-      border: 0;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-popover *:last-child {
-      margin-bottom: 0;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-popover_full-width {
-      width: 100%;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-popover_hide {
-      display: none;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-popover_dark {
-      background-color: var(--slds-g-color-accent-container-3);
-      color: var(--slds-g-color-on-accent-1);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-popover_dark .slds-badge {
-      background-color: var(--slds-g-color-surface-container-1);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-popover_dark .slds-popover__close {
-      color: var(--slds-g-color-on-accent-1);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-popover_dark .slds-icon-text-default {
-      fill: var(--slds-g-color-on-accent-1);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-popover_dark .slds-popover__footer {
-      border-top-color: var(--slds-g-color-border-accent-2);
-      background-color: var(--slds-g-color-on-accent-2);
-  }
+:host([data-render-mode="shadow"]) .slds-popover {
+  position: relative;
+  border-radius: var(--slds-g-radius-border-2);
+  width: var(--slds-g-sizing-15);
+  min-height: calc(var(--slds-g-sizing-5) * 2);
+  z-index: var(--slds-c-popover-position-zindex, 6000);
+  background-color: var(--slds-c-popover-color-background, var(--slds-g-color-surface-container-1));
+  display: inline-block;
+  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 16%);
+  border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
+}
+
+:host([data-render-mode="shadow"]) .slds-popover_edit {
+  border-block-start: 0;
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+:host([data-render-mode="shadow"]) .slds-popover_edit .slds-popover__body {
+  padding: var(--slds-g-spacing-1);
+  padding-inline-start: 0;
+}
+
+:host([data-render-mode="shadow"]) .slds-popover__meta {
+  margin-block-end: var(--slds-g-sizing-4);
+}
+
+:host([data-render-mode="shadow"]) .slds-popover__body {
+  padding-block: var(--slds-g-spacing-2);
+  padding-inline: var(--slds-g-spacing-3);
+}
+
+:host([data-render-mode="shadow"]) .slds-popover__body .slds-popover__header {
+  padding-block: 0 var(--slds-g-sizing-3);
+  padding-inline: 0;
+}
+
+:host([data-render-mode="shadow"]) .slds-popover__body,:host([data-render-mode="shadow"]) 
+.slds-popover__header,:host([data-render-mode="shadow"]) 
+.slds-popover__footer {
+  position: relative;
+  padding-block: var(--slds-g-spacing-2);
+  padding-inline: var(--slds-g-spacing-3);
+  word-wrap: break-word;
+}
+
+:host([data-render-mode="shadow"]) .slds-popover__header {
+  border-bottom: 0;
+}
+
+:host([data-render-mode="shadow"]) .slds-popover__footer {
+  border-block-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
+  background-color: var(--slds-g-color-surface-container-2);
+  border-end-start-radius: inherit;
+  border-end-end-radius: inherit;
+  padding-block: var(--slds-g-spacing-2);
+  padding-inline: var(--slds-g-spacing-3);
+}
+
+:host([data-render-mode="shadow"]) .slds-popover__footer_form {
+  text-align: center;
+  background: var(--slds-g-color-surface-container-2);
+  border-radius: 0 0 var(--slds-g-radius-border-2) var(--slds-g-radius-border-2);
+}
+
+:host([data-render-mode="shadow"]) .slds-popover__body_small {
+  max-height: var(--slds-g-sizing-14);
+  overflow-y: auto;
+}
+
+:host([data-render-mode="shadow"]) .slds-popover__close {
+  position: relative;
+  margin-block: var(--slds-g-spacing-1);
+  margin-inline: var(--slds-g-spacing-1);
+  z-index: calc(var(--slds-c-popover-position-zindex, 6000) + 1);
+}
+
+:host([data-render-mode="shadow"]) .slds-popover_small {
+  max-width: var(--slds-g-sizing-14);
+}
+
+:host([data-render-mode="shadow"]) .slds-popover_medium {
+  min-width: var(--slds-g-sizing-15);
+}
+
+:host([data-render-mode="shadow"]) .slds-popover_large {
+  min-width: 25rem;
+  max-width: 512px;
+}
+
+:host([data-render-mode="shadow"]) .slds-popover[class*='theme_'] {
+  border: 0;
+}
+
+:host([data-render-mode="shadow"]) .slds-popover *:last-child {
+  margin-bottom: 0;
+}
+
+:host([data-render-mode="shadow"]) .slds-popover_full-width {
+  width: 100%;
+}
+
+:host([data-render-mode="shadow"]) .slds-popover_hide {
+  display: none;
+}
+
+:host([data-render-mode="shadow"]) .slds-popover_dark {
+  background-color: var(--slds-g-color-accent-container-3);
+  color: var(--slds-g-color-on-accent-1);
+}
+
+:host([data-render-mode="shadow"]) .slds-popover_dark .slds-badge {
+  background-color: var(--slds-g-color-surface-container-1);
+}
+
+:host([data-render-mode="shadow"]) .slds-popover_dark .slds-popover__close {
+  color: var(--slds-g-color-on-accent-1);
+}
+
+:host([data-render-mode="shadow"]) .slds-popover_dark .slds-icon-text-default {
+  fill: var(--slds-g-color-on-accent-1);
+}
+
+:host([data-render-mode="shadow"]) .slds-popover_dark .slds-popover__footer {
+  border-top-color: var(--slds-g-color-border-accent-2);
+  background-color: var(--slds-g-color-on-accent-2);
+}

package/src/lightning/combobox/__docs__/combobox.md

@@ -111,12 +111,11 @@ In Lightning Experience, a `lightning-combobox` dropdown list that's opened over
 
 On mobile devices, `lightning-combobox` has the following limitations.
 
--   The dropdown menu doesn't scroll correctly when there isn't enough room to display the complete list of options.
--   The mobile viewport doesn't display the dropdown menu correctly especially if the component is placed near the bottom of the page.
+- The dropdown menu doesn't scroll correctly when there isn't enough room to display the complete list of options.
+- The mobile viewport doesn't display the dropdown menu correctly especially if the component is placed near the bottom of the page.
 
 We recommend using the HTML `<select>` element on mobile instead.
 
-
 #### Accessibility
 
 You must provide a text label for accessibility to make the information
@@ -163,6 +162,6 @@ The `open` event does not return any parameters.
 
 #### Customize Component Styling
 
-Component styling hooks use the `--slds-c-*` prefix and change styling for specific elements or properties of a component. Component-specific styling isn’t recommended, because it’s unsupported for SLDS 2, but existing customizations still work with the original SLDS. If you use component styling hooks, limit the components to SLDS themes until SLDS 2 and the Salesforce Cosmos theme become generally available. See [Combobox: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/combobox/#Styling-Hooks-Overview) for documentation on component-specific hooks for this component. 
+Component styling hooks use the `--slds-c-*` prefix and change styling for specific elements or properties of a component. Component-specific styling isn’t recommended, because it’s unsupported for SLDS 2, but existing customizations still work with the original SLDS. If you use component styling hooks, limit the components to SLDS themes until SLDS 2 and the Salesforce Cosmos theme become generally available. See [Combobox: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/combobox/#Styling-Hooks-Overview) for documentation on component-specific hooks for this component.
 
-For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide. 
+For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.

package/src/lightning/combobox/combobox.css

@@ -2,7 +2,6 @@
 @import './combobox.lbc.native.css';
 @import 'lightning/sldsGenAiUtils';
 
-
 :host(:not([invalid])) .slds-form-element__help {
     margin-top: 0px !important;
-}
+}

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

@@ -8,9 +8,22 @@
 */
 :host.slds-has-error {
     --slds-c-input-color-border: var(--slds-g-color-error-base-40, #ea001e);
-    --slds-c-input-shadow: var(--slds-g-color-error-base-40, #ea001e) 0 0 0 1px inset;
-    --slds-c-input-color-background: var(--slds-c-input-color-background, var(--sds-c-input-color-background, var(--slds-g-color-neutral-base-100, #fff)));
-    --slds-c-input-text-color: var(--slds-c-input-text-color, var(--sds-c-input-text-color, var(--slds-g-color-neutral-base-10, #747474)));
+    --slds-c-input-shadow: var(--slds-g-color-error-base-40, #ea001e) 0 0 0 1px
+        inset;
+    --slds-c-input-color-background: var(
+        --slds-c-input-color-background,
+        var(
+            --sds-c-input-color-background,
+            var(--slds-g-color-neutral-base-100, #fff)
+        )
+    );
+    --slds-c-input-text-color: var(
+        --slds-c-input-text-color,
+        var(
+            --sds-c-input-text-color,
+            var(--slds-g-color-neutral-base-10, #747474)
+        )
+    );
 }
 
 /* TODO W-12674349: remove after assistive text util is added */
@@ -25,4 +38,4 @@
     clip: rect(0 0 0 0) !important;
     text-transform: none !important;
     white-space: nowrap !important;
-  }
+}

package/src/lightning/combobox/combobox.slds.css

@@ -1,13 +1,12 @@
 
-
-  /**
+/**
    * Invalid State
    */
-  :host([data-render-mode="shadow"][invalid]) [part='combobox'] {
-    --slds-c-inputtext-color-border: var(--slds-g-color-error-base-50);
-    --slds-c-inputtext-sizing-border: var(--slds-g-sizing-border-1);
-  }
-  :host([data-render-mode="shadow"][variant='label-inline'].slds-form-element_horizontal) {
-    padding: 0;
-    margin-block-end: 0;
-  }
+:host([data-render-mode="shadow"][invalid]) [part='combobox'] {
+  --slds-c-inputtext-color-border: var(--slds-g-color-error-base-50);
+  --slds-c-inputtext-sizing-border: var(--slds-g-sizing-border-1);
+}
+:host([data-render-mode="shadow"][variant='label-inline'].slds-form-element_horizontal) {
+  padding: 0;
+  margin-block-end: 0;
+}

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

package/src/lightning/confirm/__docs__/confirm.md

@@ -4,7 +4,7 @@ Use `LightningConfirm.open()` instead of the native `window.confirm()` for a mor
 
 Import `LightningConfirm` from the `lightning/confirm` module in the component that will launch the confirm modal, and call `LightningConfirm.open()` with your desired attributes.
 
-This example creates a headerless confirm modal with two buttons, **OK** and **Cancel**. The `.open()` function returns a promise that resolves to true when you click **OK** and false when you  click **Cancel**.
+This example creates a headerless confirm modal with two buttons, **OK** and **Cancel**. The `.open()` function returns a promise that resolves to true when you click **OK** and false when you click **Cancel**.
 
 ```html
 <!-- c/myApp.html -->
@@ -39,19 +39,19 @@ This component uses the Salesforce Lightning Design System (SLDS) [`prompt` blue
 
 `LightningConfirm` supports the following attributes:
 
--   `message`: Message text that displays in the confirm.
--   `label`: Header text, also used as the `aria-label`. Default string is `Confirm`.
--   `variant`: Two values, `header` and `headerless`. Default value is `header`.
--   `theme`: Color theme for the header. The `theme` attribute supports the following [options](https://www.lightningdesignsystem.com/utilities/themes/#site-main-content) from SLDS:
-    -   `default`: white
-    -   `shade`: gray
-    -   `inverse`: dark blue
-    -   `alt-inverse`: darker blue
-    -   `success`: green
-    -   `info`: gray-ish blue
-    -   `warning`: yellow
-    -   `error`: red
-    -   `offline`: ​black​
+- `message`: Message text that displays in the confirm.
+- `label`: Header text, also used as the `aria-label`. Default string is `Confirm`.
+- `variant`: Two values, `header` and `headerless`. Default value is `header`.
+- `theme`: Color theme for the header. The `theme` attribute supports the following [options](https://www.lightningdesignsystem.com/utilities/themes/#site-main-content) from SLDS:
+    - `default`: white
+    - `shade`: gray
+    - `inverse`: dark blue
+    - `alt-inverse`: darker blue
+    - `success`: green
+    - `info`: gray-ish blue
+    - `warning`: yellow
+    - `error`: red
+    - `offline`: ​black​
 
 If an invalid value is provided, `LightningConfirm` uses the `default` theme. `LightningConfirm` ignores the `style` attribute.
 

package/src/lightning/context/README.md

@@ -55,17 +55,17 @@ It means that `x-bar` or any of the descendants of `x-theme-context` can wire to
 
 ### Specification
 
--   By default, the provider accepts content in the form of the default slot.
--   A provider can redefine the default template.
--   When a provider that provides the context on connect, the consumer will have the context available during the first render.
--   When a provider does not provide the context on connect, the consumer will get null as context during first rendering
--   When a provider changes the context value, all consumers wired to it will receive an updated context.
--   The provider should be able to produce a context as `{ error }` to indicate that there was an error resolving the context data under certain circumstances.
-
--   The consumer can wire to a method in order to access the context data.
--   The consumer wired to a context provider that is not descendant of it in the DOM, will get the default context from provider (getDefaultContext()).
--   The consumer will receive the same context object reference regardless of how may times is connected/disconnected.
--   Two consumers wired to the same provider and descendant of it in the DOM, should receive the same context reference. Example:
+- By default, the provider accepts content in the form of the default slot.
+- A provider can redefine the default template.
+- When a provider that provides the context on connect, the consumer will have the context available during the first render.
+- When a provider does not provide the context on connect, the consumer will get null as context during first rendering
+- When a provider changes the context value, all consumers wired to it will receive an updated context.
+- The provider should be able to produce a context as `{ error }` to indicate that there was an error resolving the context data under certain circumstances.
+
+- The consumer can wire to a method in order to access the context data.
+- The consumer wired to a context provider that is not descendant of it in the DOM, will get the default context from provider (getDefaultContext()).
+- The consumer will receive the same context object reference regardless of how may times is connected/disconnected.
+- Two consumers wired to the same provider and descendant of it in the DOM, should receive the same context reference. Example:
 
 ```html
 <x-provider>
@@ -74,7 +74,7 @@ It means that `x-bar` or any of the descendants of `x-theme-context` can wire to
 </x-provider>
 ```
 
--   When there is two instances of the same provider in the same DOM hierarchy, a descendant consumer wired to the same provider class will use the context value of the closest provider instance up in the hierarchy. Example:
+- When there is two instances of the same provider in the same DOM hierarchy, a descendant consumer wired to the same provider class will use the context value of the closest provider instance up in the hierarchy. Example:
 
 ```html
 <x-provider>
@@ -84,4 +84,4 @@ It means that `x-bar` or any of the descendants of `x-theme-context` can wire to
 </x-provider>
 ```
 
--   A consumer cannot modify the provided context.
+- A consumer cannot modify the provided context.

package/src/lightning/datatable/README.md

@@ -46,8 +46,7 @@ For supported type attributes, see the `lightning-formatted-lookup` implementati
 We document for external customers that custom data types have known limitations due to Locker.
 However, Locker permits these features in internal implementations.
 
--   Dispatching custom events on custom data types
--   Accessibility and keyboard navigation on custom data types
-
+- Dispatching custom events on custom data types
+- Accessibility and keyboard navigation on custom data types
 
 For more information, see [Extend lightning-datatable with Custom Data](https://gus.lightning.force.com/lightning/r/0D5EE00001TA1uZ0AT/view).