lightning-base-components 1.18.1-alpha → 1.18.2-alpha

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

@@ -99,137 +99,192 @@
 }
 
 @supports (--styling-hooks: '') {
-  /**
+   /**
    * 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(--sds-g-color-neutral-base-50, #747474)
-    );
-    --slds-c-icon-sizing: var(--slds-c-inputtext-icon-sizing, 14px);
-
-    --sds-c-inputtext-spacing-inline-start: var(
-      --slds-c-inputtext-spacing-inline-start,
-      var(--sds-g-spacing-3, 0.75rem)
-    );
-    --sds-c-inputtext-spacing-inline-end: var(--slds-c-inputtext-spacing-inline-end, var(--sds-g-spacing-4, 1rem));
-    --sds-c-inputtext-sizing-height: var(--slds-c-inputtext-sizing-height, 1.875rem);
-    --sds-c-inputtext-color-background: var(--slds-c-inputtext-color-background, var(--sds-g-color-neutral-base-100, #ffffff));
-    --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
-    --sds-c-inputtext-font-size: var(--slds-c-inputtext-font-size, var(--sds-g-font-scale-neg-2, 0.8125rem));
-    --sds-c-inputtext-text-color-placeholder: var(
-      --slds-c-inputtext-text-color-placeholder,
-      var(--sds-g-color-neutral-base-50, #747474)
-    );
-    --sds-c-inputtext-color-border: var(--slds-c-inputtext-color-border, var(--sds-g-color-neutral-base-80, #c9c9c9));
-    --sds-c-inputtext-sizing-border: var(--slds-c-inputtext-sizing-border);
-    --sds-c-inputtext-radius-border: var(--slds-c-inputtext-radius-border, var(--sds-g-radius-border-2, 0.25rem));
-
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-
-    /* TODO: Add global hook once SLDS creates a new spacing hook that equals the value needed here */
-    row-gap: 0.125rem;
-  }
+    :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(--sds-g-color-neutral-base-50, #747474)
+        );
+        --slds-c-icon-sizing: var(--slds-c-inputtext-icon-sizing, 14px);
+        --sds-c-inputtext-sizing-height: var(
+            --slds-c-inputtext-sizing-height,
+            var(--sds-g-sizing-9, 2rem)
+        );
+        --sds-c-inputtext-color-background: var(
+            --slds-c-inputtext-color-background,
+            var(--sds-g-color-neutral-base-100, #ffffff)
+        );
+        --sds-c-inputtext-color-background-focus: var(
+            --slds-c-inputtext-color-background-focus,
+            var(--sds-g-color-neutral-base-100, #ffffff)
+        );
+        --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
+        --sds-c-inputtext-font-size: var(
+            --slds-c-inputtext-font-size,
+            var(--sds-g-font-scale-neg-2, 0.8125rem)
+        );
+        --sds-c-inputtext-text-color-placeholder: var(
+            --slds-c-inputtext-text-color-placeholder,
+            var(--sds-g-color-neutral-base-50, #747474)
+        );
+        --sds-c-inputtext-color-border: var(
+            --slds-c-inputtext-color-border,
+            var(--sds-g-color-neutral-base-80, #c9c9c9)
+        );
+        --sds-c-inputtext-sizing-border: var(--slds-c-inputtext-sizing-border);
+        --sds-c-inputtext-radius-border: var(
+            --slds-c-inputtext-radius-border,
+            var(--sds-g-radius-border-2, 0.25rem)
+        );
+
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+    }
 
-  /**
+   /**
+   * Input Container
+   */
+    :host([data-render-mode="shadow"]) [part~='input-container'] {
+        flex: 1 0 100%;
+        align-items: stretch;
+    }
+
+    :host([data-render-mode="shadow"]) [part~='input-container'][type~='range'] {
+        border: none;
+        display: inline-block;
+    }
+
+    :host([data-render-mode="shadow"]) [part~='input'][type~='range'] {
+        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(--sds-g-color-brand-base-60, #1b96ff);
+        --sds-c-inputtext-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
+        --sds-c-inputtext-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
+
+        outline: 0;
+        border-width: var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1, 1px));
+        border-color: var(--sds-c-inputtext-color-border, var(--sds-g-color-neutral-base-contrast-3));
+    }
+
+   /**
+   * Input
+   */
+    :host([data-render-mode="shadow"]) [part~='input'] {
+        padding-inline-start: var(
+            --slds-c-inputtext-spacing-inline-start,
+            var(--sds-g-spacing-3, 0.75rem));
+        padding-inline-end: var(
+            --slds-c-inputtext-spacing-inline-end,
+            var(--sds-g-spacing-4, 1rem));
+        height: unset;
+        font-family: var(--sds-g-font-family, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol');
+    }
+
+   /**
+   * Focus / active State
+   */
+    :host([data-render-mode="shadow"]) [part~="input-container"]:focus-within,:host([data-render-mode="shadow"]) 
+    [part~="input-container"]:active {
+      --sds-c-inputtext-color-border: var(--sds-g-color-brand-base-60, #1b96ff);
+      --sds-c-inputtext-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
+      --sds-c-inputtext-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
+
+      outline: 0;
+    }
+
+   /**
    * Read Only State
    */
-  :host([data-render-mode="shadow"][readonly]) [part~='input-text'] {
-    --sds-c-inputtext-spacing-inline-start-readonly: 0;
-    --slds-c-inputtext-color-border: transparent;
-    --slds-c-inputtext-color-background: transparent;
-  }
+    :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;
+    }
 
-  /**
+    /**
    * Invalid State
    *
    * Does not use --sds-c-inputtext-color-border-invalid due to this hook being
    * tied to :host([aria-invalid]) which this subsystem does not use. Instead, it
    * uses :host([invalid]).
    */
-  :host([data-render-mode="shadow"][invalid]) [part~='input-text'] {
-    --slds-c-inputtext-color-border: var(--sds-g-color-error-base-50, #ea001e);
-    --slds-c-inputtext-sizing-border: var(--sds-g-sizing-border-2, 2px);
-    --slds-c-icon-color-foreground: var(--sds-g-color-error-base-50, #ea001e);
-  }
+    :host([data-render-mode="shadow"][invalid]) [part~='input-text'] {
+        --sds-c-inputtext-shadow: 0 0 0 var(--sds-g-sizing-border-1, 1px) inset
+            var(--sds-g-color-error-base-50, #ea001e);
+        --slds-c-inputtext-color-border: var(--sds-g-color-error-base-50, #ea001e);
+        --slds-c-icon-color-foreground: var(--sds-g-color-error-base-50, #ea001e);
+    }
 
-  /**
+    /**
+   * Invalid State - Focus
+   *
+   * The following styling hooks are included in SDS and need to be reassigned
+   * 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(--sds-g-color-error-base-50, #ea001e) 0 0 0 var(--sds-g-sizing-border-1, 1px) inset,
+        0 0 var(--sds-g-sizing-border-3, 3px) var(--sds-g-color-brand-base-50, #0176d3);
+      --sds-c-inputtext-color-border: var(--sds-g-color-error-base-50, #ea001e);
+    }
+
+    /**
    * 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;
-  }
+    :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(--sds-g-color-neutral-base-95, #f3f3f3);
+        --sds-c-inputtext-color-border: var(--sds-g-color-neutral-base-80, #c9c9c9);
+        --sds-c-inputtext-text-color: var(--sds-g-color-neutral-base-50, #747474);
+    }
 
-  /**
+    /**
    * Label
    *
    * Add [part~='input-text'] to increase specificity and
    * avoid collisions with other components using [part~='label'] (e.g. slds-input-checkbox)
    */
-  :host([data-render-mode="shadow"]) [part~='input-text'] [part~='label'] {
-    padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
-    color: var(--slds-c-inputtext-label-color, var(--sds-g-color-neutral-base-30, #444444));
-    font-size: var(--slds-c-inputtext-label-font-size, var(--sds-g-font-scale-neg-3, 0.75rem));
-
-    /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */
-    display: inline-flex;
-
-    /* TODO: Add global hook once SLDS creates a new spacing hook that equals the value needed here */
-    column-gap: 0.125rem;
-  }
-
-  /**
-   * Label's Required Symbol
-   */
-  :host([data-render-mode="shadow"]) [part~='label'] [title='required'] {
-    color: var(--sds-g-color-error-base-50, #ea001e);
-  }
-
-  /**
-   * Input Container
-   */
-  :host([data-render-mode="shadow"]) [part~='input-container'] {
-    flex: 1 0 100%;
-  }
-
-  /**
-   * Help Text
-   *
-   * Note: not to be confused with lightning-helptext. This is for the text
-   *       that goes below the input.
-   */
-  :host([data-render-mode="shadow"]) [part~='help-text'] {
-    font-size: var(--slds-c-inputtext-helptext-font-size, var(--sds-g-font-scale-neg-3, 0.75rem));
-
-    /* TODO: Add global hook once SLDS creates a new spacing hook that equals the value needed here */
-    padding-block-start: 0.125rem;
-  }
-
-  /**
-   * Help Text's Invalid State – Part container is unique to SLDS
-   */
-  :host([data-render-mode="shadow"][invalid]) [part~='help-text'] {
-    color: var(--sds-g-color-error-base-50, #ea001e);
-  }
+    :host([data-render-mode="shadow"]) [part~='input-text'] [part~='label'] {
+        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+        padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+        color: var(
+            --slds-c-inputtext-label-color,
+            var(--sds-g-color-neutral-base-30, #444444)
+        );
+        font-size: var(
+            --slds-c-inputtext-label-font-size,
+            var(--sds-g-font-scale-neg-3, 0.75rem)
+        );
+        margin-block-end: var(--sds-g-sizing-1, 0.125rem);
+
+        /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */
+        display: inline-flex;
+    }
 
-  /**
+    /**
    * Start
    *
    * Only expects an SLDS icon. We assign the SLDS Icon Styling Hook here
    * so we don't add spacing to other icons composed in the component, e.g.,
    * the icon in the inline help text.
    */
-  :host([data-render-mode="shadow"]) [part~='start'] {
-    --slds-c-icon-spacing-inline-end: var(--sds-g-spacing-2, 0.5rem);
-  }
+    :host([data-render-mode="shadow"]) [part~='start'] {
+        --slds-c-icon-spacing-inline-end: var(--sds-g-spacing-2, 0.5rem);
+    }
 
-  /**
+    /**
    * Label Inline Variant
    *
    * Note: all the 33% values you see are remnants of legacy SLDS. We need to
@@ -241,47 +296,103 @@
    *
    * Ref: https://github.com/salesforce-ux/design-system-internal/blob/240-winter-23/ui/components/form-element/horizontal/_index.scss#L63
    */
-  @media (min-width: 48em) {
-    :host([data-render-mode="shadow"][variant~='label-inline']) [part~='input-text'] {
-      display: block;
+    @media (min-width: 48em) {
+        :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;
+
+            /* TODO: Get rid of these magic numbers */
+            max-width: calc(33% - 1.125rem);
+            padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+        }
+
+        :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(--sds-g-spacing-1, 0.25rem);
+        }
+    }
+
+    :host([data-render-mode="shadow"]) input[type="search"] + lightning-primitive-icon::part(icon) {
+        left: var(--sds-g-spacing-3, 0.75rem);
+        fill: var(--slds-g-color-neutral-base-50, #747474);
+    }
+    
+    :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-button_icon {
+        background-color: transparent;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-inline']) [part~='label'] {
-      float: left;
+    :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(--sds-g-color-brand-base-30, #014486);
+    }
 
-      /* TODO: Get rid of these magic numbers */
-      max-width: calc(33% - 1.125rem);
-      padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+    :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;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-inline']) [part~='input-container'] {
-      margin-inline-start: 33%;
+    /**
+   * Has Icon Left
+   */
+    :host([data-render-mode="shadow"]) .slds-input-has-icon_left {
+        --slds-c-inputtext-spacing-inline-start: var(--sds-g-spacing-6, 2rem);
     }
 
-    :host([data-render-mode="shadow"][variant~='label-inline']) [part~='inline-help'] {
-      float: left;
-      padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+    :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(--sds-g-spacing-3, 0.75rem);
     }
-  }
-}
 
-/**
+    /**
+   * Has Icon Right
+   */
+    :host([data-render-mode="shadow"]) .slds-input-has-icon_right {
+        --slds-c-inputtext-spacing-inline-end: var(--sds-g-spacing-6, 2rem);
+    }
+
+    :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(--sds-g-spacing-3, 0.75rem);
+    }
+
+    /**
+   * Has Icon Left & Right
+   */
+    :host([data-render-mode="shadow"]) .slds-input-has-icon_left-right {
+        --slds-c-inputtext-spacing-inline-start: var(--sds-g-spacing-6, 2rem);
+        --slds-c-inputtext-spacing-inline-end: var(--sds-g-spacing-6, 2rem);
+    }
+   
+  /**
  * A temporarily baked-in utility class until SLDS gets a proper utility package.
  *
  * This is a hybrid patch between synthetic and native shadow. The ideal final
  * outcome is the removal of this class and replacing the class with the SLDS
  * 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;
+  :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;
+  }
 }

package/src/lightning/input/input.css

@@ -1,6 +1,7 @@
 /* @import 'lightning/sldsCommon';
 @import './input-text.slds.css';
-@import './input-checkbox.slds.css'; */
+@import './input-checkbox.slds.css';
+@import './form-element.slds.css'; */
 
 :host {
     display: block;

package/src/lightning/input/input.html

@@ -75,7 +75,6 @@
                     onblur={handleBlur}
                     onfocus={handleFocus}
                     onchange={handleChange}
-                    onclick={handleCheckboxClick}
                     name={name}
                     required={required}
                     readonly={readOnly}
@@ -106,7 +105,7 @@
                             <abbr class="slds-required" title={i18n.required}>*</abbr>
                         </template>
                     </template>
-                    <input type="checkbox"
+                    <input type="checkbox" 
                         part="checkbox"
                         id="checkbox"
                         aria-label={computedAriaLabel}
@@ -115,7 +114,6 @@
                         onblur={handleBlur}
                         onfocus={handleFocus}
                         onchange={handleChange}
-                        onclick={handleCheckboxClick}
                         name={name}
                         required={required}
                         readonly={readOnly}
@@ -144,7 +142,6 @@
                 onblur={handleBlur}
                 onfocus={handleFocus}
                 onchange={handleChange}
-                onclick={handleCheckboxClick}
                 name={name}
                 required={required}
                 readonly={readOnly}
@@ -280,7 +277,8 @@
             message-when-value-missing={messageWhenValueMissing}
             message-when-range-overflow={messageWhenRangeOverflow}
             message-when-range-underflow={messageWhenRangeUnderflow}
-            disabled={disabled}>
+            disabled={disabled}
+            root-aria-node={templateRootNode}>
         </lightning-datepicker>
     </template>
 
@@ -305,7 +303,8 @@
             message-when-value-missing={messageWhenValueMissing}
             message-when-range-overflow={messageWhenRangeOverflow}
             message-when-range-underflow={messageWhenRangeUnderflow}
-            disabled={disabled}>
+            disabled={disabled}
+            root-aria-node={templateRootNode}>
         </lightning-timepicker>
     </template>
 
@@ -339,11 +338,12 @@
             message-when-value-missing={messageWhenValueMissing}
             message-when-range-overflow={messageWhenRangeOverflow}
             message-when-range-underflow={messageWhenRangeUnderflow}
-            disabled={disabled}>
+            disabled={disabled}
+            root-aria-node={templateRootNode}>
         </lightning-datetimepicker>
     </template>
 
     <template if:true={_helpMessage}>
-        <div id="help-message" class={computedHelpMessageClass} data-help-message role="alert" part="help-text">{_helpMessage}</div>
+        <div id="help-message" class="slds-form-element__help" data-help-message role="alert" part="help-text">{_helpMessage}</div>
     </template>
 </template>