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

package/src/lightning/dualListbox/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/dynamicIcon/__docs__/dynamicIcon.md

@@ -43,12 +43,12 @@ Here's an example of an ellie icon with alternative text.
 
 The following `type` options are available.
 
--   Use the `type="ellie"` attribute to show a pulsing blue circle, which pulses and stops after one animation cycle. This icon is great for field calculations or a process that's running in the background.
--   Use the `type="eq"` attribute to show an animated graph with three bars that rise and fall randomly. This icon is great for a graph that's refreshing.
--   Use the `type="score"` attribute to show a green filled circle or a red unfilled circle. This icon is great for showing positive and negative indicators.
--   Use the `type="strength"` attribute to show three animated horizontal circles that are colored green or red. This icon is great for Einstein calculations or indicating password strengths.
--   Use the `type="trend"` attribute to show animated arrows that point up, down, or straight. This icon is great for showing movement of a value from one range to another, like a forecast score.
--   Use the `type="waffle"` attribute to show a square made up of a 3x3 grid of circles. This icon animates on hover. This icon is great for app-related items, like the App Launcher in Lightning Experience.
+- Use the `type="ellie"` attribute to show a pulsing blue circle, which pulses and stops after one animation cycle. This icon is great for field calculations or a process that's running in the background.
+- Use the `type="eq"` attribute to show an animated graph with three bars that rise and fall randomly. This icon is great for a graph that's refreshing.
+- Use the `type="score"` attribute to show a green filled circle or a red unfilled circle. This icon is great for showing positive and negative indicators.
+- Use the `type="strength"` attribute to show three animated horizontal circles that are colored green or red. This icon is great for Einstein calculations or indicating password strengths.
+- Use the `type="trend"` attribute to show animated arrows that point up, down, or straight. This icon is great for showing movement of a value from one range to another, like a forecast score.
+- Use the `type="waffle"` attribute to show a square made up of a 3x3 grid of circles. This icon animates on hover. This icon is great for app-related items, like the App Launcher in Lightning Experience.
 
 #### Accessibility
 

package/src/lightning/dynamicIcon/dynamic-icon-ellie.slds.css

@@ -1,6 +1,4 @@
 
-
-
 :host([data-render-mode="shadow"]) .slds-assistive-text {
   position: absolute !important;
   margin: -1px !important;

package/src/lightning/dynamicIcon/dynamic-icon-eq.slds.css

@@ -1,6 +1,4 @@
 
-
-
 :host([data-render-mode="shadow"]) .slds-assistive-text {
   position: absolute !important;
   margin: -1px !important;

package/src/lightning/dynamicIcon/dynamic-icon-score.slds.css

@@ -1,6 +1,4 @@
 
-
-
 :host([data-render-mode="shadow"]) .slds-assistive-text {
   position: absolute !important;
   margin: -1px !important;
@@ -21,7 +19,7 @@
   position: relative;
 }
 
-:host([data-render-mode="shadow"]) [class*="slds-icon-score__"] {
+:host([data-render-mode="shadow"]) [class*='slds-icon-score__'] {
   position: absolute;
   opacity: 0;
   transition: opacity 0.4s ease-in-out;
@@ -39,7 +37,7 @@
   stroke: #ba0517;
 }
 
-:host([data-render-mode="shadow"]) [data-slds-state="positive"] .slds-icon-score__positive,:host([data-render-mode="shadow"]) 
-[data-slds-state="negative"] .slds-icon-score__negative {
+:host([data-render-mode="shadow"]) [data-slds-state='positive'] .slds-icon-score__positive,:host([data-render-mode="shadow"]) 
+[data-slds-state='negative'] .slds-icon-score__negative {
   opacity: 1;
 }