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

package/src/lightning/pill/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/pill/link.css

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

package/src/lightning/pill/pill.slds.css

@@ -1,155 +1,156 @@
 
-    /* re-assign current slds hooks using deprecated naming conventions */
-    :host([data-render-mode="shadow"]) {
-      /* stylelint-disable */
-      --slds-c-pill-spacing-blockend: var(--slds-c-pill-spacing-block-end);
-      --slds-c-pill-spacing-blockstart: var(--slds-c-pill-spacing-block-start);
-      --slds-c-pill-spacing-inlineend: var(--slds-c-pill-spacing-inline-end);
-      --slds-c-pill-spacing-inlinestart: var(--slds-c-pill-spacing-inline-start);
-      /* stylelint-enable */
-    }
-    :host([data-render-mode="shadow"]) .slds-pill {
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-    line-height: var(--slds-g-font-lineheight-4);
-    max-width: 100%;
-    padding-block-start: var(--slds-c-pill-spacing-blockstart, calc(var(--slds-g-spacing-1) / 2));
-    padding-inline-end: var(--slds-c-pill-spacing-inlineend, calc(var(--slds-g-spacing-1) / 2));
-    padding-block-end: var(--slds-c-pill-spacing-blockend, calc(var(--slds-g-spacing-1) / 2));
-    padding-inline-start: var(--slds-c-pill-spacing-inlinestart, calc(var(--slds-g-spacing-1) / 2));
-    border-width: var(--slds-c-pill-sizing-border, var(--slds-g-sizing-border-1));
-    border-style: solid;
-    border-color: var(--slds-c-pill-color-border, var(--slds-g-color-border-2));
-    border-radius: var(--slds-c-pill-radius-border, var(--slds-g-spacing-1));
-    background-color: var(--slds-c-pill-color-background, var(--slds-g-color-surface-container-1));
-    box-shadow: var(--slds-c-pill-shadow);
-    position: relative;
-    min-height: calc(var(--slds-g-sizing-7) + var(--slds-g-sizing-1));
-  }
-    :host([data-render-mode="shadow"]) .slds-pill + .slds-pill {
-    margin-inline-start: calc(var(--slds-g-spacing-1) / 2);
-  }
-    :host([data-render-mode="shadow"]) .slds-pill:hover {
-    --slds-c-pill-color-background: var(--slds-g-color-surface-container-2);
-  }
-    :host([data-render-mode="shadow"]) .slds-pill:focus {
-    outline: 0;
-    --slds-c-pill-color-border: var(--slds-g-color-border-accent-3);
-    --slds-c-pill-shadow: 0 0 3px var(--slds-g-color-border-accent-3);
-  }
-    :host([data-render-mode="shadow"]) a {
-    text-decoration: none;
-    color: var(--slds-g-color-accent-2);
-  }
-    :host([data-render-mode="shadow"]) a:hover,:host([data-render-mode="shadow"])  a:focus{
-    text-decoration: none;
-    color:var(--slds-g-color-accent-4);
-  }
-    :host([data-render-mode="shadow"]) a:active{
-    color:var(--slds-g-color-accent-4);
-  }
-    :host([data-render-mode="shadow"]) .slds-truncate {
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-    :host([data-render-mode="shadow"]) .slds-pill_bare {
-    --slds-c-pill-color-background: transparent;
-    --slds-c-pill-sizing-border: 0;
-  }
-    :host([data-render-mode="shadow"]) .slds-pill_bare:hover {
-    --slds-c-pill-color-background-: transparent;
-  }
-    :host([data-render-mode="shadow"]) .slds-pill__label {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-    :host([data-render-mode="shadow"]) .slds-pill__label:focus {
-    outline: 0;
-    border-radius: var(--slds-g-radius-border-2);
-    box-shadow: var(--slds-c-pill-label-shadow-focus, 0 0 3px var(--slds-g-color-border-accent-3));
-  }
-    :host([data-render-mode="shadow"]) .slds-pill__icon,:host([data-render-mode="shadow"]) 
-  .slds-pill__icon_container {
-    width: var(--slds-g-sizing-6);
-    height: var(--slds-g-sizing-6);
-    margin-inline-end: var(--slds-g-spacing-1);
-  }
-    :host([data-render-mode="shadow"]) .slds-pill ::slotted(*) {
-    --slds-c-avatar-sizing: var(--slds-g-sizing-6);
-    --slds-c-icon-sizing: var(--slds-g-sizing-6);
+/* re-assign current slds hooks using deprecated naming conventions */
+:host([data-render-mode="shadow"]) {
+  /* stylelint-disable */
+  --slds-c-pill-spacing-blockend: var(--slds-c-pill-spacing-block-end);
+  --slds-c-pill-spacing-blockstart: var(--slds-c-pill-spacing-block-start);
+  --slds-c-pill-spacing-inlineend: var(--slds-c-pill-spacing-inline-end);
+  --slds-c-pill-spacing-inlinestart: var(--slds-c-pill-spacing-inline-start);
+  /* stylelint-enable */
+}
+:host([data-render-mode="shadow"]) .slds-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  line-height: var(--slds-g-font-lineheight-4);
+  max-width: 100%;
+  padding-block-start: var(--slds-c-pill-spacing-blockstart, calc(var(--slds-g-spacing-1) / 2));
+  padding-inline-end: var(--slds-c-pill-spacing-inlineend, calc(var(--slds-g-spacing-1) / 2));
+  padding-block-end: var(--slds-c-pill-spacing-blockend, calc(var(--slds-g-spacing-1) / 2));
+  padding-inline-start: var(--slds-c-pill-spacing-inlinestart, calc(var(--slds-g-spacing-1) / 2));
+  border-width: var(--slds-c-pill-sizing-border, var(--slds-g-sizing-border-1));
+  border-style: solid;
+  border-color: var(--slds-c-pill-color-border, var(--slds-g-color-border-2));
+  border-radius: var(--slds-c-pill-radius-border, var(--slds-g-spacing-1));
+  background-color: var(--slds-c-pill-color-background, var(--slds-g-color-surface-container-1));
+  box-shadow: var(--slds-c-pill-shadow);
+  position: relative;
+  min-height: calc(var(--slds-g-sizing-7) + var(--slds-g-sizing-1));
+}
+:host([data-render-mode="shadow"]) .slds-pill + .slds-pill {
+  margin-inline-start: calc(var(--slds-g-spacing-1) / 2);
+}
+:host([data-render-mode="shadow"]) .slds-pill:hover {
+  --slds-c-pill-color-background: var(--slds-g-color-surface-container-2);
+}
+:host([data-render-mode="shadow"]) .slds-pill:focus {
+  outline: 0;
+  --slds-c-pill-color-border: var(--slds-g-color-border-accent-3);
+  --slds-c-pill-shadow: 0 0 3px var(--slds-g-color-border-accent-3);
+}
+:host([data-render-mode="shadow"]) a {
+  text-decoration: none;
+  color: var(--slds-g-color-accent-2);
+}
+:host([data-render-mode="shadow"]) a:hover,:host([data-render-mode="shadow"]) 
+a:focus {
+  text-decoration: none;
+  color: var(--slds-g-color-accent-4);
+}
+:host([data-render-mode="shadow"]) a:active {
+  color: var(--slds-g-color-accent-4);
+}
+:host([data-render-mode="shadow"]) .slds-truncate {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:host([data-render-mode="shadow"]) .slds-pill_bare {
+  --slds-c-pill-color-background: transparent;
+  --slds-c-pill-sizing-border: 0;
+}
+:host([data-render-mode="shadow"]) .slds-pill_bare:hover {
+  --slds-c-pill-color-background-: transparent;
+}
+:host([data-render-mode="shadow"]) .slds-pill__label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+:host([data-render-mode="shadow"]) .slds-pill__label:focus {
+  outline: 0;
+  border-radius: var(--slds-g-radius-border-2);
+  box-shadow: var(--slds-c-pill-label-shadow-focus, 0 0 3px var(--slds-g-color-border-accent-3));
+}
+:host([data-render-mode="shadow"]) .slds-pill__icon,:host([data-render-mode="shadow"]) 
+.slds-pill__icon_container {
+  width: var(--slds-g-sizing-6);
+  height: var(--slds-g-sizing-6);
+  margin-inline-end: var(--slds-g-spacing-1);
+}
+:host([data-render-mode="shadow"]) .slds-pill ::slotted(*) {
+  --slds-c-avatar-sizing: var(--slds-g-sizing-6);
+  --slds-c-icon-sizing: var(--slds-g-sizing-6);
 
-    color: var(--slds-c-pill-text-color, var(--slds-g-color-neutral-base-100));
-    display: block;
-    font-size: var(--slds-g-font-scale-neg-4);
-  }
-    :host([data-render-mode="shadow"]) .slds-pill__icon ~ .slds-pill__action,:host([data-render-mode="shadow"]) 
-  .slds-pill__icon_container ~ .slds-pill__action {
-    padding-inline-start: calc(var(--slds-g-spacing-5) + 2px);
-  }
-    :host([data-render-mode="shadow"]) .slds-pill__remove {
-    width: var(--slds-g-sizing-5);
-    height: var(--slds-g-sizing-5);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin-inline-start: var(--slds-g-sizing-2);
-    border-radius: calc(var(--slds-g-spacing-1) / 2);
-  }
-    :host([data-render-mode="shadow"]) .slds-pill__remove svg {
-    width: calc(var(--slds-g-sizing-1) * 3);
-    height: calc(var(--slds-g-sizing-1) * 3);
-  }
-    :host([data-render-mode="shadow"]) .slds-pill_link {
-    border: 0;
-    padding: 0;
-  }
-    :host([data-render-mode="shadow"]) .slds-pill_link .slds-pill__icon_container {
-    display: inline-block;
-    position: absolute;
-    top: 50%;
-    left: calc(var(--slds-g-spacing-1) / 2);
-    transform: translateY(-50%);
-  }
-    :host([data-render-mode="shadow"]) .slds-pill_link .slds-pill__remove {
-    position: absolute;
-    top: 50%;
-    right: calc(var(--slds-g-spacing-1) / 2);
-    transform: translateY(-50%);
-  }
-    :host([data-render-mode="shadow"]) .slds-pill__action {
-    padding-block-start: var(--slds-c-pill-spacing-blockstart, calc(var(--slds-g-spacing-1) / 2));
-    padding-inline-end: var(--slds-c-pill-spacing-inlineend, calc((var(--slds-g-spacing-2) / 2) + 1rem));
-    padding-block-end: var(--slds-c-pill-spacing-blockend, calc(var(--slds-g-spacing-1) / 2));
-    padding-inline-start: var(--slds-c-pill-spacing-inlinestart, calc(var(--slds-g-spacing-1) / 2));
-    border-width: var(--slds-c-pill-sizing-border, 1px);
-    border-style: solid;
-    border-color: var(--slds-c-pill-color-border, var(--slds-g-color-border-2));
-    border-radius: var(--slds-c-pill-radius-border, var(--slds-g-radius-border-2));
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex-grow: 1;
-  }
-    :host([data-render-mode="shadow"]) .slds-pill__action:focus {
-    outline: 0;
-    border-color: var(--slds-c-pill-action-color-border, var(--slds-g-color-border-accent-3));
-    box-shadow: var(--slds-c-pill-action-shadow, 0 0 3px var(--slds-g-color-border-accent-2));
-  }
-    :host([data-render-mode="shadow"]) .slds-has-error {
-    border-color: var(--slds-c-pill-error-color-border, var(--slds-g-color-border-error-1));
-  }
-    :host([data-render-mode="shadow"]) .slds-has-error:active {
-    border-color: var(--slds-c-pill-error-color-border-active, var(--slds-g-color-border-error-1));
-  }
-    :host([data-render-mode="shadow"]) .slds-has-error .slds-pill__label {
-    font-weight: var(--slds-g-font-weight-7);
-    color: var(--slds-g-color-error-1);
-  }
-    :host([data-render-mode="shadow"]) .slds-pill__action:hover {
-    text-decoration: underline;
-    color: var(--slds-g-color-accent-4);
-  }
+  color: var(--slds-c-pill-text-color, var(--slds-g-color-neutral-base-100));
+  display: block;
+  font-size: var(--slds-g-font-scale-neg-4);
+}
+:host([data-render-mode="shadow"]) .slds-pill__icon ~ .slds-pill__action,:host([data-render-mode="shadow"]) 
+.slds-pill__icon_container ~ .slds-pill__action {
+  padding-inline-start: calc(var(--slds-g-spacing-5) + 2px);
+}
+:host([data-render-mode="shadow"]) .slds-pill__remove {
+  width: var(--slds-g-sizing-5);
+  height: var(--slds-g-sizing-5);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-inline-start: var(--slds-g-sizing-2);
+  border-radius: calc(var(--slds-g-spacing-1) / 2);
+}
+:host([data-render-mode="shadow"]) .slds-pill__remove svg {
+  width: calc(var(--slds-g-sizing-1) * 3);
+  height: calc(var(--slds-g-sizing-1) * 3);
+}
+:host([data-render-mode="shadow"]) .slds-pill_link {
+  border: 0;
+  padding: 0;
+}
+:host([data-render-mode="shadow"]) .slds-pill_link .slds-pill__icon_container {
+  display: inline-block;
+  position: absolute;
+  top: 50%;
+  left: calc(var(--slds-g-spacing-1) / 2);
+  transform: translateY(-50%);
+}
+:host([data-render-mode="shadow"]) .slds-pill_link .slds-pill__remove {
+  position: absolute;
+  top: 50%;
+  right: calc(var(--slds-g-spacing-1) / 2);
+  transform: translateY(-50%);
+}
+:host([data-render-mode="shadow"]) .slds-pill__action {
+  padding-block-start: var(--slds-c-pill-spacing-blockstart, calc(var(--slds-g-spacing-1) / 2));
+  padding-inline-end: var(--slds-c-pill-spacing-inlineend, calc((var(--slds-g-spacing-2) / 2) + 1rem));
+  padding-block-end: var(--slds-c-pill-spacing-blockend, calc(var(--slds-g-spacing-1) / 2));
+  padding-inline-start: var(--slds-c-pill-spacing-inlinestart, calc(var(--slds-g-spacing-1) / 2));
+  border-width: var(--slds-c-pill-sizing-border, 1px);
+  border-style: solid;
+  border-color: var(--slds-c-pill-color-border, var(--slds-g-color-border-2));
+  border-radius: var(--slds-c-pill-radius-border, var(--slds-g-radius-border-2));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-grow: 1;
+}
+:host([data-render-mode="shadow"]) .slds-pill__action:focus {
+  outline: 0;
+  border-color: var(--slds-c-pill-action-color-border, var(--slds-g-color-border-accent-3));
+  box-shadow: var(--slds-c-pill-action-shadow, 0 0 3px var(--slds-g-color-border-accent-2));
+}
+:host([data-render-mode="shadow"]) .slds-has-error {
+  border-color: var(--slds-c-pill-error-color-border, var(--slds-g-color-border-error-1));
+}
+:host([data-render-mode="shadow"]) .slds-has-error:active {
+  border-color: var(--slds-c-pill-error-color-border-active, var(--slds-g-color-border-error-1));
+}
+:host([data-render-mode="shadow"]) .slds-has-error .slds-pill__label {
+  font-weight: var(--slds-g-font-weight-7);
+  color: var(--slds-g-color-error-1);
+}
+:host([data-render-mode="shadow"]) .slds-pill__action:hover {
+  text-decoration: underline;
+  color: var(--slds-g-color-accent-4);
+}

package/src/lightning/pill/plain.css

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

package/src/lightning/pill/plainLink.css

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

package/src/lightning/pillContainer/__docs__/pillContainer.md

@@ -58,26 +58,26 @@ export default class PillContainerExample extends LightningElement {
 A text-only pill supports the following attributes. These attributes can also
 be used to create a pill with an avatar or icon.
 
--   `label`: Required. The text label that displays in the pill.
--   `name`: The name for the pill. This value is optional and can be used to identify the pill in a callback.
+- `label`: Required. The text label that displays in the pill.
+- `name`: The name for the pill. This value is optional and can be used to identify the pill in a callback.
 
 To create a pill with a link, use the following attribute.
 
--  `href`: Required. The URL for the link.
+- `href`: Required. The URL for the link.
 
 To create a pill with an avatar, use the following attributes.
 
--   `type`: The media type. Use `avatar`.
--   `src`: Required. The URL of the avatar.
--   `fallbackIconName`: The Lightning Design System name of the icon to use as a fallback when the image fails to load. Names are written in the format 'standard:account' where 'standard' is the category, and 'account' is the specific icon to be displayed. Only icons from the standard and custom categories are allowed.
--   `variant`: Changes the shape of the avatar. Valid values are empty, circle, and square. This value defaults to square.
--   `alternativeText`: The alternative text used to describe the avatar, which is displayed as hover text on the image.
+- `type`: The media type. Use `avatar`.
+- `src`: Required. The URL of the avatar.
+- `fallbackIconName`: The Lightning Design System name of the icon to use as a fallback when the image fails to load. Names are written in the format 'standard:account' where 'standard' is the category, and 'account' is the specific icon to be displayed. Only icons from the standard and custom categories are allowed.
+- `variant`: Changes the shape of the avatar. Valid values are empty, circle, and square. This value defaults to square.
+- `alternativeText`: The alternative text used to describe the avatar, which is displayed as hover text on the image.
 
 To create a pill with an icon, use the following attributes.
 
--   `type`: The media type. Use `icon`.
--   `iconName`: Required. The Lightning Design System name of the icon. Names are written in the format 'utility:down' where 'utility' is the category, and 'down' is the specific icon to be displayed. Only utility icons can be used for the `iconName`.
--   `alternativeText`: The alternative text used to describe the icon. Describe what happens when you click the button, for example 'Upload File', not what the icon looks like, 'Paperclip'.
+- `type`: The media type. Use `icon`.
+- `iconName`: Required. The Lightning Design System name of the icon. Names are written in the format 'utility:down' where 'utility' is the category, and 'down' is the specific icon to be displayed. Only utility icons can be used for the `iconName`.
+- `alternativeText`: The alternative text used to describe the icon. Describe what happens when you click the button, for example 'Upload File', not what the icon looks like, 'Paperclip'.
 
 `lightning-pill-container` provides two variants: `bare` and `standard` (default). They’re visually the same. However, the `standard` variant renders pills in an unordered list element. For more information, see the **Accessibility** section.
 
@@ -184,6 +184,7 @@ export default class PillContainerCanCollapse extends LightningElement {
     ];
 }
 ```
+
 ##### Display All Pills With the `+n more` Button
 
 If all pills aren't displayed, the component shows a text button labeled `+n more` to indicate more pills can be displayed. By default, `lightning-pill-container` doesn’t handle the `focus` event that’s fired when you click the button. You can handle the event to display more pills or write logic to do something else when the button is clicked.
@@ -202,7 +203,7 @@ This example sets the pills to be collapsible but not expanded and handles the f
             </lightning-pill-container>
     </div>
   </template>
-  ```
+```
 
 The list of pills is initially collapsed. When there are too many pills to be displayed, the text button labeled `+n more` displays. The handler for the `focus` event enables all the pills to display.
 
@@ -237,12 +238,12 @@ Salesforce Lightning Design System (SLDS) for the `standard` variant.
 
 To apply additional styling, use the SLDS [utility classes](https://www.lightningdesignsystem.com/utilities/alignment) with the `class` attribute.
 
-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 [Pills: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/pills/#Styling-Hooks-Overview) for documentation on component-specific hooks for this component. `lightning-pill-container` renders pills using `lightning-pill`. Use the `--slds-c-pill-*` custom properties on `lightning-pill`. Custom properties for pill containers work only with particular `lightning-pill-container` variants for the remove button.
 
-| CSS Custom Property                     | `lightning-pill-container` Variants |
-| --------------------------------------- | ----------------------------------- |
+| CSS Custom Property                      | `lightning-pill-container` Variants |
+| ---------------------------------------- | ----------------------------------- |
 | `--slds-c-icon-color-background`         | `standard` (default)                |
 | `--slds-c-icon-color-foreground-default` | `standard` (default)                |
 | `--slds-c-button-color-background`       | `bare`                              |

package/src/lightning/pillContainer/barePillContainer.lbc.native.css

@@ -1,4 +1,4 @@
 @import 'lightning/sldsCommon';
 @import './pill.slds.css';
 @import './pill-container.slds.css';
-@import './button.slds.css'
+@import './button.slds.css';