lightning-base-components 1.21.1-alpha → 1.21.3-alpha

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

@@ -1,116 +1,94 @@
 
- @supports (--styling-hooks: '') {
-   /* Horizontal listbox - used for pill container */
+  /* 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;
-   }
-
+    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 {
-     background-color: var(--sds-g-color-neutral-base-95, #f3f3f3);
-     text-decoration: none;
-   }
-
+  .slds-listbox_vertical .slds-listbox__option:hover,:host([data-render-mode="shadow"]) 
+  .slds-listbox_vertical .slds-listbox__option.slds-has-focus {
+    background-color: var(--slds-g-color-surface-container-2);
+    text-decoration: none;
+  }
    :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 {
-     background-color: transparent;
-     cursor: default;
-   }
-
+  .slds-listbox_vertical .slds-listbox__option[role="presentation"]:hover {
+    background-color: transparent;
+    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(--sds-g-spacing-1, 0.25rem);
-     padding-inline: var(--sds-g-spacing-3, 0.75rem);
-   }
-
+    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(--sds-g-spacing-2, 0.5rem);
-     padding-inline: var(--sds-g-spacing-3, 0.75rem);
-   }
-
+    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(--sds-g-spacing-2, 0.5rem);
-     padding-inline: var(--sds-g-spacing-3, 0.75rem);
-   }
-
+    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:hover {
-     cursor: pointer;
-   }
-
+    cursor: pointer;
+  }
    :host([data-render-mode="shadow"]) .slds-listbox__option:focus {
-     outline: 0;
-   }
-
+    outline: 0;
+  }
    :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] {
-     color: var(--sds-g-color-neutral-base-80, #c9c9c9);
-   }
-
+    color: var(--slds-g-color-disabled-2);
+  }
    /* ------------------------------- 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(--sds-g-spacing-2, 0.5rem);
-   }
-
+    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(--sds-g-spacing-1, 0.25rem);
-   }
-
+    margin-block-start: var(--slds-g-spacing-1);
+  }
    :host([data-render-mode="shadow"]) .slds-listbox__option .slds-truncate {
-     display: inline-block;
-     vertical-align: middle;
-   }
-
+    display: inline-block;
+    vertical-align: middle;
+  }
    /* Header for choosable option within listbox */
    :host([data-render-mode="shadow"]) .slds-listbox__option-header {
-     font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
-     font-weight: 700;
-   }
-
+    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(--sds-g-sizing-7, 1.5rem);
-     display: inline-flex;
-     align-content: center;
-     align-items: center;
-     justify-content: center;
-     color: var(--sds-g-color-neutral-base-50, #747474);
-   }
-
+    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(--sds-g-color-brand-base-50, #0176d3);
-   }
-
+    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;
-   }
-
+    opacity: 1;
+  }
    :host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__option-icon {
-     color: var(--sds-g-color-brand-base-50, #0176d3);
-   }
-
+    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%;
@@ -120,133 +98,107 @@
      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(--sds-g-spacing-1, 0.25rem) * -1);
-     color: var(--sds-g-color-neutral-base-30, #444444);
-   }
-
+    display: block;
+    margin-block-start: calc(var(--slds-g-spacing-1) * -1);
+    color: var(--slds-g-color-neutral-base-30);
+  }
    :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-meta {
      color: 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(--sds-g-spacing-8, 3rem) + var(--sds-g-spacing-3, 0.75rem));
+     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;
-   }
-
+    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(--sds-g-spacing-2, 0.5rem);
-   }
-
+    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;
-   }
-
+    line-height: 1;
+  }
    /* Media Object classes need to be pulled out for reusability */
    :host([data-render-mode="shadow"]) .slds-media {
-     display: flex;
-     align-items: flex-start;
-   }
-
+    display: flex;
+    align-items: flex-start;
+  }
    :host([data-render-mode="shadow"]) .slds-media__figure {
-     flex-shrink: 0;
-     margin-inline-end: var(--sds-g-spacing-3, 0.75rem);
-   }
-
+    flex-shrink: 0;
+    margin-inline-end: var(--slds-g-spacing-3);
+  }
    :host([data-render-mode="shadow"]) .slds-media__figure_fixed-width {
-     min-width: var(--sds-g-sizing-10, 3rem);
-   }
-
+    min-width: var(--slds-g-sizing-10);
+  }
    :host([data-render-mode="shadow"]) .slds-media__body {
-     flex: 1;
-     min-width: 0;
-   }
-
+    flex: 1;
+    min-width: 0;
+  }
    :host([data-render-mode="shadow"]) .slds-media__body,:host([data-render-mode="shadow"]) 
-   .slds-media__body> :last-child {
-     margin-block-end: 0;
-   }
-
+  .slds-media__body> :last-child {
+    margin-block-end: 0;
+  }
    :host([data-render-mode="shadow"]) .slds-media-body-iefix {
-     flex-shrink: 0;
-     flex-basis: auto;
-   }
-
+    flex-shrink: 0;
+    flex-basis: auto;
+  }
    :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure {
-     margin-inline-end: var(--sds-g-spacing-1, 0.25rem);
-   }
-
+    margin-inline-end: var(--slds-g-spacing-1);
+  }
    :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure_reverse {
-     margin-inline-start: var(--sds-g-spacing-1, 0.25rem);
-   }
-
+    margin-inline-start: var(--slds-g-spacing-1);
+  }
    :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure {
-     margin-inline-end: var(--sds-g-spacing-5, 1.5rem);
-   }
-
+    margin-inline-end: var(--slds-g-spacing-5);
+  }
    :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure_reverse {
-     margin-inline-start: var(--sds-g-spacing-5, 1.5rem);
-   }
-
+    margin-inline-start: var(--slds-g-spacing-5);
+  }
    :host([data-render-mode="shadow"]) .slds-media_inline .slds-media__body {
-     flex: 0 1 auto;
-   }
-
+    flex: 0 1 auto;
+  }
    :host([data-render-mode="shadow"]) .slds-media_center {
-     align-items: center;
-   }
-
+    align-items: center;
+  }
    :host([data-render-mode="shadow"]) .slds-media__figure_reverse {
-     margin-block: 0;
-     margin-inline-start: var(--sds-g-spacing-3, 0.75rem);
-     margin-inline-end: 0;
-   }
-
+    margin-block: 0;
+    margin-inline-start: var(--slds-g-spacing-3);
+    margin-inline-end: 0;
+  }
    @media (width <= 48em) {
 
-     :host([data-render-mode="shadow"]) .slds-media_responsive {
-       display: block;
-     }
+    :host([data-render-mode="shadow"]) .slds-media_responsive {
+      display: block;
+    }
 
      :host([data-render-mode="shadow"]) .slds-media_responsive .slds-media__figure {
        margin-block: 0;
-       margin-inline-start: var(--sds-g-spacing-3, 0.75rem);
+       margin-inline-start: var(--slds-g-spacing-3);
        margin-inline-end: 0;
      }
    }
- }

package/src/lightning/pillContainer/pill-container.slds.css

@@ -1,33 +1,35 @@
 
- @supports (--styling-hooks: '') {
   /* re-assign current slds hooks using deprecated naming conventions */
   :host([data-render-mode="shadow"]) {
+    /* stylelint-disable */
     --slds-c-pill-container-color-background: var(--slds-c-pillcontainer-color-background);
-    --slds-c-pill-container-spacing-block-end: var(--slds-c-pillcontainer-spacing-blockend);
-    --slds-c-pill-container-spacing-block-start: var(--slds-c-pillcontainer-spacing-blockstart);
-    --slds-c-pill-container-spacing-inline-end: var(--slds-c-pillcontainer-spacing-inlineend);
-    --slds-c-pill-container-spacing-inline-start: var(--slds-c-pillcontainer-spacing-inlinestart);
+    --slds-c-pill-container-spacing-blockend: var(--slds-c-pillcontainer-spacing-block-end);
+    --slds-c-pill-container-spacing-blockstart: var(--slds-c-pillcontainer-spacing-block-start);
+    --slds-c-pill-container-spacing-inlineend: var(--slds-c-pillcontainer-spacing-inline-end);
+    --slds-c-pill-container-spacing-inlinestart: var(--slds-c-pillcontainer-spacing-inline-start);
     --slds-c-pill-sizing-border: var(--slds-c-pillcontainer-sizing-border);
     --slds-c-pill-color-border: var(--slds-c-pillcontainer-color-border);
     --slds-c-pill-radius-border: var(--slds-c-pillcontainer-radius-border);
+    /* stylelint-enable */
+  }
+  /* When single-line attribute is present */
+  :host([data-render-mode="shadow"][single-line]) .slds-listbox_horizontal {
+    flex-wrap: nowrap;
   }
-
   :host([data-render-mode="shadow"]) .slds-pill_container {
     display: flex;
-    min-height: calc(calc((var(--sds-g-sizing-1, 0.125rem) * 3) + var(--sds-g-sizing-7, 1.5rem)) + 2px);
-    padding-block-start: var(--slds-c-pillcontainer-spacing-blockstart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-end: var(--slds-c-pillcontainer-spacing-inlineend, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-block-end: var(--slds-c-pillcontainer-spacing-blockend, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-start: var(--slds-c-pillcontainer-spacing-inlinestart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    border-width: var(--slds-c-pillcontainer-sizing-border, var(--sds-g-sizing-border-1, 1px));
+    min-height: calc(calc((var(--slds-g-sizing-1) * 3) + var(--slds-g-sizing-7)) + 2px);
+    padding-block-start: var(--slds-c-pillcontainer-spacing-blockstart, calc(var(--slds-g-spacing-1) / 2));
+    padding-inline-end: var(--slds-c-pillcontainer-spacing-inlineend, calc(var(--slds-g-spacing-1) / 2));
+    padding-block-end: var(--slds-c-pillcontainer-spacing-blockend, calc(var(--slds-g-spacing-1) / 2));
+    padding-inline-start: var(--slds-c-pillcontainer-spacing-inlinestart, calc(var(--slds-g-spacing-1) / 2));
+    border-width: var(--slds-c-pillcontainer-sizing-border, var(--slds-g-sizing-border-1));
     border-style: solid;
-    border-color: var(--slds-c-pillcontainer-color-border, var(--sds-g-color-neutral-base-90, #e5e5e5));
-    border-radius: var(--slds-c-pillcontainer-radius-border, var(--sds-g-radius-border-2, 0.25rem));
-    background-color: var(--slds-c-pillcontainer-color-background, var(--sds-g-color-neutral-base-100, #ffffff));
+    border-color: var(--slds-c-pillcontainer-color-border, var(--slds-g-color-border-1));
+    border-radius: var(--slds-c-pillcontainer-radius-border, var(--slds-g-radius-border-2));
+    background-color: var(--slds-c-pillcontainer-color-background, var(--slds-g-color-surface-container-1));
   }
-
   :host([data-render-mode="shadow"]) .slds-pill_container .slds-listbox_inline {
     margin-inline-start: 0;
     margin-inline-end: 0;
   }
- }