lightning-base-components 1.18.1-alpha → 1.18.3-alpha

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

@@ -1,404 +0,0 @@
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
-
-:host([data-render-mode="shadow"]) {
-  /**
-   * Host mapping to composed sds-icon
-   *
-   * Static fallbacks in place for accessibility
-   */
-  --sds-c-icon-color-background: var(
-    --sds-c-inputcheckbox-color-background,
-    var(--sds-s-input-color-background, var(--sds-g-color-neutral-base-1))
-  );
-  --sds-c-icon-color-foreground: var(--sds-c-inputcheckbox-mark-color-foreground, transparent);
-  --sds-c-icon-color-border: var(
-    --sds-c-inputcheckbox-color-border,
-    var(--sds-s-input-color-border, var(--sds-g-color-neutral-base-contrast-4))
-  );
-  --sds-c-icon-sizing: var(--sds-c-inputcheckbox-sizing, 1rem);
-  --sds-c-icon-spacing: var(--sds-c-inputcheckbox-spacing);
-  --sds-c-icon-radius-border: var(--sds-c-inputcheckbox-radius-border, var(--sds-s-input-radius-border));
-}
-
-:host([data-render-mode="shadow"]:hover) {
-  --sds-c-inputcheckbox-mark-color-foreground: var(--sds-c-inputcheckbox-mark-color-foreground-hover);
-  --sds-c-inputcheckbox-color-background: var(
-    --sds-c-inputcheckbox-color-background-hover,
-    var(--sds-s-input-color-background-hover)
-  );
-  --sds-c-inputcheckbox-color-border: var(
-    --sds-c-inputcheckbox-color-border-hover,
-    var(--sds-s-input-color-border-hover)
-  );
-  --sds-c-inputcheckbox-label-color: var(--sds-c-inputcheckbox-label-color-hover);
-}
-
-:host([data-render-mode="shadow"][checked]) {
-  --sds-c-inputcheckbox-mark-color-foreground: var(
-    --sds-c-inputcheckbox-mark-color-foreground-checked,
-    var(--sds-g-color-neutral-base-1)
-  );
-  --sds-c-inputcheckbox-color-background: var(
-    --sds-c-inputcheckbox-color-background-checked,
-    var(--sds-g-color-neutral-base-contrast-4)
-  );
-  --sds-c-inputcheckbox-color-border: var(
-    --sds-c-inputcheckbox-color-border-checked,
-    var(--sds-g-color-neutral-base-contrast-4)
-  );
-  --sds-c-inputcheckbox-label-color: var(--sds-c-inputcheckbox-label-color-checked);
-}
-
-:host([data-render-mode="shadow"][checked]:hover) {
-  --sds-c-inputcheckbox-mark-color-foreground-checked: var(
-    --sds-c-inputcheckbox-mark-color-foreground-checked-hover
-  );
-  --sds-c-inputcheckbox-color-background-checked: var(--sds-c-inputcheckbox-color-background-checked-hover);
-  --sds-c-inputcheckbox-color-border-checked: var(--sds-c-inputcheckbox-color-border-checked-hover);
-  --sds-c-inputcheckbox-label-color-checked: var(
-    --sds-c-inputcheckbox-label-color-checked-hover,
-    var(--sds-c-inputcheckbox-label-color-hover)
-  );
-}
-
-:host([data-render-mode="shadow"][indeterminate]) {
-  --sds-c-inputcheckbox-mark-color-foreground: var(
-    --sds-c-inputcheckbox-mark-color-foreground-indeterminate,
-    #fff
-  );
-  --sds-c-inputcheckbox-color-background: var(
-    --sds-c-inputcheckbox-color-background-indeterminate,
-    var(--sds-s-input-color-background, #111)
-  );
-  --sds-c-inputcheckbox-color-border: var(
-    --sds-c-inputcheckbox-color-border-indeterminate,
-    var(--sds-s-input-color-border, #111)
-  );
-  --sds-c-inputcheckbox-label-color: var(--sds-c-inputcheckbox-label-color-indeterminate);
-}
-
-:host([data-render-mode="shadow"][indeterminate]:hover) {
-  --sds-c-inputcheckbox-mark-color-foreground-indeterminate: var(
-    --sds-c-inputcheckbox-mark-color-foreground-indeterminate-hover
-  );
-  --sds-c-inputcheckbox-color-background-indeterminate: var(
-    --sds-c-inputcheckbox-color-background-indeterminate-hover
-  );
-  --sds-c-inputcheckbox-color-border-indeterminate: var(
-    --sds-c-inputcheckbox-color-border-indeterminate-hover
-  );
-  --sds-c-inputcheckbox-label-color-indeterminate: var(
-    --sds-c-inputcheckbox-label-color-indeterminate-hover,
-    var(--sds-c-inputcheckbox-label-color-hover)
-  );
-}
-
-:host([data-render-mode="shadow"][focus-visible]) {
-  --sds-c-inputcheckbox-shadow: var(
-    --sds-c-inputcheckbox-shadow-focus,
-    var(--sds-s-input-shadow-focus, 0 0 4px 1px var(--sds-g-color-palette-blue-50, #0176d3))
-  );
-}
-
-:host([data-render-mode="shadow"][disabled]) {
-  --sds-c-inputcheckbox-color-background: var(
-    --sds-c-inputcheckbox-color-background-disabled,
-    var(--sds-s-input-color-background-disabled, #efefef)
-  );
-
-  /* TODO: Add shared border hook when available: https://github.com/salesforce-ux/salesforce-design-system/issues/272 */
-  --sds-c-inputcheckbox-color-border: var(--sds-c-inputcheckbox-color-border-disabled, #666);
-  --sds-c-inputcheckbox-label-color: var(--sds-c-inputcheckbox-label-color-disabled);
-}
-
-:host([data-render-mode="shadow"][error]) {
-  --sds-c-inputcheckbox-mark-color-foreground: var(--sds-c-inputcheckbox-mark-color-foreground-error);
-  --sds-c-inputcheckbox-color-background: var(--sds-c-inputcheckbox-color-background-error);
-  --sds-c-inputcheckbox-color-border: var(--sds-c-inputcheckbox-color-border-error);
-  --sds-c-inputcheckbox-label-color: var(--sds-c-inputcheckbox-label-color-error);
-}
-
-:host([data-render-mode="shadow"][disabled][checked]) {
-  --sds-c-inputcheckbox-mark-color-foreground: var(
-    --sds-c-inputcheckbox-mark-color-foreground-disabled,
-    #666
-  );
-}
-
-:host([data-render-mode="shadow"][error][focus-visible]) {
-  --sds-c-inputcheckbox-shadow: var(
-    --sds-c-inputcheckbox-shadow-error-focus,
-    0 0 4px 1px var(--sds-g-color-palette-blue-50, #0176d3)
-  );
-}
-
-:host([data-render-mode="shadow"]) [part~='input-checkbox'] {
-  display: inline-flex;
-  align-items: center;
-}
-
-:host([data-render-mode="shadow"]) [part~='indicator'] {
-  display: inline-flex;
-  align-items: center;
-  box-shadow: var(--sds-c-inputcheckbox-shadow, var(--sds-s-input-shadow));
-}
-
-/**
- * Size and position the input on top of our icon for accessibility
- */
-
-:host([data-render-mode="shadow"]) [part~='checkbox'] {
-  position: absolute;
-  height: calc(
-    var(--sds-c-inputcheckbox-sizing, 1rem) + (var(--sds-c-inputcheckbox-sizing-border, 1px) * 2) +
-      var(--sds-c-inputcheckbox-spacing, 0px)
-  );
-  width: calc(
-    var(--sds-c-inputcheckbox-sizing, 1rem) + (var(--sds-c-inputcheckbox-sizing-border, 1px) * 2) +
-      var(--sds-c-inputcheckbox-spacing, 0px)
-  );
-  opacity: 0.00001;
-}
-
-:host([data-render-mode="shadow"]) [part~='label'] {
-  padding-inline-start: var(--sds-c-inputcheckbox-label-spacing-inline-start);
-  color: var(--sds-c-inputcheckbox-label-color);
-}
-
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
-
-@supports (--styling-hooks: '') {
-  /**
-     * Base
-     */
-  :host([data-render-mode="shadow"]) [part~='input-checkbox'] {
-    /* Label */
-    --sds-c-inputcheckbox-label-spacing-inline-start: var(
-      --slds-c-inputcheckbox-label-spacing-inline-start,
-      var(--sds-g-spacing-2, 0.5rem)
-    );
-
-    /* We need 'flex' instead of SDS's 'inline-flex' for the responsive label-inline variant */
-    display: flex;
-  }
-
-  /**
-     * Label Container
-     */
-  :host([data-render-mode="shadow"]) [part~='label-container'] {
-    display: inline-flex;
-    align-items: center;
-    font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
-
-    /* Accounts for help-text in same row as label */
-    padding-inline-end: var(--sds-g-spacing-1, 0.25rem);
-  }
-
-  /**
-     * Label
-     *
-     * Add [part~='input-checkbox'] to increase specificity and
-     * avoid collisions with other components using [part~='label'] (e.g. slds-input-text)
-     */
-  :host([data-render-mode="shadow"]) [part~='input-checkbox'] [part~='label'] {
-    color: var(--slds-c-inputcheckbox-label-color, var(--sds-g-color-neutral-base-30, #444444));
-  }
-
-  /**
-     * Checkbox
-     *
-     * Hidden from view, see Indicator for visual faux checkbox.
-     */
-  :host([data-render-mode="shadow"]) [part~='checkbox'] {
-    width: 1px;
-    height: 1px;
-    border: 0;
-    clip: rect(0 0 0 0);
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    pointer-events: auto;
-  }
-
-  /**
-     * Required Marker
-     *
-     * Extra specificity required due to SDS having too much specificity (@TODO: fix SDS specificity)
-     */
-  :host([data-render-mode="shadow"]) abbr[title='required'] {
-    color: var(--sds-g-color-error-base-50, #ea001e);
-    padding-right: var(--sds-g-spacing-1, 0.25rem);
-    text-decoration: none;
-  }
-
-  /**
-     * Checkbox Indicator
-     *
-     * ┌────────────────────┐  ┌─────────────────────┐
-     * │      sds-icon      │  │   Faux via <span>   │
-     * └────────────────────┘  └─────────────────────┘
-     *           ▲                        ▲
-     * ┌────────────────────┐  ┌─────────────────────┐
-     * │ sds-input-checkbox │  │ slds-input-checkbox │
-     * └────────────────────┘  └─────────────────────┘
-     *
-     * sds-input-checkbox uses sds-icon for its visual checkbox indicator. SLDS
-     * + LBC uses a styled <span>. Due to this divergence, we require custom CSS.
-     */
-  :host([data-render-mode="shadow"]) [part~='indicator'] {
-    position: relative;
-    width: var(--slds-c-inputcheckbox-sizing, 1rem);
-    height: var(--slds-c-inputcheckbox-sizing, 1rem);
-    border-radius: var(--slds-c-inputcheckbox-radius-border, var(--sds-g-radius-border-1, 0.125rem));
-    border: var(--slds-c-inputcheckbox-sizing-border, var(--sds-g-sizing-border-1, 1px)) solid
-      var(--slds-c-inputcheckbox-color-border, var(--sds-g-color-neutral-base-80, #c9c9c9));
-    background-color: var(--slds-c-inputcheckbox-color-background, var(--sds-g-color-neutral-base-100, #ffffff));
-    box-shadow: var(--slds-c-inputcheckbox-shadow);
-    transition: border 0.1s linear, background-color 0.1s linear;
-  }
-
-  /**
-     * Checked
-     */
-  :host([data-render-mode="shadow"][checked]) [part~='indicator']::after {
-    content: '';
-    height: calc(var(--slds-c-inputcheckbox-sizing, 1rem) / 4);
-    width: calc(var(--slds-c-inputcheckbox-sizing, 1rem) / 2);
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0) rotate(-45deg);
-    border-bottom: 2px solid
-      var(--slds-c-inputcheckbox-mark-color-foreground, var(--sds-g-color-brand-base-50, #0176d3));
-    border-left: 2px solid var(--slds-c-inputcheckbox-mark-color-foreground, var(--sds-g-color-brand-base-50, #0176d3));
-  }
-
-  :host([data-render-mode="shadow"][checked]) [part~='indicator'] {
-    --slds-c-inputcheckbox-color-background: var(--slds-c-inputcheckbox-color-background-checked);
-    --slds-c-inputcheckbox-color-border: var(--slds-c-inputcheckbox-color-border-checked);
-  }
-
-  /**
-     * Disabled
-     */
-  :host([data-render-mode="shadow"][disabled]) [part~='indicator'] {
-    --slds-c-inputcheckbox-color-background: var(
-      --slds-c-inputcheckbox-color-background-disabled,
-      var(--sds-g-color-neutral-base-95, #f3f3f3)
-    );
-    --slds-c-inputcheckbox-color-border: var(--slds-c-inputcheckbox-color-border-disabled);
-    --slds-c-inputcheckbox-mark-color-foreground: var(
-      --slds-c-inputcheckbox-mark-color-foreground-disabled,
-      var(--sds-g-color-neutral-base-60, #939393)
-    );
-  }
-
-  /**
-     * Focused
-     */
-  :host([data-render-mode="shadow"]:focus-within) [part~='indicator'] {
-    --slds-c-inputcheckbox-color-background: var(--slds-c-inputcheckbox-color-background-focus);
-    --slds-c-inputcheckbox-color-border: var(
-      --slds-c-inputcheckbox-color-border-focus,
-      var(--sds-g-color-brand-base-50, #0176d3)
-    );
-    --slds-c-inputcheckbox-shadow: var(
-      --slds-c-inputcheckbox-shadow-focus,
-      0 0 3px var(--sds-g-color-brand-base-50, #0176d3)
-    );
-  }
-
-  /**
-     * Invalid
-     */
-  :host([data-render-mode="shadow"][invalid]) [part~='indicator'] {
-    --slds-c-inputcheckbox-color-background: var(--slds-c-inputcheckbox-color-background-invalid);
-    --slds-c-inputcheckbox-sizing-border: var(
-      --slds-c-inputcheckbox-sizing-border-invalid,
-      var(--sds-g-sizing-border-2, 2px)
-    );
-    --slds-c-inputcheckbox-color-border: var(
-      --slds-c-inputcheckbox-color-border-invalid,
-      var(--sds-g-color-error-base-50, #ea001e)
-    );
-    --slds-c-inputcheckbox-mark-color-foreground: var(
-      --slds-c-inputcheckbox-mark-color-foreground-invalid,
-      var(--sds-g-color-error-base-50, #ea001e)
-    );
-  }
-
-  :host([data-render-mode="shadow"][invalid]) [part~='help-text'] {
-    color: var(--slds-c-inputcheckbox-helptext-color-invalid, var(--sds-g-color-error-base-50, #ea001e));
-  }
-
-  /**
-     * Label Inline Variant
-     *
-     * @TODO: Remove magic number for MQ
-     */
-  @media (min-width: 48em) {
-    :host([data-render-mode="shadow"][variant~='label-inline']) [part~='label-container'] {
-      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);
-      padding-inline-start: var(--sds-g-spacing-1, 0.25rem);
-    }
-
-    :host([data-render-mode="shadow"][variant~='label-inline']) [part~='input-checkbox'] {
-      display: block;
-      margin-inline-start: 33%;
-      padding-block: var(--sds-g-spacing-1, 0.25rem);
-      margin-block-end: var(--sds-g-spacing-2, 0.5rem);
-    }
-
-    :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"][variant~='label-inline']) [part~='indicator'] {
-      /* @TODO: add change to SDS, removes line-height from display inline */
-      display: block;
-    }
-  }
-
-  /**
-     * Standalone Checkbox
-     *
-     * label-inline & label-stacked uses the "standalone" checkbox that lives outside the label
-     */
-  :host([data-render-mode="shadow"][variant~='label-inline']) [part~='checkbox'],:host([data-render-mode="shadow"][variant~='label-stacked']) [part~='checkbox'] {
-    width: 1rem;
-    height: 1rem;
-    margin: 0;
-    clip: auto;
-    opacity: 0;
-    z-index: 1;
-  }
-}
-
-/**
-   * 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;
-}

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

@@ -1,287 +0,0 @@
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
-
-/* The Input Control Container holds the `start` and `end` slot contents, as well as the input control itself */
-
-:host([data-render-mode="shadow"]) [part~='input-container'] {
-  display: flex;
-  align-items: center;
-  position: relative;
-  min-height: var(--sds-c-inputtext-sizing-height);
-  padding-inline-end: var(--sds-c-inputtext-spacing-inline-end, var(--sds-c-inputtext-spacing-inline));
-  padding-inline-start: var(--sds-c-inputtext-spacing-inline-start, var(--sds-c-inputtext-spacing-inline));
-  background-color: var(--sds-c-inputtext-color-background, var(--sds-g-color-neutral-base-1));
-  border-width: var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1, 1px));
-  border-style: solid;
-  border-color: var(--sds-c-inputtext-color-border, var(--sds-g-color-neutral-base-contrast-3));
-  border-radius: var(--sds-c-inputtext-radius-border);
-  box-shadow: var(--sds-c-inputtext-shadow);
-}
-
-/* The Input element (in markup) */
-
-:host([data-render-mode="shadow"]) [part~='input'] {
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  font-size: var(--sds-c-inputtext-font-size);
-  color: var(--sds-c-inputtext-text-color);
-  line-height: 1;
-  border: none;
-  background: transparent;
-}
-
-/* Placeholder Text */
-
-:host([data-render-mode="shadow"]) [part~='input']::placeholder {
-  color: var(--sds-c-inputtext-text-color-placeholder);
-  font-style: var(--sds-c-inputtext-font-style-placeholder);
-}
-
-/* Focus State */
-
-:host([data-render-mode="shadow"]) [part~='input-container']:focus-within {
-  --sds-c-inputtext-color-border: var(
-    --sds-c-inputtext-color-border-focus,
-    var(--sds-g-color-palette-blue-50, #0176d3)
-  );
-  --sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-focus, 0 0 3px var(--sds-g-color-palette-blue-50, #0176d3));
-  --sds-c-inputtext-color-background: var(--sds-c-inputtext-color-background-focus);
-  --sds-c-inputtext-text-color: var(--sds-c-inputtext-text-color-focus);
-}
-
-:host([data-render-mode="shadow"]) [part~='input']:focus {
-  outline: none;
-}
-
-/* Invalid state */
-
-:host([data-render-mode="shadow"][aria-invalid='true']) [part~='input-container'] {
-  --sds-c-inputtext-color-border: var(--sds-c-inputtext-color-border-invalid);
-  --sds-c-inputtext-color-background: var(--sds-c-inputtext-color-background-invalid);
-}
-
-:host([data-render-mode="shadow"][aria-invalid='true']) [part~='input'] {
-  --sds-c-inputtext-text-color: var(--sds-c-inputtext-text-color-invalid);
-}
-
-/* Valid State */
-
-:host([data-render-mode="shadow"][aria-invalid='false']) [part~='input-container'] {
-  --sds-c-inputtext-color-border: var(--sds-c-inputtext-color-border-valid);
-  --sds-c-inputtext-color-background: var(--sds-c-inputtext-color-background-valid);
-}
-
-:host([data-render-mode="shadow"][aria-invalid='false']) [part~='input'] {
-  --sds-c-inputtext-text-color: var(--sds-c-inputtext-text-color-valid);
-}
-
-/* Readonly State */
-
-:host([data-render-mode="shadow"][readonly]) [part~='input-container'] {
-  --sds-c-inputtext-sizing-border: var(--sds-c-inputtext-sizing-border-readonly);
-  --sds-c-inputtext-spacing-inline-start: var(
-    --sds-c-inputtext-spacing-inline-start-readonly,
-    var(--sds-c-inputtext-spacing-inline-readonly)
-  );
-  --sds-c-inputtext-spacing-inline-end: var(
-    --sds-c-inputtext-spacing-inline-end-readonly,
-    var(--sds-c-inputtext-spacing-inline-readonly)
-  );
-}
-
-/* Disabled State */
-
-:host([data-render-mode="shadow"][disabled]) [part~='input-container'] {
-  --sds-c-inputtext-text-color: #3e3e3c; /* TODO: Replace with Global Styling Hook Fallback */
-  --sds-c-inputtext-color-background: #ecebea; /* TODO: Replace with Global Styling Hook Fallback */
-  --sds-c-inputtext-color-border: #c9c7c5; /* TODO: Replace with Global Styling Hook Fallback */
-}
-
-@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;
-  }
-
-  /**
-   * 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;
-  }
-
-  /**
-   * 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);
-  }
-
-  /**
-   * 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;
-  }
-
-  /**
-   * 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);
-  }
-
-  /**
-   * 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);
-  }
-
-  /**
-   * Label Inline Variant
-   *
-   * Note: all the 33% values you see are remnants of legacy SLDS. We need to
-   * keep this implementation intact so visual output is the same when used
-   * in a form that has non-shadow components. Attempting to refactor to a
-   * modern solution like flex is proving tricky due to the presence of the
-   * optional inline-help and the input needing to have exactly 33% of spacing
-   * from the inline-start.
-   *
-   * 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;
-    }
-
-    :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);
-    }
-  }
-}
-
-/**
- * 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;
-}

package/src/lightning/input/normalize.js

@@ -1,6 +0,0 @@
-export function normalizeInput(value) {
-    if (typeof value === 'number' || typeof value === 'string') {
-        return String(value);
-    }
-    return '';
-}