@salesforcedevs/dx-components 0.54.5 → 0.55.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.54.5",
+    "version": "0.55.2",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -16,7 +16,6 @@
         "@vimeo/player": "^2.16.4",
         "classnames": "^2.2.6",
         "debounce": "^1.2.0",
-        "lightning-base-components": "1.12.3-alpha",
         "lodash.get": "^4.4.2",
         "microtip": "0.2.2"
     },

package/src/modules/dx/breadcrumbs/breadcrumbs.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { Breadcrumb, Option } from "typings/custom";
+import { Breadcrumb, OptionWithNested } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 
 type LabelMap = { [href: string]: string };
@@ -19,7 +19,7 @@ const toLabel = (val: string) => {
 export default class Breadcrumbs extends LightningElement {
     @api ariaLabel: string = "Navigation Breadcrumbs";
     @api baseHref: string = "/";
-    @api navItems: Option[] = [];
+    @api navItems: OptionWithNested[] = [];
     @api pathname: string = window.location.pathname;
     @api title: string = "Salesforce";
     @api logo: boolean = false;
@@ -42,19 +42,22 @@ export default class Breadcrumbs extends LightningElement {
     private _breadcrumbs!: Breadcrumb[];
 
     private get labelMap(): LabelMap {
-        const deepReducer = (options: Option[]) =>
-            options.reduce((acc: LabelMap, item: Option): LabelMap => {
-                if (item.options) {
-                    return { ...acc, ...deepReducer(item.options) };
-                }
-                if (!item.link) {
-                    return acc;
-                }
-                return {
-                    ...acc,
-                    [item.link.href]: item.label
-                };
-            }, {});
+        const deepReducer = (options: OptionWithNested[]) =>
+            options.reduce(
+                (acc: LabelMap, item: OptionWithNested): LabelMap => {
+                    if (item.options) {
+                        return { ...acc, ...deepReducer(item.options) };
+                    }
+                    if (!item.link) {
+                        return acc;
+                    }
+                    return {
+                        ...acc,
+                        [item.link.href]: item.label
+                    };
+                },
+                {}
+            );
         return this.navItems ? deepReducer(this.navItems) : {};
     }
 

package/src/modules/dx/button/button.css

@@ -108,6 +108,15 @@
     width: var(--dx-c-slot-empty-width, var(--dx-g-spacing-xl));
 }
 
+.button.size-hero {
+    font-size: var(--dx-g-text-lg);
+    height: 52px;
+}
+
+.button.size-hero.style-icon.slot-empty {
+    width: var(--dx-c-slot-empty-width, 52px);
+}
+
 /* primary */
 
 .button.variant_primary {

package/src/modules/dx/button/button.ts

@@ -17,7 +17,7 @@ export default class Button extends LightningElement {
     @api iconSymbol?: IconSymbol;
     @api iconPosition?: "right" | "left" = "right";
     @api loading: boolean = false;
-    @api size: "large" | "small" = "small";
+    @api size: "large" | "hero" | "small" = "small";
     @api variant: ButtonVariant = "primary";
     @api inlineTextColor: ButtonTextColor = "dark";
     @api font: "display" | "sans" = "display";

package/src/modules/dx/dropdown/dropdown.ts

@@ -1,11 +1,11 @@
-import { Option, PopperPlacement } from "typings/custom";
+import { OptionWithNested, PopperPlacement } from "typings/custom";
 import { LightningElement, api, track } from "lwc";
 import cx from "classnames";
 import get from "lodash.get";
 import { deepmapOptions } from "dxUtils/options";
 import { toJson } from "dxUtils/normalizers";
 
-interface DropdownOption extends Option {
+interface DropdownOption extends OptionWithNested {
     // link that gets shown as a highlighted link at end of option group
     calloutLink?: {
         href: string;

package/src/modules/dx/dropdownOption/dropdownOption.ts

@@ -1,10 +1,10 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { Option } from "typings/custom";
+import { OptionWithNested } from "typings/custom";
 import { track } from "dxUtils/analytics";
 
 export default class DropdownOption extends LightningElement {
-    @api option!: Option;
+    @api option!: OptionWithNested;
     @api suppressGtmNavHeadings: boolean = false;
     @api keyValue!: string;
     @api active: boolean = false;

package/src/modules/dx/footer/footer.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
+import { FooterVariant, OptionWithLink } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
-import { FooterVariant, Option } from "typings/custom";
 import {
     generalLinks,
     termsLinks,
@@ -31,7 +31,7 @@ export default class Footer extends LightningElement {
         this._locales = toJson(value);
     }
 
-    private _locales?: Option[] | null = null;
+    private _locales?: OptionWithLink[] | null = null;
     private termsLinks = termsLinks;
     private generalLinks = generalLinks;
     private socialLinks = socialLinks;

package/src/modules/dx/header/header.ts

@@ -1,10 +1,10 @@
 import { api } from "lwc";
+import type { OptionWithNested } from "typings/custom";
 import { HeaderBase } from "dxBaseElements/headerBase";
 import { toJson } from "dxUtils/normalizers";
-import type { Option } from "typings/custom";
 
 export default class Header extends HeaderBase {
-    private _breadcrumbs!: Option[];
+    private _breadcrumbs!: OptionWithNested[];
 
     @api
     get breadcrumbs() {

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { Option } from "typings/custom";
+import { OptionWithNested } from "typings/custom";
 import { deepmapOptions } from "dxUtils/options";
 
 export default class HeaderMobileNavMenu extends LightningElement {
@@ -9,7 +9,7 @@ export default class HeaderMobileNavMenu extends LightningElement {
     @api pathname: string | null = null;
 
     @api
-    set navItems(_navItems: Option[]) {
+    set navItems(_navItems: OptionWithNested[]) {
         this._navItems = _navItems;
     }
     get navItems() {
@@ -24,7 +24,7 @@ export default class HeaderMobileNavMenu extends LightningElement {
         // then we use deepmapper to affect the actual root options (actual links)
         return deepmapOptions(
             navItems,
-            (app: Option, index: number, level: number) => {
+            (app: OptionWithNested, index: number, level: number) => {
                 const active = app.link
                     ? app.link.href === this.pathname
                     : false;
@@ -47,7 +47,7 @@ export default class HeaderMobileNavMenu extends LightningElement {
         );
     }
 
-    private _navItems: Option[] = [];
+    private _navItems: OptionWithNested[] = [];
     private navElement: HTMLElement | null = null;
     private wasOpen: boolean = false;
     private showScrollShadow: boolean = false;

package/src/modules/dx/headerNav/headerNav.ts

@@ -1,18 +1,18 @@
 import { LightningElement, api } from "lwc";
-import { TabVariant, Option } from "typings/custom";
+import { TabVariant, OptionWithNested } from "typings/custom";
 export default class HeaderNav extends LightningElement {
     @api pathname: string | null = null;
     @api variant: TabVariant = "default";
     @api ariaLabel: string = "Primary Navigation";
 
     @api
-    set navItems(_navItems: Option[]) {
+    set navItems(_navItems: OptionWithNested[]) {
         this._navItems = _navItems;
     }
 
     get navItems() {
         const activeItem = this._navItems
-            .filter((navItem: Option) => {
+            .filter((navItem: OptionWithNested) => {
                 if (!navItem.link || navItem.link.href === "/") {
                     return false;
                 }
@@ -31,7 +31,7 @@ export default class HeaderNav extends LightningElement {
                     (b.link?.href.length || 0) - (a.link?.href.length || 0)
             )[0];
 
-        const items = this._navItems.map((navItem: Option) =>
+        const items = this._navItems.map((navItem: OptionWithNested) =>
             navItem.link
                 ? {
                       ...navItem,
@@ -45,7 +45,7 @@ export default class HeaderNav extends LightningElement {
         return items;
     }
 
-    private _navItems: Option[] = [];
+    private _navItems: OptionWithNested[] = [];
 
     private requestOpenNavMenu(e: PointerEvent) {
         const detail = (<HTMLButtonElement>e.currentTarget).getAttribute(

package/src/modules/dx/headerSearch/headerSearch.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { PopoverRequestCloseType, Option } from "typings/custom";
+import { PopoverRequestCloseType, OptionWithLink } from "typings/custom";
 import { buildSearchEngine } from "dxUtils/coveo";
 import {
     StandaloneSearchBox as StandaloneSearchBoxType,
@@ -28,7 +28,7 @@ export default class HeaderSearch extends LightningElement {
         return this.mobile ? null : "desktop_search-container";
     }
 
-    private get suggestions(): Option[] {
+    private get suggestions(): OptionWithLink[] {
         if (this.searchState) {
             return this.searchState.suggestions.map(
                 ({ highlightedValue }: { highlightedValue: string }) => ({

package/src/modules/dx/select/select.css

@@ -1,5 +1,3 @@
-@import "dxHelpers/slds";
-
 :host {
     display: block;
 }
@@ -8,7 +6,7 @@
     outline: none;
 }
 
-.slds-select_container::before {
+.select_container::before {
     --icon-size: 0.5em;
 
     border-style: solid;
@@ -24,21 +22,196 @@
     width: var(--icon-size);
 }
 
-.placeholder {
+.select-element_placeholder {
     color: var(--sds-g-gray-9);
 }
 
-select.slds-select:focus:not([disabled]),
-select.slds-select:active:not([disabled]) {
+select.select-element:focus:not([disabled]),
+select.select-element:active:not([disabled]) {
     border-width: 2px;
     border-color: var(--dx-g-blue-vibrant-50);
     box-shadow: none;
     -webkit-box-shadow: none;
 }
 
-:host(.slds-has-error) select.slds-select:focus,
-:host(.slds-has-error) select.slds-select:active {
+.has-error select.select-element:focus,
+.has-error select.select-element:active {
     border-color: #ea001e;
     box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
     -webkit-box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
 }
+
+@media (min-width: 48em) {
+    .form-element_horizontal .form-element_control {
+        padding-left: 33%;
+        clear: none;
+    }
+}
+
+abbr[title] {
+    border-bottom: 1px dotted;
+    text-decoration: none;
+    cursor: help;
+}
+
+abbr[title]::after {
+    content: " (" attr(title) ")";
+}
+
+abbr[title],
+fieldset,
+hr {
+    border: 0;
+}
+
+button,
+select {
+    text-transform: none;
+}
+
+.form-element_control {
+    clear: left;
+    position: relative;
+}
+
+.form-element_label {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -webkit-hyphens: auto;
+    -ms-hyphens: auto;
+    hyphens: auto;
+    display: inline-block;
+    color: #3e3e3c;
+    font-size: 0.75rem;
+    padding-right: 0.5rem;
+    padding-top: 0.25rem;
+    margin-bottom: 0.125rem;
+}
+
+.form-element_label:empty {
+    margin: 0;
+}
+
+.form-element_stacked .form-element_label,
+.form-element_stacked .form-element_control {
+    border-bottom: 0;
+    padding-left: 0;
+}
+
+.form-element_stacked .form-element_control {
+    width: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    clear: left;
+}
+
+.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;
+}
+
+.required-element {
+    color: #ea001e;
+    margin: 0 0.125rem;
+}
+
+.select-element {
+    height: calc(1.875rem + (1px * 2));
+    width: 100%;
+    border: 1px solid #dddbda;
+    border-radius: 0.25rem;
+    background-color: white;
+    -webkit-transition: border 0.1s linear, background-color 0.1s linear;
+    transition: border 0.1s linear, background-color 0.1s linear;
+}
+
+.select-element:focus,
+.select-element:active {
+    outline: 0;
+    border-color: #1b96ff;
+    background-color:white;
+    -webkit-box-shadow: 0 0 3px #0176d3;
+    box-shadow: 0 0 3px #0176d3;
+}
+
+.select-element[disabled],
+.select-element.slds-is-disabled {
+    background-color: #ecebea;
+    border-color: #c9c7c5;
+    color: #3e3e3c;
+    cursor: not-allowed;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    opacity: 1;
+}
+
+.select-element[disabled]:focus,
+.select-element[disabled]:active,
+.select-element.slds-is-disabled:focus,
+.select-element.slds-is-disabled:active {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.select-element[size] {
+    min-height: calc(1.875rem + (1px * 2));
+    height: inherit;
+}
+
+.select-element[size] option {
+    padding: 0.5rem;
+}
+
+.has-error .select-element {
+    border-color: #ea001e;
+    -webkit-box-shadow: #ea001e 0 0 0 1px inset;
+    box-shadow: #ea001e 0 0 0 1px inset;
+    background-clip: padding-box;
+}
+
+.select_container {
+    position: relative;
+}
+
+.select_container .select-element {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    padding-left: 0.5rem;
+    padding-right: 1.5rem;
+}
+
+.select_container .select-element::-ms-expand {
+    display: none;
+}
+
+.has-error .select-element:focus,
+.has-error .select-element:active {
+    -webkit-box-shadow: #ea001e 0 0 0 1px inset, 0 0 3px #0176d3;
+    box-shadow: #ea001e 0 0 0 1px inset, 0 0 3px #0176d3;
+}
+
+.form-element:not(.has-error) .select-element:required {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.form-element_help,
+.form-element_helper {
+    font-size: 0.75rem;
+    margin-top: 0.125rem;
+    display: block;
+}
+
+.has-error .form-element_help {
+    color: #ea001e;
+}

package/src/modules/dx/select/select.html

@@ -1,60 +1,57 @@
 <template>
-    <label class={computedLabelClass} for="select">
-        {label}
-        <template if:true={required}>
-            <abbr>*</abbr>
-        </template>
-    </label>
-
-    <div class="slds-form-element__control">
-        <div class="slds-select_container">
-            <select
-                autocomplete={autocomplete}
-                class={selectClass}
-                disabled={disabled}
-                id="select"
-                multiple={multiple}
-                name={name}
-                onblur={handleBlur}
-                onchange={handleChange}
-                onfocus={handleFocus}
-                required={required}
-                accesskey={accessKey}
-                size={size}
-            >
-                <template if:true={placeholder}>
-                    <option if:false={value} value="" disabled>
-                        {placeholder}
-                    </option>
-                </template>
-                <template for:each={options} for:item="option">
-                    <template if:true={option.disabled}>
-                        <option
-                            disabled
-                            key={option.value}
-                            value={option.value}
-                        >
-                            {option.label}
-                        </option>
+    <div class={containerClass}>
+        <label class="form-element_label" for="select">
+            {label}
+            <template if:true={required}>
+                <abbr>*</abbr>
+            </template>
+        </label>
+        <div class="form-element_control">
+            <div class="select_container">
+                <select
+                    autocomplete={autocomplete}
+                    class={selectClass}
+                    disabled={disabled}
+                    id="select"
+                    name={name}
+                    onblur={handleBlur}
+                    onchange={handleChange}
+                    onfocus={handleFocus}
+                    required={required}
+                    accesskey={accessKey}
+                    size={size}
+                >
+                    <template if:true={placeholder}>
+                        <option value="" disabled>{placeholder}</option>
                     </template>
-                    <template if:false={option.disabled}>
-                        <option key={option.value} value={option.value}>
-                            {option.label}
-                        </option>
+                    <template for:each={options} for:item="option">
+                        <template if:true={option.disabled}>
+                            <option
+                                disabled
+                                key={option.value}
+                                value={option.value}
+                            >
+                                {option.label}
+                            </option>
+                        </template>
+                        <template if:false={option.disabled}>
+                            <option key={option.value} value={option.value}>
+                                {option.label}
+                            </option>
+                        </template>
                     </template>
-                </template>
-            </select>
+                </select>
+            </div>
         </div>
+        <template if:true={helpMessage}>
+            <div
+                aria-live="assertive"
+                class="form-element_help"
+                data-help-message
+                id="help-message"
+            >
+                {helpMessage}
+            </div>
+        </template>
     </div>
-
-    <template if:true={_helpMessage}>
-        <div
-            aria-live="assertive"
-            class="slds-form-element__help"
-            data-help-message
-            id="help-message"
-        >
-            {_helpMessage}
-        </div>
-    </template>
 </template>

package/src/modules/dx/select/select.ts

@@ -1,23 +1,141 @@
 import cx from "classnames";
-import { api } from "lwc";
-import LightningSelect from "lightning/select";
-import { toJson } from "dxUtils/normalizers";
+import { LightningElement, api } from "lwc";
+import { SelectOption } from "typings/custom";
+import { toJson, normalizeBoolean } from "dxUtils/normalizers";
 
-export default class Select extends LightningSelect {
+export const DEFAULT_MISSING_MESSAGE = "This field is required";
+
+export default class Select extends LightningElement {
+    @api accessKey!: string;
+    @api autocomplete?: string;
+    @api label?: string;
+    @api messageWhenValueMissing: string = DEFAULT_MISSING_MESSAGE;
+    @api name?: string;
     @api placeholder?: string;
+    @api size?: string;
+
+    @api
+    get disabled() {
+        return this._disabled;
+    }
+
+    set disabled(value) {
+        this._disabled = normalizeBoolean(value);
+    }
+
+    @api
+    get options() {
+        return this._options;
+    }
+
+    set options(value) {
+        this._options = toJson(value);
+    }
 
     @api
-    get jsonOptions() {
-        return this.options;
+    get required() {
+        return this._required;
     }
 
-    set jsonOptions(value) {
-        this.options = toJson(value);
+    set required(value) {
+        this._required = normalizeBoolean(value);
+    }
+
+    @api
+    get value() {
+        return this._value;
+    }
+
+    set value(value) {
+        this._value = value;
+        this.updateSelectValue();
+    }
+
+    _disabled = false;
+    _size = "";
+    _required = false;
+    _options: Array<SelectOption> = [];
+    _value: string = "";
+    _selectElement: HTMLSelectElement | null = null;
+    helpMessage?: string = "";
+
+    renderedCallback(): void {
+        this.updateSelectValue();
+    }
+
+    get containerClass() {
+        return cx("form-element", this.hasError && "has-error");
+    }
+
+    get hasError(): boolean {
+        return !!this.helpMessage;
     }
 
     get selectClass() {
-        return cx("slds-select", {
-            placeholder: !this.value
+        return cx("select-element", {
+            "select-element_placeholder": this.placeholder && !this.value
         });
     }
+
+    get selectElement() {
+        if (!this._selectElement) {
+            this._selectElement =
+                this.template.querySelector<HTMLSelectElement>("select");
+        }
+        return this._selectElement;
+    }
+
+    @api
+    blur(): void {
+        if (this.selectElement) {
+            this.selectElement.blur();
+        }
+    }
+
+    @api
+    focus(): void {
+        if (this.selectElement) {
+            this.selectElement.focus();
+        }
+    }
+
+    @api
+    reportValidity(): boolean {
+        const isInvalid = this._required && !this._value;
+        this.helpMessage = isInvalid
+            ? this.messageWhenValueMissing || DEFAULT_MISSING_MESSAGE
+            : "";
+        return !isInvalid;
+    }
+
+    handleBlur(): void {
+        this.reportValidity();
+        this.dispatchEvent(new CustomEvent("blur"));
+    }
+
+    handleChange(event: Event & { target: HTMLSelectElement }): void {
+        const { value } = event.target;
+        this._value = value;
+        this.dispatchEvent(
+            new CustomEvent("change", {
+                detail: { value }
+            })
+        );
+    }
+
+    handleFocus(): void {
+        this.helpMessage = "";
+        this.dispatchEvent(new CustomEvent("focus"));
+    }
+
+    // We have to do it programmatically because value binding doesn't work apparently.
+    updateSelectValue(): void {
+        if (!this._value && !this.placeholder) {
+            return;
+        }
+
+        if (this.selectElement) {
+            this.selectElement.value = this._value;
+        }
+    }
 }

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -292,7 +292,7 @@ export default class SidebarSearch extends LightningElement {
     }: Result): SidebarSearchResult => {
         // discussion about this normalization here: https://salesforce-internal.slack.com/archives/C020S6784JX/p1639506238376600
 
-        let pathname;
+        let pathname, queryParam;
         if (sfhtml_url__c) {
             pathname = `/docs/${sfhtml_url__c}`;
         } else {
@@ -303,9 +303,15 @@ export default class SidebarSearch extends LightningElement {
                     ? ".html"
                     : "";
             pathname = `${url.pathname}${extension}`;
+            queryParam = url.search;
         }
 
-        const href = `${pathname}?q=${this.value}`;
+        let href;
+        if (queryParam) {
+            href = `${pathname}${queryParam}&q=${this.value}`;
+        } else {
+            href = `${pathname}?q=${this.value}`;
+        }
 
         return {
             title,

package/src/modules/dxBaseElements/headerBase/headerBase.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { Brand, Option } from "typings/custom";
+import { Brand, OptionWithLink, OptionWithNested } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 import { track } from "dxUtils/analytics";
 
@@ -61,8 +61,8 @@ export abstract class HeaderBase extends LightningElement {
         this._versions = toJson(value);
     }
 
-    private _navItems!: Option[];
-    private _versions!: Option[];
+    private _navItems!: OptionWithNested[];
+    private _versions!: OptionWithLink[];
     private matchMedia!: MediaQueryList;
     protected mobile: boolean = false;
     private mobileNavMenuValue: string | null = null;

package/src/modules/dxUtils/options/options.ts

@@ -1,12 +1,12 @@
-import { Option } from "typings/custom";
+import { OptionWithNested } from "typings/custom";
 
 const deepmapper = (
-    _options: Option[],
-    _callback: (option: Option, lavel: number) => Option,
+    _options: OptionWithNested[],
+    _callback: (option: OptionWithNested, lavel: number) => OptionWithNested,
     level: number = 0
-): Option[] => {
+): OptionWithNested[] => {
     const _level = level + 1;
-    return _options?.map((option: Option) =>
+    return _options?.map((option: OptionWithNested) =>
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         option.options
             ? {
@@ -18,9 +18,13 @@ const deepmapper = (
 };
 
 export const deepmapOptions = (
-    options: Option[],
-    callback: (option: Option, index: number, level: number) => Option
-): Option[] => {
+    options: OptionWithNested[],
+    callback: (
+        option: OptionWithNested,
+        index: number,
+        level: number
+    ) => OptionWithNested
+): OptionWithNested[] => {
     let index = 0;
     return deepmapper(options, (option, level) => {
         const newOption = callback(option, index, level);
@@ -29,7 +33,7 @@ export const deepmapOptions = (
     });
 };
 
-export const getOptionsCount = (options: Option[]) => {
+export const getOptionsCount = (options: OptionWithNested[]) => {
     let count = 0;
     deepmapper(options, (option) => {
         count += 1;

package/src/modules/dxHelpers/slds/slds.css

@@ -1,191 +0,0 @@
-:host(.slds-form-element_stacked) .slds-form-element__label,
-:host(.slds-form-element_stacked) .slds-form-element__control {
-    border-bottom: 0;
-    padding-left: 0;
-}
-
-:host(.slds-form-element_stacked) .slds-form-element__control {
-    width: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    clear: left;
-}
-
-@media (min-width: 48em) {
-    :host(.slds-form-element_horizontal) .slds-form-element__control {
-        padding-left: 33%;
-        clear: none;
-    }
-}
-
-:host(.slds-has-error) .slds-select {
-    border-color: #ea001e;
-    -webkit-box-shadow: #ea001e 0 0 0 1px inset;
-    box-shadow: #ea001e 0 0 0 1px inset;
-    background-clip: padding-box;
-}
-
-:host(.slds-has-error) .slds-select:focus,
-:host(.slds-has-error) .slds-select:active {
-    -webkit-box-shadow: #ea001e 0 0 0 1px inset, 0 0 3px #0176d3;
-    box-shadow: #ea001e 0 0 0 1px inset, 0 0 3px #0176d3;
-}
-
-:host(.slds-has-error) .slds-form-element__help {
-    color: #ea001e;
-}
-
-abbr[title] {
-    border-bottom: 1px dotted;
-}
-
-abbr[title] {
-    text-decoration: none;
-}
-
-abbr[title],
-fieldset,
-hr {
-    border: 0;
-}
-
-abbr[title] {
-    cursor: help;
-}
-
-abbr[title]:after {
-    content: " (" attr(title) ")";
-}
-
-button,
-select {
-    text-transform: none;
-}
-
-.slds-form-element__label {
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    -webkit-hyphens: auto;
-    -ms-hyphens: auto;
-    hyphens: auto;
-    display: inline-block;
-    color: #3e3e3c;
-    font-size: 0.75rem;
-    padding-right: 0.5rem;
-    padding-top: 0.25rem;
-    margin-bottom: 0.125rem;
-}
-
-.slds-form-element__label:empty {
-    margin: 0;
-}
-
-.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;
-}
-
-.slds-required {
-    color: #ea001e;
-    margin: 0 0.125rem;
-}
-
-.slds-form-element__control {
-    clear: left;
-    position: relative;
-}
-
-.slds-select {
-    height: calc(1.875rem + (1px * 2));
-    width: 100%;
-    border: 1px solid var(--sds-c-select-color-border, #dddbda);
-    border-radius: var(--sds-c-select-radius-border, 0.25rem);
-    background-color: var(--sds-c-select-color-background, white);
-    color: var(--sds-c-select-text-color);
-    -webkit-box-shadow: var(--sds-c-select-shadow);
-    box-shadow: var(--sds-c-select-shadow);
-    -webkit-transition: border 0.1s linear, background-color 0.1s linear;
-    transition: border 0.1s linear, background-color 0.1s linear;
-}
-
-.slds-select:required {
-    -webkit-box-shadow: none;
-    box-shadow: none;
-}
-
-.slds-select:focus,
-.slds-select:active {
-    outline: 0;
-    border-color: var(--sds-c-select-color-border-focus, #1b96ff);
-    background-color: var(--sds-c-select-color-background-focus, white);
-    color: var(--sds-c-select-text-color-focus);
-    -webkit-box-shadow: var(--sds-c-select-shadow-focus, 0 0 3px #0176d3);
-    box-shadow: var(--sds-c-select-shadow-focus, 0 0 3px #0176d3);
-}
-
-.slds-select[disabled],
-.slds-select.slds-is-disabled {
-    background-color: #ecebea;
-    border-color: #c9c7c5;
-    color: #3e3e3c;
-    cursor: not-allowed;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    opacity: 1;
-}
-
-.slds-select[disabled]:focus,
-.slds-select[disabled]:active,
-.slds-select.slds-is-disabled:focus,
-.slds-select.slds-is-disabled:active {
-    -webkit-box-shadow: none;
-    box-shadow: none;
-}
-
-.slds-select[size],
-.slds-select[multiple] {
-    min-height: calc(1.875rem + (1px * 2));
-    height: inherit;
-}
-
-.slds-select[size] option,
-.slds-select[multiple] option {
-    padding: 0.5rem;
-}
-
-.slds-select_container {
-    position: relative;
-    color: var(--sds-c-select-text-color);
-}
-
-.slds-select_container .slds-select {
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    padding-left: 0.5rem;
-    padding-right: 1.5rem;
-}
-.slds-select_container .slds-select::-ms-expand {
-    display: none;
-}
-
-.slds-select[size] option,
-.slds-select[multiple] option {
-    padding: 0.5rem;
-}
-
-.slds-form-element__help,
-.slds-form-element__helper {
-    font-size: 0.75rem;
-    margin-top: 0.125rem;
-    display: block;
-}