lightning-base-components 1.26.3-rc.0-alpha → 1.27.2-alpha

package/src/lightning/accordionSection/accordion-section.slds.css

@@ -1,121 +1,114 @@
 
-
-
-    :host([data-render-mode="shadow"]) .slds-accordion__list-item {
-        border-top-width: var(--slds-c-accordionsection-sizing-border, var(--slds-g-sizing-border-1));
-        border-top-style: solid;
-        border-top-color: var(--slds-c-accordionsection-color-border,  var(--slds-g-color-border-1));
-    }
-
-    :host([data-render-mode="shadow"]) [part="accordion-section"] {
-        padding-block-start: var(--slds-c-accordionsection-spacing-blockstart, var(--slds-g-spacing-3));
-        padding-block-end: var(--slds-c-accordionsection-spacing-blockend, var(--slds-g-spacing-3));
-        padding-inline-end: var(--slds-c-accordionsection-spacing-inlineend, var(--slds-g-spacing-3));
-        padding-inline-start: var(--slds-c-accordionsection-spacing-inlinestart, var(--slds-g-spacing-3));
-    }
-
-    :host([data-render-mode="shadow"]) .slds-accordion__summary {
-        display: flex;
-        margin-block-start: calc(var(--slds-c-accordionsection-spacing-blockstart,
-        var(--slds-g-sizing-4)) * -1);
-        margin-block-end: calc(var(--slds-c-accordionsection-spacing-blockend,
-        var(--slds-g-sizing-4)) * -1);
-        margin-inline-start: calc(var(--slds-c-accordionsection-spacing-inlinestart,
-        var(--slds-g-sizing-4)) * -1);
-        margin-inline-end: calc(var(--slds-c-accordionsection-spacing-inlineend,
-        var(--slds-g-sizing-4) * -1));
-        padding-block-start: var(--slds-c-accordionsection-spacing-blockstart, var(--slds-g-sizing-4));
-        padding-block-end: var(--slds-c-accordionsection-spacing-blockend, var(--slds-g-sizing-4));
-        padding-inline-end: var(--slds-c-accordionsection-spacing-inlineend, var(--slds-g-sizing-4));
-        padding-inline-start: var(--slds-c-accordionsection-spacing-inlinestart, var(--slds-g-sizing-4));
-        /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-        background-color: var(--slds-c-accordion-summary-color-background, transparent);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-accordion__summary-heading {
-        --slds-c-icon-color-foreground-default: var(--slds-c-accordion-heading-color, var(--slds-g-color-on-surface-3));
-
-        display: flex;
-        flex-grow: 1;
-        min-width: 0;
-        color: var(--slds-c-accordion-heading-color, var(--slds-g-color-on-surface-3));
-        font-size: var(--slds-c-accordion-heading-font-size, 1em);
-        line-height: var(--slds-c-accordion-heading-font-lineheight, var(--slds-g-font-lineheight-2));
-    }
-
-    :host([data-render-mode="shadow"]) .slds-accordion__summary-heading .slds-button:focus {
-        text-decoration: underline;
-        box-shadow: none;
-    }
-
-    /* Note:
+:host([data-render-mode="shadow"]) .slds-accordion__list-item {
+  border-top-width: var(--slds-c-accordionsection-sizing-border, var(--slds-g-sizing-border-1));
+  border-top-style: solid;
+  border-top-color: var(--slds-c-accordionsection-color-border, var(--slds-g-color-border-1));
+}
+
+:host([data-render-mode="shadow"]) [part='accordion-section'] {
+  padding-block-start: var(--slds-c-accordionsection-spacing-blockstart, var(--slds-g-spacing-3));
+  padding-block-end: var(--slds-c-accordionsection-spacing-blockend, var(--slds-g-spacing-3));
+  padding-inline-end: var(--slds-c-accordionsection-spacing-inlineend, var(--slds-g-spacing-3));
+  padding-inline-start: var(--slds-c-accordionsection-spacing-inlinestart, var(--slds-g-spacing-3));
+}
+
+:host([data-render-mode="shadow"]) .slds-accordion__summary {
+  display: flex;
+  margin-block-start: calc(var(--slds-c-accordionsection-spacing-blockstart, var(--slds-g-sizing-4)) * -1);
+  margin-block-end: calc(var(--slds-c-accordionsection-spacing-blockend, var(--slds-g-sizing-4)) * -1);
+  margin-inline-start: calc(var(--slds-c-accordionsection-spacing-inlinestart, var(--slds-g-sizing-4)) * -1);
+  margin-inline-end: calc(var(--slds-c-accordionsection-spacing-inlineend, var(--slds-g-sizing-4) * -1));
+  padding-block-start: var(--slds-c-accordionsection-spacing-blockstart, var(--slds-g-sizing-4));
+  padding-block-end: var(--slds-c-accordionsection-spacing-blockend, var(--slds-g-sizing-4));
+  padding-inline-end: var(--slds-c-accordionsection-spacing-inlineend, var(--slds-g-sizing-4));
+  padding-inline-start: var(--slds-c-accordionsection-spacing-inlinestart, var(--slds-g-sizing-4));
+  /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+  background-color: var(--slds-c-accordion-summary-color-background, transparent);
+}
+
+:host([data-render-mode="shadow"]) .slds-accordion__summary-heading {
+  --slds-c-icon-color-foreground-default: var(
+    --slds-c-accordion-heading-color,
+    var(--slds-g-color-on-surface-3)
+  );
+
+  display: flex;
+  flex-grow: 1;
+  min-width: 0;
+  color: var(--slds-c-accordion-heading-color, var(--slds-g-color-on-surface-3));
+  font-size: var(--slds-c-accordion-heading-font-size, 1em);
+  line-height: var(--slds-c-accordion-heading-font-lineheight, var(--slds-g-font-lineheight-2));
+}
+
+:host([data-render-mode="shadow"]) .slds-accordion__summary-heading .slds-button:focus {
+  text-decoration: underline;
+  box-shadow: none;
+}
+
+/* Note:
     Currently button is being hard coded so using
     [part="button"] to style button.
     However this should be changed to lightning-button::part(button) once hard coded button gets refactored to lightning-button */
 
-    :host([data-render-mode="shadow"]) [part="button"] {
-        display: inline-flex;
-        flex-grow: 1;
-        align-items: center;
-        justify-content: start;
-        min-width: 0;
-        margin-block-start: calc(
-          var(--slds-c-accordionsection-spacing-blockstart, var(--slds-g-sizing-4)) * -1);
-        margin-block-end: calc(
-        var(--slds-c-accordionsection-spacing-blockend,
-        var(--slds-g-sizing-4)) * -1);
-        margin-inline-end: calc(
-          var(--slds-c-accordionsection-spacing-inlineend,
-          var(--slds-g-sizing-4)) * -1);
-        margin-inline-start: calc(
-          var(--slds-c-accordionsection-spacing-inlinestart,
-          var(--slds-g-sizing-4)) * -1);
-        padding-block-start: var(--slds-c-accordionsection-spacing-blockstart, var(--slds-g-sizing-4));
-        padding-block-end: var(--slds-c-accordionsection-spacing-blockend, var(--slds-g-sizing-4));
-        padding-inline-end: var(--slds-c-accordionsection-spacing-inlineend, var(--slds-g-sizing-4));
-        padding-inline-start: var(--slds-c-accordionsection-spacing-inlinestart, var(--slds-g-sizing-4));
-    }
-
-    /* Note:
+:host([data-render-mode="shadow"]) [part='button'] {
+  display: inline-flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: start;
+  min-width: 0;
+  margin-block-start: calc(var(--slds-c-accordionsection-spacing-blockstart, var(--slds-g-sizing-4)) * -1);
+  margin-block-end: calc(var(--slds-c-accordionsection-spacing-blockend, var(--slds-g-sizing-4)) * -1);
+  margin-inline-end: calc(var(--slds-c-accordionsection-spacing-inlineend, var(--slds-g-sizing-4)) * -1);
+  margin-inline-start: calc(var(--slds-c-accordionsection-spacing-inlinestart, var(--slds-g-sizing-4)) * -1);
+  padding-block-start: var(--slds-c-accordionsection-spacing-blockstart, var(--slds-g-sizing-4));
+  padding-block-end: var(--slds-c-accordionsection-spacing-blockend, var(--slds-g-sizing-4));
+  padding-inline-end: var(--slds-c-accordionsection-spacing-inlineend, var(--slds-g-sizing-4));
+  padding-inline-start: var(--slds-c-accordionsection-spacing-inlinestart, var(--slds-g-sizing-4));
+}
+
+/* Note:
     Should be changed to lightning-button::part(button)
     if button can be refactored to slds-button
     */
 
-    :host([data-render-mode="shadow"]) [part="button"]:hover,:host([data-render-mode="shadow"]) 
-    [part="button"]:focus {
-        --slds-c-icon-color-foreground-default: var(--slds-c-accordion-heading-color-hover, var(--slds-g-color-brand-base-30));
+:host([data-render-mode="shadow"]) [part='button']:hover,:host([data-render-mode="shadow"]) 
+[part='button']:focus {
+  --slds-c-icon-color-foreground-default: var(
+    --slds-c-accordion-heading-color-hover,
+    var(--slds-g-color-brand-base-30)
+  );
 
-        color: var(--slds-c-accordion-heading-color-hover, var(--slds-g-color-brand-base-30));
-        /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-    }
+  color: var(--slds-c-accordion-heading-color-hover, var(--slds-g-color-brand-base-30));
+  /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+}
 
-    /* Note:
+/* Note:
     Media query will need to be worked out properly
     and be replaced with utility classes */
 
-    @media (width >= 64.0625em) {
-        :host([data-render-mode="shadow"]) .slds-accordion__summary-content {
-            max-width: 100%;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-    }
-
-    :host([data-render-mode="shadow"]) .slds-accordion__content {
-        overflow: hidden;
-        visibility: hidden;
-        opacity: 0;
-        height: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-is-open > .slds-accordion__summary {
-        margin-block-end: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-is-open > .slds-accordion__content {
-        overflow: visible;
-        visibility: visible;
-        opacity: 1;
-        height: auto;
-    }
+@media (width >= 64.0625em) {
+  :host([data-render-mode="shadow"]) .slds-accordion__summary-content {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+:host([data-render-mode="shadow"]) .slds-accordion__content {
+  overflow: hidden;
+  visibility: hidden;
+  opacity: 0;
+  height: 0;
+}
+
+:host([data-render-mode="shadow"]) .slds-is-open > .slds-accordion__summary {
+  margin-block-end: 0;
+}
+
+:host([data-render-mode="shadow"]) .slds-is-open > .slds-accordion__content {
+  overflow: visible;
+  visibility: visible;
+  opacity: 1;
+  height: auto;
+}

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

@@ -1,5 +1,3 @@
 @import 'lightning/sldsCommon';
 @import './button.slds.css';
 @import './accordion-section.slds.css';
-
-

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

@@ -8,7 +8,6 @@
    The code below will remove the border coming from the host and keep the border from shadow boundary.
    - Added '!important' as a last resort as user agent style sheet will always win over our own styles.
 */
-:host([data-render-mode="shadow"]) {
+:host([data-render-mode='shadow']) {
     border: none !important;
 }
-

package/src/lightning/accordionSection/button.slds.css

@@ -187,14 +187,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-icon-sizing: 0.875rem;
   --slds-c-icon-color-foreground: currentcolor;
 
-
   --sds-c-button-font-lineheight: var(
     --slds-c-button-neutral-font-lineheight,
     var(--slds-s-button-font-lineheight, 1.875rem)
   );
   --sds-c-button-spacing-inline: var(
     --slds-c-button-neutral-spacing-inline,
-    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4));
+    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4)) ;
   );
   --sds-c-button-spacing-block: var(--slds-c-button-neutral-spacing-block);
 
@@ -214,7 +213,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     * In all other variants, it is ok to use the previous state as a fallback value.
     */
 
-
   /* Border radius - shared */
   --sds-c-button-radius-border-startstart: var(
     --slds-c-button-radius-border-startstart,
@@ -257,7 +255,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --slds-c-button-neutral-color-background-hover,
     var(--slds-g-color-surface-container-2)
   );
-  --sds-c-button-color-background-focus: var(--slds-c-button-neutral-color-background-focus, var(--slds-g-color-surface-container-2));
+  --sds-c-button-color-background-focus: var(
+    --slds-c-button-neutral-color-background-focus,
+    var(--slds-g-color-surface-container-2)
+  );
   --sds-c-button-color-background-active: var(
     --slds-c-button-neutral-color-background-active,
     var(--slds-g-color-surface-container-2)
@@ -280,8 +281,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Text color */
   --sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--slds-g-color-accent-2));
-  --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-s-button-color-hover, var(--slds-g-color-accent-3)));
-  --sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus, var(--slds-g-color-accent-3));
+  --sds-c-button-text-color-hover: var(
+    --slds-c-button-neutral-text-color-hover,
+    var(--slds-s-button-color-hover, var(--slds-g-color-accent-3))
+  );
+  --sds-c-button-text-color-focus: var(
+    --slds-c-button-neutral-text-color-focus,
+    var(--slds-g-color-accent-3)
+  );
   --sds-c-button-text-color-active: var(
     --slds-c-button-neutral-text-color-active,
     var(--slds-g-color-accent-3)
@@ -293,17 +300,17 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 /* Overriding primitiveBaseButton */
 :host([data-render-mode="shadow"]) [part~='button']:disabled {
-   --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
-   --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
-   --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
+  --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
+  --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
+  --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
 
-   /** 
+  /** 
     * Needed to override 
     * `pointer-event: none` coming from sds
     * that prevent tooltip from showing
    */
-   pointer-events: auto;
-   cursor: default;
+  pointer-events: auto;
+  cursor: default;
 }
 /**
   * A note about fallbacks on the default variant:
@@ -414,9 +421,18 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-text-color-hover: var(--slds-g-color-error-1);
   --slds-c-button-neutral-text-color-focus: var(--slds-g-color-error-1);
   --slds-c-button-neutral-text-color-active: var(--slds-g-color-error-1);
-  --slds-c-button-neutral-color-border-hover: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
-  --slds-c-button-neutral-color-border-focus: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
-  --slds-c-button-neutral-color-border-active: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
+  --slds-c-button-neutral-color-border-hover: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
+  --slds-c-button-neutral-color-border-focus: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
+  --slds-c-button-neutral-color-border-active: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
 }
 :host([data-render-mode="shadow"][variant='brand']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='success']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='destructive']) [part~='button']:disabled {
   --sds-c-button-color-background: var(--slds-g-color-disabled-container-2);
@@ -436,7 +452,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 /**
   * text variant is for button-stateful
 */
-:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button']{
+:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button'] {
   --sds-c-button-spacing-inline: 0;
   --slds-c-button-neutral-text-color: var(--slds-g-color-accent-2);
   --slds-c-button-neutral-color-border: transparent;
@@ -483,7 +499,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 :host([data-render-mode="shadow"]) [part~='end'] {
   display: inline-flex;
   padding-inline-start: 0;
-
 }
 /**
  * A temporarily baked-in utility class until SLDS gets a proper utility package.

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';