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

package/src/lightning/pillContainer/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/pillContainer/standardPillContainer.css

@@ -2,4 +2,4 @@
 @import './pill.slds.css';
 @import './pill-container.slds.css';
 @import './listbox.slds.css';
-@import './button.slds.css'
+@import './button.slds.css';

package/src/lightning/popup/README.md

@@ -241,9 +241,9 @@ A popup contains at least one tabbable element which automatically gets focus wh
 
 If a close button is present:
 
--   Press Tab to go from the last tabbable element to the close button.
--   Press Shift-Tab to go from the close button to the last tabbable element in the popup.
--   Press Enter when focused on the close button to close the popup.
+- Press Tab to go from the last tabbable element to the close button.
+- Press Shift-Tab to go from the close button to the last tabbable element in the popup.
+- Press Enter when focused on the close button to close the popup.
 
 Press Escape if the popup doesn't include a close button.
 

package/src/lightning/popup/__requirements__/requirements.md

@@ -1,28 +1,28 @@
--   A popup must have at least one focusable element inside
+- A popup must have at least one focusable element inside
 
--   Popup should trap the focus (pressing Tab on the last element goes to the close button, and Shift-Tab on the close button goes to the last focusable element)
+- Popup should trap the focus (pressing Tab on the last element goes to the close button, and Shift-Tab on the close button goes to the last focusable element)
 
--   Pressing the Escape the key should close the popup and `close` event should be dispatched
+- Pressing the Escape the key should close the popup and `close` event should be dispatched
 
--   Clicking out of the popup should close the popup and `clickout` (cancelable) event should be dispatched; if `clickout` event is not canceled the popup is closed and `close` event is dispatched
+- Clicking out of the popup should close the popup and `clickout` (cancelable) event should be dispatched; if `clickout` event is not canceled the popup is closed and `close` event is dispatched
 
--   Clicking anywhere inside the popup (not on a focusable element) should not close the popup
+- Clicking anywhere inside the popup (not on a focusable element) should not close the popup
 
--   User focus should be placed back on the element focused when the popover opened. If there were no focused elements prior, the popup should close without making any focus changes.
+- User focus should be placed back on the element focused when the popover opened. If there were no focused elements prior, the popup should close without making any focus changes.
 
--   The content of the slot should only be present in the DOM when the popup is visible (which means it should not be in the dom before it's shown, and after it's closed).
+- The content of the slot should only be present in the DOM when the popup is visible (which means it should not be in the dom before it's shown, and after it's closed).
 
--   It should be possible to re-open a closed popup
+- It should be possible to re-open a closed popup
 
 **Methods**
 
--   `show(referenceElement, alignmentOptions)` when called should show the popup.
+- `show(referenceElement, alignmentOptions)` when called should show the popup.
 
-    -   Should accept an optional `referenceElement` element which is used for alignment
+    - Should accept an optional `referenceElement` element which is used for alignment
 
-    -   Should not do auto-positioning when `referenceElement` is not specified (note: this is so that one can position the popup manually)
+    - Should not do auto-positioning when `referenceElement` is not specified (note: this is so that one can position the popup manually)
 
-    -   `alignmentOptions` allows the following structure:
+    - `alignmentOptions` allows the following structure:
 
     ```
      {
@@ -37,7 +37,7 @@
      }
     ```
 
-    -   When `referenceElement` is specified, should accept an optional `alignmentOptions` object (map), which is used for setting preferred alignment between the `referenceElement` and the popup. Alignment options accept four properties - `reference`, `popup`, `padding` and `offset`. `reference` is a map made of `vertical` and `horizontal` attributes and it defines the preferred anchor point that the popup will stick to. `popup` defines the preferred point of the popup that will stick to the reference point of the element, valid values are the same as for the `reference`. Depending on the space available the popup alignment may change and `alignmentupdate` will fire. `padding` determines the space in 'rem' between the contacting edges of the reference element and popup, it could be used to create some distance between popup and the reference element and also to accommodate an arrow. `offset` represents the offset in 'rem' of the popup along the contacting edges, it could be used to accommodate an arrow.
+    - When `referenceElement` is specified, should accept an optional `alignmentOptions` object (map), which is used for setting preferred alignment between the `referenceElement` and the popup. Alignment options accept four properties - `reference`, `popup`, `padding` and `offset`. `reference` is a map made of `vertical` and `horizontal` attributes and it defines the preferred anchor point that the popup will stick to. `popup` defines the preferred point of the popup that will stick to the reference point of the element, valid values are the same as for the `reference`. Depending on the space available the popup alignment may change and `alignmentupdate` will fire. `padding` determines the space in 'rem' between the contacting edges of the reference element and popup, it could be used to create some distance between popup and the reference element and also to accommodate an arrow. `offset` represents the offset in 'rem' of the popup along the contacting edges, it could be used to accommodate an arrow.
 
     ```
      ┌──────────────────┐
@@ -61,7 +61,7 @@
       },
     ```
 
-    -   Should not throw an error when `alignmentOptions` is not set. Not passing alignment options should be equivalent to passing the following options:
+    - Should not throw an error when `alignmentOptions` is not set. Not passing alignment options should be equivalent to passing the following options:
 
         ```
         {
@@ -72,11 +72,11 @@
         }
         ```
 
--   `close` when called should close the popup without dispatching any events. Auto-positioning should be stopped.
+- `close` when called should close the popup without dispatching any events. Auto-positioning should be stopped.
 
 **Properties**
 
--   `alignment` represents the alignment of the popup relative to the `referenceElement` (see `show` method), its structure is the same as for `alignmentOptions`'s `popup`. Default is:
+- `alignment` represents the alignment of the popup relative to the `referenceElement` (see `show` method), its structure is the same as for `alignmentOptions`'s `popup`. Default is:
 
     ```
      { vertical: 'bottom', horizontal: 'left' }
@@ -86,21 +86,21 @@ This property is updated before `alignmentupdate` event is dispatched.
 
 **Events**
 
--   `close` event is dispatched when the popup is opened and the user either:
+- `close` event is dispatched when the popup is opened and the user either:
 
-    -   presses Esc key while focus is inside the popup
-    -   clicks outside of the popup after the focus has been inside the popup
+    - presses Esc key while focus is inside the popup
+    - clicks outside of the popup after the focus has been inside the popup
 
--   `autofocus` cancelable event is dispatched when the popup is about to place the focus on the first tabbable element; if the event is canceled the focus will not be placed
+- `autofocus` cancelable event is dispatched when the popup is about to place the focus on the first tabbable element; if the event is canceled the focus will not be placed
 
--   `returnfocus` cancelable event should be dispatched when the focus is returned to the element that had focus prior to popup showing; if the event is canceled the focus is not returned
+- `returnfocus` cancelable event should be dispatched when the focus is returned to the element that had focus prior to popup showing; if the event is canceled the focus is not returned
 
--   `alignmentupdate` event should be dispatched whenever the alignment of the popup has been updated (for example the component flipped on the vertical or horizontal axis). It should also be dispatched on initial positioning of the popup.
+- `alignmentupdate` event should be dispatched whenever the alignment of the popup has been updated (for example the component flipped on the vertical or horizontal axis). It should also be dispatched on initial positioning of the popup.
 
--   `clickout` cancelable event should be dispatched when the user has clicked outside of the popup after the popup had the focus, the default behaviour is to close the popup; if the event is canceled the popup should not close
+- `clickout` cancelable event should be dispatched when the user has clicked outside of the popup after the popup had the focus, the default behaviour is to close the popup; if the event is canceled the popup should not close
 
 **Positioning logic**
 
--   When a referenceElement is specified, the popup should be positioned based on the specified rules in the `alignmentOptions`.
+- When a referenceElement is specified, the popup should be positioned based on the specified rules in the `alignmentOptions`.
 
--   When the content of the popup doesn't fit, it may be flipped on horizontal and/or vertical axes for better fit (describe positionLibrary logic here), `alignmentupdate` may be fired at that point with the new popup alignment.
+- When the content of the popup doesn't fit, it may be flipped on horizontal and/or vertical axes for better fit (describe positionLibrary logic here), `alignmentupdate` may be fired at that point with the new popup alignment.