lightning-base-components 1.18.5-alpha → 1.18.7-alpha

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

@@ -1,281 +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 */
-  @supports (--styling-hooks: '') {
-    /* TODO: Swap with utility classes */
-    :host([data-render-mode="shadow"]) fieldset {
-      border: 0;
-      margin: 0;
-      padding: 0;
-    }
-
-    /* FORM ELEMENT: BASE */
-    :host([data-render-mode="shadow"]) .slds-form-element {
-        position: relative;
-        min-width: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__label {
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-        hyphens: auto;
-        display: inline-block;
-        color: var(--sds-g-color-neutral-base-30, #444444);
-        font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
-        padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
-        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
-        margin-block-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__label:empty {
-        margin: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__control {
-        clear: left; /* NOTE: Ideally we want left to be inline-start but browser support is not ready for that value. We need to figure out better RTL support */
-        position: relative;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__icon {
-        display: inline-block;
-        position: relative;
-        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
-        vertical-align: top;
-        line-height: var(--sds-g-font-lineheight-1, 1);
-        z-index: 1;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__icon .slds-button_icon {
-        position: relative;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__help,:host([data-render-mode="shadow"]) 
-    .slds-form-element__helper {
-        font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
-        margin-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-        display: block;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_edit .slds-form-element__static {
-        width: calc(100% - var(--sds-g-sizing-7, 1.5rem));
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_readonly {
-        flex-basis: 0%;
-        border-bottom: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
-        margin-block-end: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__control {
-        padding-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-        padding-block-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__label {
-        margin-block-end: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__legend {
-        font-weight: var(--sds-g-font-weight-7, 700);
-        float: left;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__addon {
-        display: inline-block;
-        margin-block-start: 0;
-        margin-block-end: 0;
-        margin-inline-start: var(--sds-g-spacing-2, 0.5rem);
-        margin-inline-end: var(--sds-g-spacing-2, 0.5rem);
-        align-self: center;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__static {
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-        word-break: break-word;
-        display: inline-block;
-        font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
-        font-weight: var(--sds-g-font-weight-4, 400);
-        color: var(--sds-g-color-neutral-base-10, #181818);
-        width: 100%;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__static.slds-text-longform *:last-child {
-        margin-block-end: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__static:empty {
-        min-height: calc(var(--sds-g-sizing-6, 1.25rem) + 1px);
-        vertical-align: bottom;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__static--edit {
-        width: calc(100% - var(--sds-g-sizing-7, 1.5rem));
-    }
-
-    :host([data-render-mode="shadow"]) .slds-required {
-        color: var(--sds-g-color-error-base-50, #ea001e);
-        margin-block-start: 0;
-        margin-block-end: 0;
-        margin-inline-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-        margin-inline-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-has-error .slds-form-element__help {
-        color: var(--sds-g-color-error-base-50, #ea001e);
-    }
-
-    :host([data-render-mode="shadow"][invalid]) .slds-form-element__help {
-        color: var(--sds-g-color-error-base-50, #ea001e);
-    }
-
-    /* --------------------------------------- */
-
-    /* FORM ELEMENT: STACKED */
-
-    :host([data-render-mode="shadow"][variant~='label-stacked']) {
-        display: block;
-    }
-
-    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
-
-    /* :host([variant~='label-stacked']):not(.slds-form-element_readonly) {
-        margin-block-end: var(--sds-g-spacing-2);
-    }
-
-    :host([variant~='label-stacked']):not(.slds-is-editing) {
-        padding: 0 var(--sds-g-spacing-1);
-    } */
-
-    /* :host([variant~='label-stacked']):not([class*="slds-size"]) {
-          width: 100%;
-          flex-basis: 100%;
-    } */
-
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element {
-        padding: 0;
-        margin-block-end: 0;
-    }
-
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
-        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
-        padding-inline-start: 0;
-    }
-
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
-        width: 100%;
-        flex-basis: 100%;
-        clear: left;
-    }
-
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__icon {
-        float: none;
-        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
-    }
-
-    /* --------------------------------------- */
-
-    /* FORM ELEMENT: INLINE */
-
-    :host([data-render-mode="shadow"][variant~='label-inline']) {
-        display: block;
-    }
-
-    /*
-    we have to combine with slds class here to avoid duplication
-    of this rule in child elements who import this stylesheet
-    in lighting-input this slds class is synonymous with the variant
-    */
-
-    :host([data-render-mode="shadow"][variant~='label-inline'].slds-form-element_horizontal) {
-        padding: var(--sds-g-spacing-1, 0.25rem);
-        margin-block-end: var(--sds-g-spacing-2, 0.5rem);
-    }
-
-    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
-
-    /* :host([variant~='label-inline']):not(.slds-form-element_readonly) {
-        margin-block-end: var(--sds-g-spacing-2);
-    }
-
-    :host([variant~='label-inline']):not([class*="slds-size"]) {
-        width: 100%;
-        flex-basis: 100%;
-    }
-
-    :host([variant~='label-inline']:not(.slds-is-editing)) {
-        padding: var(--sds-g-spacing-1);
-    } */
-
-    :host([data-render-mode="shadow"][variant~='label-inline']).slds-is-edited {
-        padding-block-start: var(--sds-g-sizing-6, 1.25rem)
-    }
-
-    @media (min-width: 48em) {
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__label {
-          float: left;
-          max-width: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Removing icon width for when the help-text icon is present */
-          flex-basis: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Some form element controls are set to display:flex */
-          flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */
-          margin-block-end: 0;
-          position: relative;
-          z-index: 1;
-        }
-
-        :host([data-render-mode="shadow"][variant~='label-inline']) lightning-helptext {
-          float: left;
-        }
-
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control {
-          margin-inline-start: 33%;
-          clear: none; /* Reset clear: left when switching to horizontal form layout */
-        }
-
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control .slds-form-element__control {
-          padding-inline-start: 0; /* Remove left padding on nested form controls, due to issues related to lightning-form components */
-        }
-
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list__column .slds-form-element__label {
-            width: auto;
-            max-width: 100%;
-            -ms-flex-preferred-size: auto;
-            flex-basis: auto;
-            float: none;
-            position: relative;
-            padding-inline-start: 0;
-            margin-block-end: 0;
-        }
-
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__help {
-          margin-inline-start: 33%;
-        }
-
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list {
-            clear: none;
-        }
-    }
-
-    /* --------------------------------------- */
-
-    /* FORM ELEMENT: COMPOUND */
-
-    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row {
-      display: flex;
-      margin-bottom: var(--sds-g-spacing-1, 0.25rem);
-      margin-left: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
-      margin-right: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row .slds-form-element__label {
-      padding-top: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element {
-      padding-left: var(--sds-g-spacing-1, 0.25rem);
-      padding-right: var(--sds-g-spacing-1, 0.25rem);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
-      align-items: flex-end;
-    }
-}

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

@@ -1,398 +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-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;
-        --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'] {
-        --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;
-        --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-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);
-    }
-
-    /**
-   * 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);
-        }
-    }
-
-    :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"]) .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);
-    }
-
-    :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;
-    }
-
-    /**
-   * 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"]) .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;
-  }
-}

package/src/lightning/primitiveInputSimple/primitiveInputSimple.css

@@ -1,9 +0,0 @@
-@import 'lightning/sldsCommon';
-@import './input-text.slds.css';
-@import './form-element.slds.css';
-
-input[type="tel"]:dir(rtl) {
-    direction: ltr;
-    text-align: right;
-    unicode-bidi: embed;
-}