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

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

@@ -0,0 +1,281 @@
+
+/* 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/datetimepicker/input-text.slds.css

@@ -0,0 +1,398 @@
+/* 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/dualListbox/dualListbox.css

@@ -1,7 +1,7 @@
-/* @import 'lightning/sldsCommon';
+@import 'lightning/sldsCommon';
 @import "./form-element.slds.css";
 @import './listbox.slds.css';
-@import './dual-listbox.slds.css'; */
+@import './dual-listbox.slds.css';
 
 :host {
     display: block;