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

package/src/lightning/baseComboboxItem/listbox.slds.css

@@ -1,176 +1,182 @@
 
-  /* Horizontal listbox - used for pill container */
-   :host([data-render-mode="shadow"]) .slds-listbox_horizontal {
-     display: inline-flex;
-     flex-wrap: wrap;
-     align-items: center;
-   }
-   :host([data-render-mode="shadow"]) .slds-listbox_horizontal li {
-    display: flex;
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox_horizontal li+li {
-     padding-inline-start: 0.125rem;
-   }
-   /* Vertical listbox */
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option:focus,:host([data-render-mode="shadow"]) 
-  .slds-listbox_vertical .slds-listbox__option:hover,:host([data-render-mode="shadow"]) 
-  .slds-listbox_vertical .slds-listbox__option.slds-has-focus {
-    text-decoration: none;
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option:hover {
-    background-color: var(--slds-c-listbox-option-color-background-hover, var(--slds-g-color-surface-container-2));
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option:focus,:host([data-render-mode="shadow"]) 
-  .slds-listbox_vertical .slds-listbox__option.slds-has-focus {
-    background-color: var(--slds-c-listbox-option-color-background-focus, var(--slds-g-color-surface-container-2));
-    box-shadow: var(--slds-g-shadow-inset-focus-1);
-    outline: 0;
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option[aria-disabled="true"],:host([data-render-mode="shadow"]) 
-  .slds-listbox_vertical .slds-listbox__option[role="presentation"]:hover,:host([data-render-mode="shadow"]) 
-  .slds-listbox_vertical .slds-listbox__option[aria-disabled="true"]:hover,:host([data-render-mode="shadow"]) 
-  .slds-listbox_vertical .slds-listbox__option[aria-disabled="true"]:focus {
-    background-color: var(--slds-c-listbox-option-color-background-disabled, transparent);
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option[aria-disabled="true"],:host([data-render-mode="shadow"]) 
-  .slds-listbox_vertical .slds-listbox__option[role="presentation"]:hover {
-    cursor: default;
-  }
-   /* Modifies the listbox option if it contains an entity object */
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_entity {
-    padding-block: var(--slds-g-spacing-1);
-    padding-inline: var(--slds-g-spacing-3);
-  }
-   /* Modifies the listbox option if it contains a plain object or string */
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_plain {
-    padding-block: var(--slds-g-spacing-2);
-    padding-inline: var(--slds-g-spacing-3);
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_term {
-    padding-block: var(--slds-g-spacing-2);
-    padding-inline: var(--slds-g-spacing-3);
-  }
-   /* Choosable option within listbox */
-   :host([data-render-mode="shadow"]) .slds-listbox__option {
-    color: var(--slds-c-listbox-option-color);
-    background-color: var(--slds-c-listbox-option-color-background);
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox__option:hover {
-    cursor: pointer;
-    color: var(--slds-c-listbox-option-color-hover);
-    background-color: var(--slds-c-listbox-option-color-background-hover);
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox__option:focus {
-    outline: 0;
-    color: var(--slds-c-listbox-option-color-focus);
-    background-color: var(--slds-c-listbox-option-color-background-focus);
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"],:host([data-render-mode="shadow"]) 
-  .slds-listbox__option[aria-disabled="true"]:hover,:host([data-render-mode="shadow"]) 
-  .slds-listbox__option[aria-disabled="true"]:focus {
-    color: var(--slds-c-listbox-option-color-disabled, var(--slds-g-color-disabled-2));
-    background-color: var(--slds-c-listbox-option-color-background-disabled);
-  }
-   /* ------------------------------- PULL OUT FOR COMBOBOX LISTBOX-OPTION ---------------------------------------------- */
-   /* the _vertical variations only apply to combobox's */
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_entity .slds-media__figure {
-    margin-inline-end: var(--slds-g-spacing-2);
-  }
-   /* If the listbox option has metadata or secondary information that sits below its primary text */
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_has-meta .slds-media__figure {
-    margin-block-start: var(--slds-g-spacing-1);
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox__option .slds-truncate {
-    display: inline-block;
-    vertical-align: middle;
-  }
-   /* Header for choosable option within listbox */
-   :host([data-render-mode="shadow"]) .slds-listbox__option-header {
-    font-size: var(--slds-g-font-scale-neg-1);
-    font-weight: 700;
-  }
-   /* Container for listbox option icon */
-   :host([data-render-mode="shadow"]) .slds-listbox__option-icon {
-    width: var(--slds-g-sizing-7);
-    display: inline-flex;
-    align-content: center;
-    align-items: center;
-    justify-content: center;
-    color: var(--slds-g-color-accent-2);
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-icon {
-     color: currentcolor;
-   }
-   /* The icon within a plain listbox that indicates if an option has been selected or not. */
-   :host([data-render-mode="shadow"]) .slds-listbox__icon-selected {
-    opacity: 0;
-    fill: var(--slds-g-color-accent-2);
-  }
-   /* Modifier that makes selected icon visible */
-   :host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__icon-selected {
-    opacity: 1;
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__option-icon {
-    color: var(--slds-g-color-accent-2);
-  }
-   /* The main text of an entity listbox */
-   :host([data-render-mode="shadow"]) .slds-listbox__option-text_entity {
-     max-width: 100%;
-     overflow: hidden;
-     text-overflow: ellipsis;
-     white-space: nowrap;
-     display: block;
-     margin-block-end: 0.125rem;
-   }
-   /* The metadata or secondary text of an entity listbox */
-   :host([data-render-mode="shadow"]) .slds-listbox__option-meta {
-    display: block;
-    margin-block-start: calc(var(--slds-g-spacing-1) * -1);
-    color: var(--slds-c-listbox-option-meta-color, var(--slds-g-color-neutral-base-30));
-  }
-   :host([data-render-mode="shadow"]:hover) .slds-listbox__option-meta {
-    color: var(--slds-c-listbox-option-meta-color-hover);
-  }
-   :host([data-render-mode="shadow"]:focus) .slds-listbox__option-meta,:host([data-render-mode="shadow"].slds-has-focus) .slds-listbox__option-meta {
-    color: var(--slds-c-listbox-option-meta-color-focus);
-  }
-   :host([data-render-mode="shadow"][aria-disabled="true"]) .slds-listbox__option-meta,:host([data-render-mode="shadow"]) 
-  .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-meta {
-    color: var(--slds-c-listbox-option-meta-color-disabled, currentColor);
-   }
-   /* -------------------- END LISTBOX OPTION CSS --------------------------------------------- */
-   /* ---------------------PULL OUT FOR PILL CONTAINER ---------------------------------------- */
-   /* The container of pill selections found inside of a combobox group */
-   /* .slds-listbox_selection-group items need to be moved out to pill/pill container */
-   :host([data-render-mode="shadow"]) .slds-listbox_selection-group {
-     position: relative;
-     padding: 0;
-     padding-inline-end: calc(var(--slds-g-spacing-8) + var(--slds-g-spacing-3));
-     height: 1.875rem;
-     overflow: hidden;
-   }
-   /* Expanded state of a selection group */
-   :host([data-render-mode="shadow"]) .slds-listbox_selection-group.slds-is-expanded {
-    height: auto;
-    padding: 0;
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox {
-     padding-block-start: 0;
-     padding-block-end: 0.125rem;
-     padding-inline: 0;
-   }
-   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-item {
-     padding-block-start: 0.125rem;
-     padding-block-end: 0;
-     padding-inline: 0.125rem;
-   }
-   /* Toggle button to show all of the pill selections */
-   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    right: var(--slds-g-spacing-2);
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle .slds-button {
-    line-height: 1;
-  }
+/* Horizontal listbox - used for pill container */
+:host([data-render-mode="shadow"]) .slds-listbox_horizontal {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+:host([data-render-mode="shadow"]) .slds-listbox_horizontal li {
+  display: flex;
+}
+:host([data-render-mode="shadow"]) .slds-listbox_horizontal li + li {
+  padding-inline-start: 0.125rem;
+}
+/* Vertical listbox */
+:host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option:focus,:host([data-render-mode="shadow"]) 
+.slds-listbox_vertical .slds-listbox__option:hover,:host([data-render-mode="shadow"]) 
+.slds-listbox_vertical .slds-listbox__option.slds-has-focus {
+  text-decoration: none;
+}
+:host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option:hover {
+  background-color: var(
+    --slds-c-listbox-option-color-background-hover,
+    var(--slds-g-color-surface-container-2)
+  );
+}
+:host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option:focus,:host([data-render-mode="shadow"]) 
+.slds-listbox_vertical .slds-listbox__option.slds-has-focus {
+  background-color: var(
+    --slds-c-listbox-option-color-background-focus,
+    var(--slds-g-color-surface-container-2)
+  );
+  box-shadow: var(--slds-g-shadow-inset-focus-1);
+  outline: 0;
+}
+:host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option[aria-disabled='true'],:host([data-render-mode="shadow"]) 
+.slds-listbox_vertical .slds-listbox__option[role='presentation']:hover,:host([data-render-mode="shadow"]) 
+.slds-listbox_vertical .slds-listbox__option[aria-disabled='true']:hover,:host([data-render-mode="shadow"]) 
+.slds-listbox_vertical .slds-listbox__option[aria-disabled='true']:focus {
+  background-color: var(--slds-c-listbox-option-color-background-disabled, transparent);
+}
+:host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option[aria-disabled='true'],:host([data-render-mode="shadow"]) 
+.slds-listbox_vertical .slds-listbox__option[role='presentation']:hover {
+  cursor: default;
+}
+/* Modifies the listbox option if it contains an entity object */
+:host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_entity {
+  padding-block: var(--slds-g-spacing-1);
+  padding-inline: var(--slds-g-spacing-3);
+}
+/* Modifies the listbox option if it contains a plain object or string */
+:host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_plain {
+  padding-block: var(--slds-g-spacing-2);
+  padding-inline: var(--slds-g-spacing-3);
+}
+:host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_term {
+  padding-block: var(--slds-g-spacing-2);
+  padding-inline: var(--slds-g-spacing-3);
+}
+/* Choosable option within listbox */
+:host([data-render-mode="shadow"]) .slds-listbox__option {
+  color: var(--slds-c-listbox-option-color);
+  background-color: var(--slds-c-listbox-option-color-background);
+}
+:host([data-render-mode="shadow"]) .slds-listbox__option:hover {
+  cursor: pointer;
+  color: var(--slds-c-listbox-option-color-hover);
+  background-color: var(--slds-c-listbox-option-color-background-hover);
+}
+:host([data-render-mode="shadow"]) .slds-listbox__option:focus {
+  outline: 0;
+  color: var(--slds-c-listbox-option-color-focus);
+  background-color: var(--slds-c-listbox-option-color-background-focus);
+}
+:host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled='true'],:host([data-render-mode="shadow"]) 
+.slds-listbox__option[aria-disabled='true']:hover,:host([data-render-mode="shadow"]) 
+.slds-listbox__option[aria-disabled='true']:focus {
+  color: var(--slds-c-listbox-option-color-disabled, var(--slds-g-color-disabled-2));
+  background-color: var(--slds-c-listbox-option-color-background-disabled);
+}
+/* ------------------------------- PULL OUT FOR COMBOBOX LISTBOX-OPTION ---------------------------------------------- */
+/* the _vertical variations only apply to combobox's */
+:host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_entity .slds-media__figure {
+  margin-inline-end: var(--slds-g-spacing-2);
+}
+/* If the listbox option has metadata or secondary information that sits below its primary text */
+:host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_has-meta .slds-media__figure {
+  margin-block-start: var(--slds-g-spacing-1);
+}
+:host([data-render-mode="shadow"]) .slds-listbox__option .slds-truncate {
+  display: inline-block;
+  vertical-align: middle;
+}
+/* Header for choosable option within listbox */
+:host([data-render-mode="shadow"]) .slds-listbox__option-header {
+  font-size: var(--slds-g-font-scale-neg-1);
+  font-weight: 700;
+}
+/* Container for listbox option icon */
+:host([data-render-mode="shadow"]) .slds-listbox__option-icon {
+  width: var(--slds-g-sizing-7);
+  display: inline-flex;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  color: var(--slds-g-color-accent-2);
+}
+:host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled='true'] .slds-listbox__option-icon {
+  color: currentcolor;
+}
+/* The icon within a plain listbox that indicates if an option has been selected or not. */
+:host([data-render-mode="shadow"]) .slds-listbox__icon-selected {
+  opacity: 0;
+  fill: var(--slds-g-color-accent-2);
+}
+/* Modifier that makes selected icon visible */
+:host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__icon-selected {
+  opacity: 1;
+}
+:host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__option-icon {
+  color: var(--slds-g-color-accent-2);
+}
+/* The main text of an entity listbox */
+:host([data-render-mode="shadow"]) .slds-listbox__option-text_entity {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  margin-block-end: 0.125rem;
+}
+/* The metadata or secondary text of an entity listbox */
+:host([data-render-mode="shadow"]) .slds-listbox__option-meta {
+  display: block;
+  margin-block-start: calc(var(--slds-g-spacing-1) * -1);
+  color: var(--slds-c-listbox-option-meta-color, var(--slds-g-color-neutral-base-30));
+}
+:host([data-render-mode="shadow"]:hover) .slds-listbox__option-meta {
+  color: var(--slds-c-listbox-option-meta-color-hover);
+}
+:host([data-render-mode="shadow"]:focus) .slds-listbox__option-meta,:host([data-render-mode="shadow"].slds-has-focus) .slds-listbox__option-meta {
+  color: var(--slds-c-listbox-option-meta-color-focus);
+}
+:host([data-render-mode="shadow"][aria-disabled='true']) .slds-listbox__option-meta,:host([data-render-mode="shadow"]) 
+.slds-listbox__option[aria-disabled='true'] .slds-listbox__option-meta {
+  color: var(--slds-c-listbox-option-meta-color-disabled, currentColor);
+}
+/* -------------------- END LISTBOX OPTION CSS --------------------------------------------- */
+/* ---------------------PULL OUT FOR PILL CONTAINER ---------------------------------------- */
+/* The container of pill selections found inside of a combobox group */
+/* .slds-listbox_selection-group items need to be moved out to pill/pill container */
+:host([data-render-mode="shadow"]) .slds-listbox_selection-group {
+  position: relative;
+  padding: 0;
+  padding-inline-end: calc(var(--slds-g-spacing-8) + var(--slds-g-spacing-3));
+  height: 1.875rem;
+  overflow: hidden;
+}
+/* Expanded state of a selection group */
+:host([data-render-mode="shadow"]) .slds-listbox_selection-group.slds-is-expanded {
+  height: auto;
+  padding: 0;
+}
+:host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox {
+  padding-block-start: 0;
+  padding-block-end: 0.125rem;
+  padding-inline: 0;
+}
+:host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-item {
+  padding-block-start: 0.125rem;
+  padding-block-end: 0;
+  padding-inline: 0.125rem;
+}
+/* Toggle button to show all of the pill selections */
+:host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: var(--slds-g-spacing-2);
+}
+:host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle .slds-button {
+  line-height: 1;
+}

package/src/lightning/breadcrumb/__docs__/breadcrumb.md

@@ -23,7 +23,7 @@ Here is an example.
 
 #### Creating Links Using Breadcrumbs
 
-The behavior of a breadcrumb is similar to a link for the purpose of navigation. If a link is not provided via the `href` attribute, the value defaults to `#`. Since a breadcrumb is used as navigation, we don't recommend leaving out the `href` attribute since `#` links to the same page when middle-clicked or opened in a new tab. 
+The behavior of a breadcrumb is similar to a link for the purpose of navigation. If a link is not provided via the `href` attribute, the value defaults to `#`. Since a breadcrumb is used as navigation, we don't recommend leaving out the `href` attribute since `#` links to the same page when middle-clicked or opened in a new tab.
 
 To provide custom navigation, use an `onclick` handler with `lightning-navigation`. If you provide a link in the `href` attribute, calling `event.preventDefault()` enables you to bypass the link and use your custom navigation instead.
 
@@ -66,7 +66,7 @@ handleNavigateToCustomPage2(event) {
 #### Generating Breadcrumbs with Iteration
 
 Iterate over a list of items using `for:each` to generate breadcrumbs. If you don't provide a link with an `onclick` handler, `href` defaults to `#`.
- 
+
 For example, you can create an array of breadcrumbs with label and name
 values.
 

package/src/lightning/breadcrumb/breadcrumb.slds.css

@@ -1,16 +1,15 @@
 
+:host([data-render-mode="shadow"]) [part='breadcrumb'] {
+  display: block;
+  padding-block-start: 0;
+  padding-inline-end: var(--slds-c-breadcrumb-spacing-inlineend, var(--slds-g-spacing-2));
+  padding-block-end: 0;
+  padding-inline-start: var(--slds-c-breadcrumb-spacing-inlinestart, var(--slds-g-spacing-2));
+  color: var(--slds-g-color-brand-base-50, var(--slds-g-color-accent-2));
+}
 
-  :host([data-render-mode="shadow"]) [part='breadcrumb'] {
-    display: block;
-    padding-block-start: 0;
-    padding-inline-end: var(--slds-c-breadcrumb-spacing-inlineend, var(--slds-g-spacing-2));
-    padding-block-end: 0;
-    padding-inline-start: var(--slds-c-breadcrumb-spacing-inlinestart, var(--slds-g-spacing-2));
-    color: var(--slds-g-color-brand-base-50, var(--slds-g-color-accent-2));
-  }
-
-  :host([data-render-mode="shadow"]) [part='breadcrumb']:hover,:host([data-render-mode="shadow"]) 
-  [part='breadcrumb']:focus {
-    text-decoration: none;
-    color: var(--slds-g-color-brand-base-30, var(--slds-g-color-accent-4));
-  }
+:host([data-render-mode="shadow"]) [part='breadcrumb']:hover,:host([data-render-mode="shadow"]) 
+[part='breadcrumb']:focus {
+  text-decoration: none;
+  color: var(--slds-g-color-brand-base-30, var(--slds-g-color-accent-4));
+}

package/src/lightning/breadcrumbs/__docs__/breadcrumbs.md

@@ -39,7 +39,7 @@ This example adds a margin around the breadcrumbs using an SLDS class.
 </lightning-breadcrumbs>
 ```
 
-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 [Breadcrumbs: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/breadcrumbs/#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 [Breadcrumbs: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/breadcrumbs/#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/breadcrumbs/breadcrumbs.css

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

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

@@ -1,2 +1,2 @@
 @import 'lightning/sldsCommon';
-@import './breadcrumbs.slds.css';
+@import './breadcrumbs.slds.css';

package/src/lightning/breadcrumbs/breadcrumbs.slds.css

@@ -1,40 +1,39 @@
 
-
-  :host([data-render-mode="shadow"]) [part='breadcrumbs'] {
-    /**
+:host([data-render-mode="shadow"]) [part='breadcrumbs'] {
+  /**
      * Reassignments for parity with SLDS blueprint
      * https://www.lightningdesignsystem.com/components/breadcrumbs/#Styling-Hooks-Overview
      */
-     /* stylelint-disable */
-     --slds-c-breadcrumb-spacing-inlinestart: var(--slds-c-breadcrumbs-spacing-inline-start);
-     --slds-c-breadcrumb-spacing-inlineend: var(--slds-c-breadcrumbs-spacing-inline-end);
-     /* stylelint-enable */
+  /* stylelint-disable */
+  --slds-c-breadcrumb-spacing-inlinestart: var(--slds-c-breadcrumbs-spacing-inline-start);
+  --slds-c-breadcrumb-spacing-inlineend: var(--slds-c-breadcrumbs-spacing-inline-end);
+  /* stylelint-enable */
 
-    flex-wrap: wrap;
-    align-items: flex-start;
-    display: flex;
-  }
+  flex-wrap: wrap;
+  align-items: flex-start;
+  display: flex;
+}
 
-  :host([data-render-mode="shadow"]) [part='breadcrumbs'] ::slotted(*) {
-    position: relative;
-  }
+:host([data-render-mode="shadow"]) [part='breadcrumbs'] ::slotted(*) {
+  position: relative;
+}
 
-  /* Positions a '>' separator before breadcrumb */
+/* Positions a '>' separator before breadcrumb */
 
-  :host([data-render-mode="shadow"]) [part='breadcrumbs'] ::slotted(:not(:first-child))::before {
-    content: '\003E';
-    position: absolute;
-    left: calc((var(--slds-g-spacing-2) * 0.5) * -1);
-  }
+:host([data-render-mode="shadow"]) [part='breadcrumbs'] ::slotted(:not(:first-child))::before {
+  content: '\003E';
+  position: absolute;
+  left: calc((var(--slds-g-spacing-2) * 0.5) * -1);
+}
 
-  /* Don't include '>' separator before first breadcrumb */
+/* Don't include '>' separator before first breadcrumb */
 
-  :host([data-render-mode="shadow"]) [part='breadcrumbs'] ::slotted(:first-child)::before {
-    content: '';
-  }
+:host([data-render-mode="shadow"]) [part='breadcrumbs'] ::slotted(:first-child)::before {
+  content: '';
+}
 
-  /* Don't include spacing before first breadcrumb */
+/* Don't include spacing before first breadcrumb */
 
-  :host([data-render-mode="shadow"]) [part='breadcrumbs'] ::slotted(:first-child) {
-    --slds-c-breadcrumb-spacing-inlinestart: 0;
-  }
+:host([data-render-mode="shadow"]) [part='breadcrumbs'] ::slotted(:first-child) {
+  --slds-c-breadcrumb-spacing-inlinestart: 0;
+}

package/src/lightning/button/__docs__/button.md

@@ -23,10 +23,10 @@ examples:
 A `lightning-button` component represents a button element that executes an
 action. Use `lightning-button` where users need to:
 
--   Submit or reset a form
--   Begin a new task
--   Trigger a new UI element to appear on the page
--   Specify a new or next step in a process
+- Submit or reset a form
+- Begin a new task
+- Trigger a new UI element to appear on the page
+- Specify a new or next step in a process
 
 Use the `type` attribute to specify `button`, `submit`, or `reset`. The default type is `button` and doesn't need to be specified.
 
@@ -95,14 +95,14 @@ Visit [https://lightningdesignsystem.com/icons/#utility](https://lightningdesign
 
 Use the `variant` attribute with one of these values to apply styling and animation.
 
--   `base` is a button without a border, which gives it the look of a plain text link.
--   `neutral` is the default variant, a plain uncolored button.
--   `brand` is a blue button, used to draw attention to the primary action on a page.
--   `brand-outline` is similar to `brand` but the color is used for the label and border only, not the button color.
--   `destructive` is a red button used to warn users that its action has a negative effect.
--   `destructive-text` is similar to `destructive` but only the label and border are red.
--   `inverse` uses the background color and light text, useful for dark backgrounds.
--   `success` is a green button used to indicate a successful action.
+- `base` is a button without a border, which gives it the look of a plain text link.
+- `neutral` is the default variant, a plain uncolored button.
+- `brand` is a blue button, used to draw attention to the primary action on a page.
+- `brand-outline` is similar to `brand` but the color is used for the label and border only, not the button color.
+- `destructive` is a red button used to warn users that its action has a negative effect.
+- `destructive-text` is similar to `destructive` but only the label and border are red.
+- `inverse` uses the background color and light text, useful for dark backgrounds.
+- `success` is a green button used to indicate a successful action.
 
 ##### Animation
 
@@ -158,12 +158,12 @@ You can also use the `stretch` attribute to expand the button to the full availa
 </div>
 ```
 
-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. 
+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 [Buttons: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/buttons/#Styling-Hooks-Overview) for documentation on component-specific hooks for this component. Custom properties for buttons work only with particular `lightning-button` variants.
 
-| CSS Custom Property                 | `lightning-button` Variants                      |
-| ----------------------------------- | ------------------------------------------------ |
+| CSS Custom Property                  | `lightning-button` Variants                      |
+| ------------------------------------ | ------------------------------------------------ |
 | `--slds-c-button-*`                  | all                                              |
 | `--slds-c-button-color-*`            | `base`                                           |
 | `--slds-c-button-text-color-*`       | `neutral` (default), `base`, and `brand-outline` |
@@ -247,6 +247,6 @@ Use the following accessibility and `aria` attributes on `lightning-button`.
 | aria-label       | string            | Provides an assistive label where a visible label cannot be used.                                                                                                                                                                                                                                                                                    |
 | aria-labelledby  | ID reference list | Specifies the ID or list of IDs of the element or elements that contain visible descriptive text to describe the button.                                                                                                                                                                                                                             |
 | aria-live        | token             | Indicates the button can dynamically update without a page reload, and specifies how the change is announced by assistive technologies. Possible values include `off`, `polite`, and `assertive`. The default is `off`. For the screen reader to announce changes when the user is idle, use `polite`. For immediate notifications, use `assertive`. |
-| tabindex         | integer           | Specifies whether the button is focusable during tab navigation. Set tab index to -1 to prevent focus on the button during tab navigation. The default value is 0, which makes the button focusable during tab navigation. For more information see [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex).                      |
+| tabindex         | integer           | Specifies whether the button is focusable during tab navigation. Set tab index to -1 to prevent focus on the button during tab navigation. The default value is 0, which makes the button focusable during tab navigation. For more information see [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex).        |
 
 For more information, see the [WAI-ARIA Specification](https://www.w3.org/TR/wai-aria/).

package/src/lightning/button/__examples__/accesskey/accesskey.css

@@ -2,11 +2,13 @@ kbd {
     background-color: #eee;
     border-radius: 3px;
     border: 1px solid #b4b4b4;
-    box-shadow: 0 1px 1px rgb(0 0 0 / 20%), 0 2px 0 0 rgb(255 255 255 / 70%) inset;
+    box-shadow:
+        0 1px 1px rgb(0 0 0 / 20%),
+        0 2px 0 0 rgb(255 255 255 / 70%) inset;
     color: #333;
     display: inline-block;
-    font-family: consolas,"Liberation Mono",courier,monospace;
-    font-size: .85em;
+    font-family: consolas, 'Liberation Mono', courier, monospace;
+    font-size: 0.85em;
     font-weight: 700;
     line-height: 1;
     padding: 2px 4px;

package/src/lightning/button/__examples__/inverse/inverse.css

@@ -5,7 +5,7 @@
 .slds-m-left_x-small {
     margin-left: 0.5rem;
 }
-  
+
 .slds-p-around_medium {
-   padding: 1rem;
+    padding: 1rem;
 }