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

package/src/lightning/inputLocation/input-text.slds.css

@@ -225,118 +225,102 @@
    * Input Text
    */
 :host([data-render-mode="shadow"]) [part='input-text'] {
-        /* Host reassignments to composed slds-icon */
-        --slds-c-icon-color-foreground: var(
-            --slds-c-inputtext-icon-color-foreground,
-            var(--slds-g-color-on-surface-1)
-        );
-        --slds-c-icon-sizing: var(--slds-c-inputtext-icon-sizing, 14px);
-        --sds-c-inputtext-sizing-height: var(
-            --slds-c-inputtext-sizing-height,
-            var(--slds-g-sizing-9)
-        );
-        --sds-c-inputtext-color-background: var(
-            --slds-c-inputtext-color-background,
-            var(--slds-g-color-surface-container-1)
-        );
-        --sds-c-inputtext-color-background-focus: var(
-            --slds-c-inputtext-color-background-focus,
-            var(--slds-g-color-surface-container-1)
-        );
-        --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
-        --sds-c-inputtext-font-size: var(
-            --slds-c-inputtext-font-size,
-            var(--slds-g-font-size-base)
-        );
-        --sds-c-inputtext-text-color-placeholder: var(
-            --slds-c-inputtext-text-color-placeholder,
-            var(--slds-g-color-on-surface-1)
-        );
-        --sds-c-inputtext-color-border: var(
-            --slds-c-inputtext-color-border,
-            var(--slds-g-color-border-2)
-        );
-        --sds-c-inputtext-sizing-border: var(--slds-c-inputtext-sizing-border);
-        --sds-c-inputtext-radius-border: var(
-            --slds-c-inputtext-radius-border,
-            var(--slds-g-radius-border-2)
-        );
+  /* Host reassignments to composed slds-icon */
+  --slds-c-icon-color-foreground: var(
+    --slds-c-inputtext-icon-color-foreground,
+    var(--slds-g-color-on-surface-1)
+  );
+  --slds-c-icon-sizing: var(--slds-c-inputtext-icon-sizing, 14px);
+  --sds-c-inputtext-sizing-height: var(--slds-c-inputtext-sizing-height, var(--slds-g-sizing-9));
+  --sds-c-inputtext-color-background: var(
+    --slds-c-inputtext-color-background,
+    var(--slds-g-color-surface-container-1)
+  );
+  --sds-c-inputtext-color-background-focus: var(
+    --slds-c-inputtext-color-background-focus,
+    var(--slds-g-color-surface-container-1)
+  );
+  --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
+  --sds-c-inputtext-font-size: var(--slds-c-inputtext-font-size, var(--slds-g-font-size-base));
+  --sds-c-inputtext-text-color-placeholder: var(
+    --slds-c-inputtext-text-color-placeholder,
+    var(--slds-g-color-on-surface-1)
+  );
+  --sds-c-inputtext-color-border: var(--slds-c-inputtext-color-border, var(--slds-g-color-border-2));
+  --sds-c-inputtext-sizing-border: var(--slds-c-inputtext-sizing-border);
+  --sds-c-inputtext-radius-border: var(--slds-c-inputtext-radius-border, var(--slds-g-radius-border-2));
 
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: column;
-    }
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+}
 /**
    * Input Container
    */
 :host([data-render-mode="shadow"]) [part='input-container'] {
-        flex: 1 0 100%;
-        align-items: stretch;
-        --sds-c-inputtext-spacing-inline: 0;
-        --sds-c-inputtext-spacing-block: 0;
-    }
+  flex: 1 0 100%;
+  align-items: stretch;
+  --sds-c-inputtext-spacing-inline: 0;
+  --sds-c-inputtext-spacing-block: 0;
+}
 :host([data-render-mode="shadow"]) [part='input-container'][type='range'] {
-        border: none;
-        display: inline-block;
-    }
+  border: none;
+  display: inline-block;
+}
 :host([data-render-mode="shadow"]) [part='input-container'] .slds-input__icon:not(button) {
-            pointer-events: none;
-    }
+  pointer-events: none;
+}
 :host([data-render-mode="shadow"]) [part='input'][type='range'] {
-        min-height: calc(1.875rem + (1px * 2));
-        margin: 0;
-    }
+  min-height: calc(1.875rem + (1px * 2));
+  margin: 0;
+}
 :host([data-render-mode="shadow"]) [part='input-container'][type='range']:focus-within,:host([data-render-mode="shadow"]) 
-    [part='input-container'][type='range']:active {
-        --sds-c-inputtext-color-border: var(--slds-g-color-border-accent-1);
-        --sds-c-inputtext-shadow: 0 0 3px var(--slds-g-color-accent-2);
-        --sds-c-inputtext-color-background: var(--slds-g-color-surface-container-1);
+[part='input-container'][type='range']:active {
+  --sds-c-inputtext-color-border: var(--slds-g-color-border-accent-1);
+  --sds-c-inputtext-shadow: 0 0 3px var(--slds-g-color-accent-2);
+  --sds-c-inputtext-color-background: var(--slds-g-color-surface-container-1);
 
-        outline: 0;
-        border-width: var(--sds-c-inputtext-sizing-border, var(--slds-g-sizing-border-1));
-        border-color: var(--sds-c-inputtext-color-border, var(--slds-g-color-border-2));
-    }
+  outline: 0;
+  border-width: var(--sds-c-inputtext-sizing-border, var(--slds-g-sizing-border-1));
+  border-color: var(--sds-c-inputtext-color-border, var(--slds-g-color-border-2));
+}
 /**
    * Input
    */
 :host([data-render-mode="shadow"]) [part='input'] {
-        padding-inline-start: var(
-            --slds-c-inputtext-spacing-inlinestart,
-            var(--slds-g-spacing-3));
-        padding-inline-end: var(
-            --slds-c-inputtext-spacing-inlineend,
-            var(--slds-g-spacing-4));
-        height: unset;
-        font-family: var(--slds-g-font-family);
-    }
+  padding-inline-start: var(--slds-c-inputtext-spacing-inlinestart, var(--slds-g-spacing-3));
+  padding-inline-end: var(--slds-c-inputtext-spacing-inlineend, var(--slds-g-spacing-4));
+  height: unset;
+  font-family: var(--slds-g-font-family);
+}
 /**
    * Focus / active State
    */
-:host(:not([disabled])) [part="input-container"]:focus-within,
-   :host(:not([disabled])) [part="input-container"]:active {
-      --sds-c-inputtext-color-border: var(--slds-g-color-border-accent-1);
-      --sds-c-inputtext-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-2);
-      --sds-c-inputtext-color-background: var(--slds-g-color-surface-container-1);
+:host(:not([disabled])) [part='input-container']:focus-within,
+:host(:not([disabled])) [part='input-container']:active {
+  --sds-c-inputtext-color-border: var(--slds-g-color-border-accent-1);
+  --sds-c-inputtext-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-2);
+  --sds-c-inputtext-color-background: var(--slds-g-color-surface-container-1);
 
-      outline: 0;
-    }
+  outline: 0;
+}
 /**
    * Read Only State
    */
 :host([data-render-mode="shadow"][readonly]) [part='input-text'] {
-        --sds-c-inputtext-spacing-inline-start-readonly: 0;
-        --sds-c-inputtext-color-border-focus: transparent;
-        --slds-c-inputtext-color-border: transparent;
-        --slds-c-inputtext-color-background: transparent;
-        --slds-c-inputtext-color-background-focus: transparent;
-    }
-:host([data-render-mode="shadow"][readonly]) [part="input-container"]:focus-within,:host([data-render-mode="shadow"][readonly]) [part="input-container"]:active {
-       --sds-c-inputtext-color-border: var(--slds-g-color-disabled-container-2);
-       --sds-c-inputtext-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-2);
-       --sds-c-inputtext-color-background: transparent;
+  --sds-c-inputtext-spacing-inline-start-readonly: 0;
+  --sds-c-inputtext-color-border-focus: transparent;
+  --slds-c-inputtext-color-border: transparent;
+  --slds-c-inputtext-color-background: transparent;
+  --slds-c-inputtext-color-background-focus: transparent;
+}
+:host([data-render-mode="shadow"][readonly]) [part='input-container']:focus-within,:host([data-render-mode="shadow"][readonly]) [part='input-container']:active {
+  --sds-c-inputtext-color-border: var(--slds-g-color-disabled-container-2);
+  --sds-c-inputtext-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-2);
+  --sds-c-inputtext-color-background: transparent;
 
-       outline: 0;
-     }
+  outline: 0;
+}
 /**
    * Invalid State
    *
@@ -345,25 +329,24 @@
    * uses :host([invalid]).
    */
 :host([data-render-mode="shadow"][invalid]) [part='input-text'] {
-        --sds-c-inputtext-shadow: 0 0 0 var(--slds-g-sizing-border-1) inset
-            var(--slds-g-color-error-1);
-        --slds-c-inputtext-color-border: var(--slds-g-color-border-error-1);
-        --slds-c-icon-color-foreground: var(--slds-g-color-error-1);
-    }
+  --sds-c-inputtext-shadow: 0 0 0 var(--slds-g-sizing-border-1) inset var(--slds-g-color-error-1);
+  --slds-c-inputtext-color-border: var(--slds-g-color-border-error-1);
+  --slds-c-icon-color-foreground: var(--slds-g-color-error-1);
+}
 :host([data-render-mode="shadow"][invalid]) .slds-input-has-icon .slds-button_icon:hover {
-        --slds-c-icon-color-foreground: var(--slds-g-color-error-1);
-     }
-:host([data-render-mode="shadow"][invalid]) input[type="search"] {
-      --slds-c-input-color-background: var(--slds-s-input-color-background-invalid);
-      --slds-c-input-color-border: var(--slds-g-color-border-error-1);
-      --slds-c-input-text-color: var(--slds-s-input-color-invalid);
+  --slds-c-icon-color-foreground: var(--slds-g-color-error-1);
+}
+:host([data-render-mode="shadow"][invalid]) input[type='search'] {
+  --slds-c-input-color-background: var(--slds-s-input-color-background-invalid);
+  --slds-c-input-color-border: var(--slds-g-color-border-error-1);
+  --slds-c-input-text-color: var(--slds-s-input-color-invalid);
 
-      background-clip: padding-box;
-    }
-:host([data-render-mode="shadow"][invalid]) input[type="search"] + lightning-primitive-icon::part(icon) {
-      fill: var(--slds-g-color-error-1);
-      color: var(--slds-g-color-error-1);
-    }
+  background-clip: padding-box;
+}
+:host([data-render-mode="shadow"][invalid]) input[type='search'] + lightning-primitive-icon::part(icon) {
+  fill: var(--slds-g-color-error-1);
+  color: var(--slds-g-color-error-1);
+}
 /**
    * Invalid State - Focus
    *
@@ -371,26 +354,28 @@
    * here to prevent a bug with the focus state border and box-shadow
    */
 :host([data-render-mode="shadow"][invalid]) [part='input-container']:focus-within {
-      --sds-c-inputtext-shadow:
-        var(--slds-g-color-error-base-50) 0 0 0 var(--slds-g-sizing-border-1) inset,
-        0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-border-error-1);
-      --sds-c-inputtext-color-border: var(--slds-g-color-error-1);
-    }
+  --sds-c-inputtext-shadow:
+    var(--slds-g-color-error-base-50) 0 0 0 var(--slds-g-sizing-border-1) inset,
+    0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-border-error-1);
+  --sds-c-inputtext-color-border: var(--slds-g-color-error-1);
+}
 /**
    * Disabled State
    *
    * Both parts form the visible form control.
    */
 :host([data-render-mode="shadow"][disabled]) [part='input-container'],:host([data-render-mode="shadow"][disabled]) [part='input'] {
-        cursor: not-allowed;
-        --sds-c-inputtext-color-background: var(--slds-s-input-color-background-disabled, var(--slds-g-color-disabled-container-1));
-        --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
-        --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
-    }
+  cursor: not-allowed;
+  --sds-c-inputtext-color-background: var(
+    --slds-s-input-color-background-disabled,
+    var(--slds-g-color-disabled-container-1)
+  );
+  --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
+  --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
+}
 :host([data-render-mode="shadow"][disabled]) [part='input-text'] {
-        --sds-c-inputtext-text-color-placeholder:
-            var(--slds-g-color-on-disabled-2);
-    }
+  --sds-c-inputtext-text-color-placeholder: var(--slds-g-color-on-disabled-2);
+}
 /**
    * Label
    *
@@ -398,17 +383,14 @@
    * avoid collisions with other components using [part='label'] (e.g. slds-input-checkbox)
    */
 :host([data-render-mode="shadow"]) [part='input-text'] [part='label'] {
-        padding-block-start: var(--slds-g-spacing-1);
-        padding-inline-end: var(--slds-g-spacing-2);
-        color: var(
-            --slds-c-inputtext-label-color,
-            var(--slds-g-color-on-surface-2)
-        );
-        margin-block-end: var(--slds-g-sizing-1);
+  padding-block-start: var(--slds-g-spacing-1);
+  padding-inline-end: var(--slds-g-spacing-2);
+  color: var(--slds-c-inputtext-label-color, var(--slds-g-color-on-surface-2));
+  margin-block-end: var(--slds-g-sizing-1);
 
-        /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */
-        display: inline-flex;
-    }
+  /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */
+  display: inline-flex;
+}
 /**
    * Start
    *
@@ -417,8 +399,8 @@
    * the icon in the inline help text.
    */
 :host([data-render-mode="shadow"]) [part='start'] {
-        --slds-c-icon-spacing-inlineend: var(--slds-g-spacing-2);
-    }
+  --slds-c-icon-spacing-inlineend: var(--slds-g-spacing-2);
+}
 /**
    * Label Inline Variant
    *
@@ -432,75 +414,75 @@
    * Ref: https://github.com/salesforce-ux/design-system-internal/blob/240-winter-23/ui/components/form-element/horizontal/_index.scss#L63
    */
 @media (width >= 48em) {
-        :host([data-render-mode="shadow"][variant='label-inline']) [part='input-text'] {
-            display: block;
-        }
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='input-text'] {
+    display: block;
+  }
 
-        :host([data-render-mode="shadow"][variant='label-inline']) [part='label'] {
-            float: left;
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='label'] {
+    float: left;
 
-            /* TODO: Get rid of these magic numbers */
-            max-width: calc(33% - 1.125rem);
-            padding-block-start: var(--slds-g-spacing-1);
-        }
+    /* TODO: Get rid of these magic numbers */
+    max-width: calc(33% - 1.125rem);
+    padding-block-start: var(--slds-g-spacing-1);
+  }
 
-        :host([data-render-mode="shadow"][variant='label-inline']) [part='input-container'] {
-            margin-inline-start: 33%;
-        }
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='input-container'] {
+    margin-inline-start: 33%;
+  }
 
-        :host([data-render-mode="shadow"][variant='label-inline']) [part='inline-help'] {
-            float: left;
-            padding-block-start: var(--slds-g-spacing-1);
-        }
-    }
-:host([data-render-mode="shadow"]) input[type="search"] + lightning-primitive-icon::part(icon) {
-        left: var(--slds-g-spacing-3);
-        fill: var(--slds-g-color-on-surface-1);
-    }
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='inline-help'] {
+    float: left;
+    padding-block-start: var(--slds-g-spacing-1);
+  }
+}
+:host([data-render-mode="shadow"]) input[type='search'] + lightning-primitive-icon::part(icon) {
+  left: var(--slds-g-spacing-3);
+  fill: var(--slds-g-color-on-surface-1);
+}
 :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-button_icon {
-        background-color: transparent;
-    }
+  background-color: transparent;
+}
 :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-button_icon:focus,:host([data-render-mode="shadow"]) 
-    .slds-input-has-icon .slds-button_icon:hover {
-        --slds-c-icon-color-foreground: var(--slds-g-color-accent-3);
-    }
+.slds-input-has-icon .slds-button_icon:hover {
+  --slds-c-icon-color-foreground: var(--slds-g-color-accent-3);
+}
 :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-input__icon {
-        width: 0.875rem;
-        height: 0.875rem;
-        position: absolute;
-        top: 50%;
-        margin-top: -0.4375rem;
-        line-height: 1;
-        border: 0;
-        z-index: 2;
-    }
+  width: 0.875rem;
+  height: 0.875rem;
+  position: absolute;
+  top: 50%;
+  margin-top: -0.4375rem;
+  line-height: 1;
+  border: 0;
+  z-index: 2;
+}
 /**
    * Has Icon Left
    */
 :host([data-render-mode="shadow"]) .slds-input-has-icon_left {
-        --slds-c-inputtext-spacing-inlinestart: var(--slds-g-spacing-6);
-    }
+  --slds-c-inputtext-spacing-inlinestart: var(--slds-g-spacing-6);
+}
 :host([data-render-mode="shadow"]) .slds-input-has-icon_left .slds-input__icon,:host([data-render-mode="shadow"]) 
-    .slds-input-has-icon_left-right .slds-input__icon_left {
-        inset-inline-start: var(--slds-g-spacing-3);
-    }
+.slds-input-has-icon_left-right .slds-input__icon_left {
+  inset-inline-start: var(--slds-g-spacing-3);
+}
 /**
    * Has Icon Right
    */
 :host([data-render-mode="shadow"]) .slds-input-has-icon_right {
-        --slds-c-inputtext-spacing-inlineend: var(--slds-g-spacing-6);
-    }
+  --slds-c-inputtext-spacing-inlineend: var(--slds-g-spacing-6);
+}
 :host([data-render-mode="shadow"]) .slds-input-has-icon_right .slds-input__icon,:host([data-render-mode="shadow"]) 
-    .slds-input-has-icon_left-right .slds-input__icon_right {
-        inset-inline-end: var(--slds-g-spacing-3);
-    }
+.slds-input-has-icon_left-right .slds-input__icon_right {
+  inset-inline-end: var(--slds-g-spacing-3);
+}
 /**
    * Has Icon Left & Right
    */
 :host([data-render-mode="shadow"]) .slds-input-has-icon_left-right {
-        --slds-c-inputtext-spacing-inlinestart: var(--slds-g-spacing-6);
-        --slds-c-inputtext-spacing-inlineend: var(--slds-g-spacing-6);
-    }
+  --slds-c-inputtext-spacing-inlinestart: var(--slds-g-spacing-6);
+  --slds-c-inputtext-spacing-inlineend: var(--slds-g-spacing-6);
+}
 /**
  * A temporarily baked-in utility class until SLDS gets a proper utility package.
  *
@@ -509,14 +491,14 @@
  * utility package solution.
  */
 :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;
-  }
+  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;
+}

package/src/lightning/inputName/__docs__/inputName.md

@@ -24,12 +24,12 @@ accepts an array of label-value pairs.
 By default, `lightning-input-name` displays Salutation, First Name, and Last Name fields.
 Use the `fields-to-display` attribute to specify a different list of fields to display. The component supports these field names for `fields-to-display`.
 
--   `firstName`
--   `lastName`
--   `middleName`
--   `informalName`
--   `suffix`
--   `salutation`
+- `firstName`
+- `lastName`
+- `middleName`
+- `informalName`
+- `suffix`
+- `salutation`
 
 The locale set in Salesforce user preferences determines the order the fields are presented.
 
@@ -147,7 +147,7 @@ export default class InputNameBase extends LightningElement {
 }
 ```
 
-See the __Custom Events__ section for a list of `event.target` properties. For more information, see [Data Binding in a Template](https://developer.salesforce.com/docs/platform/lwc/guide/js-props-getter).
+See the **Custom Events** section for a list of `event.target` properties. For more information, see [Data Binding in a Template](https://developer.salesforce.com/docs/platform/lwc/guide/js-props-getter).
 
 #### Usage Considerations
 

package/src/lightning/inputName/form-element.slds.css

@@ -1,5 +1,4 @@
 
-
 /**
  * sldsFormElementUtils.css and form-element.css have many similarities
  * however, they are used for very different use cases, and this is why
@@ -255,7 +254,9 @@
   display: block;
 }
 
-:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-label),:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-editor-container) {/* for rich text via lightning-quill */
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-label),:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-editor-container) {
+  /* for rich text via lightning-quill */
+
   /* @W-14518344 The following line still exists in SLDS-internal
       but it was removed here because it was causing the input
       component to not display it's bottom border
@@ -294,8 +295,7 @@
 /* Force inner child input to not have padding and margin.
 The parent (ex. lightning-input-field) will provide it instead */
 
-:host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element,:host([data-render-mode="shadow"][variant='label-inline']) [variant='label-inline']
-{
+:host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element,:host([data-render-mode="shadow"][variant='label-inline']) [variant='label-inline'] {
   padding: 0;
   margin-block-end: 0;
 }