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

package/src/lightning/alert/__docs__/alert.md

@@ -36,19 +36,19 @@ This component uses the Salesforce Lightning Design System (SLDS) [`prompt` blue
 
 `LightningAlert` supports the following attributes:
 
--   `message`: Message text that displays in the alert.
--   `label`: Header text, also used as the `aria-label`. Default string is `Alert`.
--   `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 alert.
+- `label`: Header text, also used as the `aria-label`. Default string is `Alert`.
+- `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, `LightningAlert` uses the `default` theme. `LightningAlert` ignores the `style` attribute.
 

package/src/lightning/alert/alert.css

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

package/src/lightning/ariaObserver/__docs__/ariaObserver.md

@@ -1,11 +1,12 @@
 The `lightning/ariaObserver` module provides an easy way for users to write accessible component that works in both synthetic and native shadow.
 
 ## Aria ID referencing in native shadow
+
 Use the `AriaObserver` library to write accessible component that works where `ariaLabelledBy` would break native shadow.
 
 Here's an example that won't work with native shadow. In the following code, we support attribute `ariaLabelledBy` in our component `c-foo`, so the `input` element is labelled by external elements.
 
-``` html
+```html
 <template>
     <input aria-labelledby={ariaLabelledBy}>
 </template>
@@ -19,7 +20,7 @@ class Foo extends LightningElement {
 
 This example uses the `aria-labelledby` attribute to use the internal input as an external label in `c-foo`.
 
-``` html
+```html
 <span id="my-label">Input field</span>
 <c-foo aria-labelledby="my-label"></c-foo>
 ```
@@ -31,9 +32,10 @@ The above example works fine in synthetic shadow, but in native shadow mode, the
 To use `AriaObserver` in your component, first import it from `lightning/ariaObserver`. Then, instantiate the `AriaObserver` within your component.
 
 The `AriaObserver` constructor takes one parameter:
+
 - `cmpReference` The reference of the current component (`this`).
 
-``` js
+```js
 import AriaObserver from 'lightning/ariaObserver';
 
 export default class Foo extends LightningElement {
@@ -49,6 +51,7 @@ export default class Foo extends LightningElement {
 > Initializing the observer in the constructor, rather than `connectedCallback`, can lead to subtle bugs.
 
 Next, use the `connect(options)` method to connect between the internal element and the external reference. It takes an options object with the following keys:
+
 - `attribute` The name of the aria attribute. Two supported options: `aria-labelledby`, `aria-describedby`, `aria-activedescendant` and `aria-controls`.
 - `targetSelector` The selector to the internal element where the aria attribute should be attached.
 - `targetNode` The element where the aria attribute should be attached. If not provided, the `targetSelector` is used.
@@ -56,7 +59,8 @@ Next, use the `connect(options)` method to connect between the internal element
 - `relatedNodes` An Array of HTMLElement element(s) to which the `targetNode` will be related. Combined with `relatedNodeIds` if both are present.
 
 This example uses `connect(options)` to display an aria label for the internal `input` element.
-``` js
+
+```js
 @api
 get ariaLabelledBy() {
     return this._ariaLabelledBy;
@@ -73,13 +77,14 @@ set ariaLabelledBy(refs) {
 ```
 
 Then use the `sync(isNativeShadow)` method to synchronize the ID references when the template is re-rendered.
+
 - `isNativeShadow` An optional parameter that indicates whether the relationships involve components rendered in native shadow.
-Used when the `targetSelector` or `targetNode` is within a shadow boundary, but the parent component where AriaObserver has been
-instantiated is not. Example: `lightning-primitive-input-simple` may be rendered in native shadow, but `lightning-input` may not be.
+  Used when the `targetSelector` or `targetNode` is within a shadow boundary, but the parent component where AriaObserver has been
+  instantiated is not. Example: `lightning-primitive-input-simple` may be rendered in native shadow, but `lightning-input` may not be.
 
 It is important to protect the call to `sync` by checking if the component `isConnected`. This is because there are some cases where a component may be rendered but not connected and calling `sync` when a component is not connected will fail.
 
-``` js
+```js
 renderedCallback() {
     if (this.isConnected) {
         this.ariaObserver.sync();
@@ -99,7 +104,7 @@ but one of its ancestor nodes does. For example, `lightning-base-combobox` is co
 
 Finally, disconnect the aria observer and free the resources at the end of the component lifecycle.
 
-``` js
+```js
 disconnectedCallback() {
     if (this.ariaObserver) {
         this.ariaObserver.disconnect();
@@ -110,14 +115,14 @@ disconnectedCallback() {
 
 Here is all these steps combined into a complete example of a component using `AriaObserver`.
 
-``` html
+```html
 <template>
     <!-- element where the aria attribute is attached -->
     <input>
 </template>
 ```
 
-``` js
+```js
 import {api, LightningElement} from 'lwc';
 import AriaObserver from 'lightning/ariaObserver';
 
@@ -162,6 +167,7 @@ export default class Foo extends LightningElement {
 ```
 
 Supported attributes:
+
 - `aria-labelledby`
 - `aria-describedby`
 - `aria-activedescendant`

package/src/lightning/avatar/__docs__/avatar.md

@@ -78,8 +78,8 @@ is available in your org.
 
 Use the `variant` attribute with one of these values to apply styling.
 
--   `square` is the default variant, displaying a rectangle avatar with rounded corners
--   `circle` displays a round avatar
+- `square` is the default variant, displaying a rectangle avatar with rounded corners
+- `circle` displays a round avatar
 
 This example creates a round avatar.
 

package/src/lightning/avatar/avatar.css

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

package/src/lightning/avatar/avatar.slds.css

@@ -1,98 +1,97 @@
 
-
-  :host([data-render-mode="shadow"]) .slds-assistive-text {
-    position: absolute !important;
-    margin: -1px !important;
-    border: 0 !important;
-    padding: 0 !important;
-    width: 1px !important;
-    height: 1px !important;
-    overflow: hidden !important;
-    clip: rect(0 0 0 0) !important;
-    text-transform: none !important;
-    white-space: nowrap !important;
-  }
-
-  :host([data-render-mode="shadow"]) [part='avatar'] {
-    width: var(--slds-c-avatar-sizing, var(--slds-g-sizing-9));
-    height: var(--slds-c-avatar-sizing, var(--slds-g-sizing-9));
-    overflow: hidden;
-    display: inline-block;
-    vertical-align: middle;
-    border-radius: var(--slds-c-avatar-radius-border, var(--slds-g-radius-border-2));
-    line-height: var(--slds-g-font-lineheight-1);
-    font-size: var(--slds-g-font-scale-neg-1);
-    color: var(--slds-c-avatar-text-color, var(--slds-g-color-on-accent-1));
-  }
-
-  :host([data-render-mode="shadow"][size='x-small']) [part='avatar'] {
-    width: var(--slds-g-sizing-6);
-    height: var(--slds-g-sizing-6);
-    font-size: var(--slds-g-font-scale-neg-4);
-    --slds-c-icon-sizing: var(--slds-g-sizing-6);
-  }
-
-  :host([data-render-mode="shadow"][size='small']) [part='avatar'] {
-    width: var(--slds-g-sizing-7);
-    height: var(--slds-g-sizing-7);
-    font-size: var(--slds-g-font-scale-neg-4);
-    --slds-c-icon-sizing: var(--slds-g-sizing-7);
-  }
-
-  :host([data-render-mode="shadow"][size='medium']) [part='avatar'] {
-    width: var(--slds-g-sizing-9);
-    height: var(--slds-g-sizing-9);
-    font-size: var(--slds-g-font-scale-neg-1);
-    --slds-c-icon-sizing: var(--slds-g-sizing-9);
-  }
-
-  :host([data-render-mode="shadow"][size='large']) [part='avatar'] {
-    width: var(--slds-g-sizing-10);
-    height: var(--slds-g-sizing-10);
-    font-size: var(--slds-g-font-scale-1);
-    line-height: var(--slds-g-font-lineheight-2);
-    --slds-c-icon-sizing: var(--slds-g-sizing-10);
-  }
-
-  :host([data-render-mode="shadow"][variant='circle']) [part='avatar'] {
-    border-radius: calc(var(--slds-g-radius-border-circle) / 2);
-  }
-
-  :host([data-render-mode="shadow"].slds-avatar_empty) [part='avatar'] {
-    border: var(--slds-g-sizing-border-1) dashed var(--slds-g-color-neutral-base-90);
-  }
-
-  :host([data-render-mode="shadow"]) lightning-icon {
-    display: flex;
-    justify-content: center;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-avatar__initials {
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    align-items: center;
-    margin: auto;
-    color: var(--slds-c-avatar-initials-text-color);
-    height: 100%;
-    text-shadow: 0 0 1px rgba(0, 0, 0, 80%);
-    background-color: var(--slds-g-color-accent-container-2);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-avatar__initials:hover {
-    color: var(--slds-c-avatar-initials-text-color-hover, var(--slds-g-color-neutral-base-100));
-  }
-
-  :host([data-render-mode="shadow"]) .slds-avatar__initials[title] {
-    cursor: default;
-    text-decoration: none;
-  }
-
-  /* inverse is not currently supported by LBC */
-
-  :host([data-render-mode="shadow"]) .slds-avatar__initials_inverse {
-    --slds-c-avatar-text-color: var(--slds-c-avatar-inverse-text-color, var(--slds-g-color-neutral-base-30));
-
-    background-color: var(--slds-g-color-neutral-base-95);
-    text-shadow: none;
-  }
+:host([data-render-mode="shadow"]) .slds-assistive-text {
+  position: absolute !important;
+  margin: -1px !important;
+  border: 0 !important;
+  padding: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  text-transform: none !important;
+  white-space: nowrap !important;
+}
+
+:host([data-render-mode="shadow"]) [part='avatar'] {
+  width: var(--slds-c-avatar-sizing, var(--slds-g-sizing-9));
+  height: var(--slds-c-avatar-sizing, var(--slds-g-sizing-9));
+  overflow: hidden;
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: var(--slds-c-avatar-radius-border, var(--slds-g-radius-border-2));
+  line-height: var(--slds-g-font-lineheight-1);
+  font-size: var(--slds-g-font-scale-neg-1);
+  color: var(--slds-c-avatar-text-color, var(--slds-g-color-on-accent-1));
+}
+
+:host([data-render-mode="shadow"][size='x-small']) [part='avatar'] {
+  width: var(--slds-g-sizing-6);
+  height: var(--slds-g-sizing-6);
+  font-size: var(--slds-g-font-scale-neg-4);
+  --slds-c-icon-sizing: var(--slds-g-sizing-6);
+}
+
+:host([data-render-mode="shadow"][size='small']) [part='avatar'] {
+  width: var(--slds-g-sizing-7);
+  height: var(--slds-g-sizing-7);
+  font-size: var(--slds-g-font-scale-neg-4);
+  --slds-c-icon-sizing: var(--slds-g-sizing-7);
+}
+
+:host([data-render-mode="shadow"][size='medium']) [part='avatar'] {
+  width: var(--slds-g-sizing-9);
+  height: var(--slds-g-sizing-9);
+  font-size: var(--slds-g-font-scale-neg-1);
+  --slds-c-icon-sizing: var(--slds-g-sizing-9);
+}
+
+:host([data-render-mode="shadow"][size='large']) [part='avatar'] {
+  width: var(--slds-g-sizing-10);
+  height: var(--slds-g-sizing-10);
+  font-size: var(--slds-g-font-scale-1);
+  line-height: var(--slds-g-font-lineheight-2);
+  --slds-c-icon-sizing: var(--slds-g-sizing-10);
+}
+
+:host([data-render-mode="shadow"][variant='circle']) [part='avatar'] {
+  border-radius: calc(var(--slds-g-radius-border-circle) / 2);
+}
+
+:host([data-render-mode="shadow"].slds-avatar_empty) [part='avatar'] {
+  border: var(--slds-g-sizing-border-1) dashed var(--slds-g-color-neutral-base-90);
+}
+
+:host([data-render-mode="shadow"]) lightning-icon {
+  display: flex;
+  justify-content: center;
+}
+
+:host([data-render-mode="shadow"]) .slds-avatar__initials {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  margin: auto;
+  color: var(--slds-c-avatar-initials-text-color);
+  height: 100%;
+  text-shadow: 0 0 1px rgba(0, 0, 0, 80%);
+  background-color: var(--slds-g-color-accent-container-2);
+}
+
+:host([data-render-mode="shadow"]) .slds-avatar__initials:hover {
+  color: var(--slds-c-avatar-initials-text-color-hover, var(--slds-g-color-neutral-base-100));
+}
+
+:host([data-render-mode="shadow"]) .slds-avatar__initials[title] {
+  cursor: default;
+  text-decoration: none;
+}
+
+/* inverse is not currently supported by LBC */
+
+:host([data-render-mode="shadow"]) .slds-avatar__initials_inverse {
+  --slds-c-avatar-text-color: var(--slds-c-avatar-inverse-text-color, var(--slds-g-color-neutral-base-30));
+
+  background-color: var(--slds-g-color-neutral-base-95);
+  text-shadow: none;
+}

package/src/lightning/badge/__docs__/badge.md

@@ -14,8 +14,8 @@ text. Badges don't work for navigation because they can't include a hyperlink.
 
 You can create two types of badges.
 
--   A text-only badge
--   A badge with an icon that's displayed before or after the text
+- A text-only badge
+- A badge with an icon that's displayed before or after the text
 
 Here is an example of a text-only badge.
 
@@ -74,7 +74,7 @@ This example creates a green badge using the `slds-theme_success` SLDS class.
 <lightning-badge label="Approved" class="slds-theme_success"> </lightning-badge>
 ```
 
-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 [Badges: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/badges/#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 [Badges: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/badges/#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.
 

package/src/lightning/badge/badge.css

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

package/src/lightning/badge/badge.slds.css

@@ -1,76 +1,91 @@
 
-  :host([data-render-mode="shadow"]) [part="badge"] {
-    /**
+:host([data-render-mode="shadow"]) [part='badge'] {
+  /**
       * Remap to SLDS blueprint hooks for parity
       * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
       *
       */
-    /* stylelint-disable */
-    --slds-c-badge-font-lineheight: var(--slds-c-badge-line-height);
-    /* stylelint-enable */
-    display: inline-flex;
-    align-items: center;
-    padding: var(--slds-g-spacing-1) var(--slds-g-spacing-2);
-    color: var(--slds-c-badge-text-color, var(--slds-g-color-on-surface-3));
-    font-size: var(--slds-c-badge-font-size, var(--slds-g-font-scale-neg-1));
-    font-weight: var(--slds-g-font-weight-7);
-    /* stylelint-disable */
-    line-height: var(--slds-c-badge-font-lineheight, initial);
-    /* stylelint-enable */
-    white-space: nowrap;
-    border-width: var(--slds-c-badge-sizing-border, var(--slds-g-sizing-border-1));
-    border-style: solid;
-    border-color: var(--slds-c-badge-color-border, transparent);
-    border-radius: var(--slds-c-badge-radius-border, 15rem);
-    background-color: var(--slds-c-badge-color-background, var(--slds-g-color-neutral-base-95));
-  }
+  /* stylelint-disable */
+  --slds-c-badge-font-lineheight: var(--slds-c-badge-line-height);
+  /* stylelint-enable */
+  display: inline-flex;
+  align-items: center;
+  padding: var(--slds-g-spacing-1) var(--slds-g-spacing-2);
+  color: var(--slds-c-badge-text-color, var(--slds-g-color-on-surface-3));
+  font-size: var(--slds-c-badge-font-size, var(--slds-g-font-scale-neg-1));
+  font-weight: var(--slds-g-font-weight-7);
+  /* stylelint-disable */
+  line-height: var(--slds-c-badge-font-lineheight, initial);
+  /* stylelint-enable */
+  white-space: nowrap;
+  border-width: var(--slds-c-badge-sizing-border, var(--slds-g-sizing-border-1));
+  border-style: solid;
+  border-color: var(--slds-c-badge-color-border, transparent);
+  border-radius: var(--slds-c-badge-radius-border, 15rem);
+  background-color: var(--slds-c-badge-color-background, var(--slds-g-color-neutral-base-95));
+}
 
-  :host([data-render-mode="shadow"]) [part="badge"]:empty {
-    padding: 0;
-  }
+:host([data-render-mode="shadow"]) [part='badge']:empty {
+  padding: 0;
+}
 
-  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon {
-    display: inline-flex;
-    align-items: center;
-    color: var(--slds-c-badge-icon-color-foreground, var(--slds-g-color-neutral-base-50, var(--slds-g-color-neutral-base-50)));
-    line-height: 1;
-    vertical-align: middle;
-  }
+:host([data-render-mode="shadow"]) [part='badge'] .slds-badge__icon {
+  display: inline-flex;
+  align-items: center;
+  color: var(
+    --slds-c-badge-icon-color-foreground,
+    var(--slds-g-color-neutral-base-50, var(--slds-g-color-neutral-base-50))
+  );
+  line-height: 1;
+  vertical-align: middle;
+}
 
-  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon.slds-badge__icon_inverse {
-    --slds-c-badge-icon-color-foreground: var(--slds-c-badge-icon-inverse-color-foreground, currentColor);
-  }
+:host([data-render-mode="shadow"]) [part='badge'] .slds-badge__icon.slds-badge__icon_inverse {
+  --slds-c-badge-icon-color-foreground: var(--slds-c-badge-icon-inverse-color-foreground, currentColor);
+}
 
-  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon.slds-badge__icon_left {
-    margin-inline-end: var(--slds-g-spacing-1);
-  }
+:host([data-render-mode="shadow"]) [part='badge'] .slds-badge__icon.slds-badge__icon_left {
+  margin-inline-end: var(--slds-g-spacing-1);
+}
 
-  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon.slds-badge__icon_right {
-    margin-inline-start: var(--slds-g-spacing-1);
-  }
+:host([data-render-mode="shadow"]) [part='badge'] .slds-badge__icon.slds-badge__icon_right {
+  margin-inline-start: var(--slds-g-spacing-1);
+}
 
-  :host([data-render-mode="shadow"]) [part="badge"] lightning-primitive-icon {
-    vertical-align: middle;
-  }
+:host([data-render-mode="shadow"]) [part='badge'] lightning-primitive-icon {
+  vertical-align: middle;
+}
 
-  /* As a best practice for native shadow, we should use an attribute on the host rather than the SLDS class.
+/* As a best practice for native shadow, we should use an attribute on the host rather than the SLDS class.
      However, the public API for this component does not expose an attribute for this class. Establishing a programmatic
      mapping between the class and an attribute is an antipattern, requiring MutationObserver and reducing performance */
 
-  :host([data-render-mode="shadow"].slds-badge_inverse) {
-    --slds-c-badge-color-background: var(--slds-c-badge-inverse-color-background, var(--slds-g-color-neutral-base-50, var(--slds-g-color-neutral-base-50)));
-    --slds-c-badge-text-color: var(--slds-c-badge-inverse-text-color, var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100)));
-  }
+:host([data-render-mode="shadow"].slds-badge_inverse) {
+  --slds-c-badge-color-background: var(
+    --slds-c-badge-inverse-color-background,
+    var(--slds-g-color-neutral-base-50, var(--slds-g-color-neutral-base-50))
+  );
+  --slds-c-badge-text-color: var(
+    --slds-c-badge-inverse-text-color,
+    var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100))
+  );
+}
 
-  /* As a best practice for native shadow, we should use an attribute on the host rather than the SLDS class.
+/* As a best practice for native shadow, we should use an attribute on the host rather than the SLDS class.
      However, the public API for badge does not expose an attribute for this class. Establishing a programmatic mapping between
      the class and an attribute is an antipattern, requiring MutationObserver and reducing performance */
 
-  :host([data-render-mode="shadow"].slds-badge_lightest) {
-    --slds-c-badge-color-background: var(--slds-c-badge-lightest-color-background, var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100)));
-    --slds-c-badge-color-border: var(--slds-c-badge-lightest-color-border, var(--slds-g-color-border-base-1, var(--slds-g-color-neutral-base-90)));
-  }
+:host([data-render-mode="shadow"].slds-badge_lightest) {
+  --slds-c-badge-color-background: var(
+    --slds-c-badge-lightest-color-background,
+    var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100))
+  );
+  --slds-c-badge-color-border: var(
+    --slds-c-badge-lightest-color-border,
+    var(--slds-g-color-border-base-1, var(--slds-g-color-neutral-base-90))
+  );
+}
 
-  :host([data-render-mode="shadow"].slds-badge:not(:first-of-type)) {
-    margin-inline-start: var(--slds-g-spacing-2);
-  }
+:host([data-render-mode="shadow"].slds-badge:not(:first-of-type)) {
+  margin-inline-start: var(--slds-g-spacing-2);
+}

package/src/lightning/barcodeScanner/__docs__/barcodeScanner.md

@@ -89,7 +89,7 @@ To use a custom image for the barcode scanner icon, set the `enabled-icon-src` a
 
 The `lightning-barcode-scanner` component supports two events, `scan` and `error`.
 
-The `scan` event is triggered by a successful scan on a single scan component or by successfully closing the scanner window on a  multiple scan component. It returns this parameter.
+The `scan` event is triggered by a successful scan on a single scan component or by successfully closing the scanner window on a multiple scan component. It returns this parameter.
 
 | Parameter       | Type | Description                           |
 | --------------- | ---- | ------------------------------------- |
@@ -97,11 +97,11 @@ The `scan` event is triggered by a successful scan on a single scan component or
 
 The `scan` event has these properties.
 
-| Property   | Value | Description                                                                                                          |
-| ---------- | ----- | -------------------------------------------------------------------------------------------------------------------- |
-| bubbles    | false | This event does not bubble.                                                                                          |
+| Property   | Value | Description                                                                                                  |
+| ---------- | ----- | ------------------------------------------------------------------------------------------------------------ |
+| bubbles    | false | This event does not bubble.                                                                                  |
 | cancelable | true  | This event can be canceled. You can call `preventDefault()` on this event to prevent firing the click event. |
-| composed   | false | This event does not propagate outside the template in which it was dispatched.                                               |
+| composed   | false | This event does not propagate outside the template in which it was dispatched.                               |
 
 The `errors` event is triggered if there is an error during the scan. The event contains the error details. It returns this parameter.
 
@@ -111,8 +111,8 @@ The `errors` event is triggered if there is an error during the scan. The event
 
 The `errors` event has these properties.
 
-| Property   | Value | Description                                                                                                          |
-| ---------- | ----- | -------------------------------------------------------------------------------------------------------------------- |
-| bubbles    | false | This event does not bubble.                                                                                          |
+| Property   | Value | Description                                                                                                  |
+| ---------- | ----- | ------------------------------------------------------------------------------------------------------------ |
+| bubbles    | false | This event does not bubble.                                                                                  |
 | cancelable | true  | This event can be canceled. You can call `preventDefault()` on this event to prevent firing the click event. |
-| composed   | false | This event does not propagate outside the template in which it was dispatched.                                               |
+| composed   | false | This event does not propagate outside the template in which it was dispatched.                               |