@justeattakeaway/pie-select 0.0.1 → 0.1.0

package/custom-elements.json

@@ -11,8 +11,58 @@
     {
       "kind": "javascript-module",
       "path": "src/defs.js",
-      "declarations": [],
-      "exports": []
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "sizes",
+          "type": {
+            "text": "['small', 'medium', 'large']"
+          },
+          "default": "['small', 'medium', 'large']"
+        },
+        {
+          "kind": "variable",
+          "name": "statusTypes",
+          "type": {
+            "text": "['default', 'error']"
+          },
+          "default": "['default', 'error']"
+        },
+        {
+          "kind": "variable",
+          "name": "defaultProps",
+          "type": {
+            "text": "DefaultProps"
+          },
+          "default": "{\n    size: 'medium',\n    status: 'default',\n    disabled: false,\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "sizes",
+          "declaration": {
+            "name": "sizes",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "statusTypes",
+          "declaration": {
+            "name": "statusTypes",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "defaultProps",
+          "declaration": {
+            "name": "defaultProps",
+            "module": "src/defs.js"
+          }
+        }
+      ]
     },
     {
       "kind": "javascript-module",
@@ -22,7 +72,116 @@
           "kind": "class",
           "description": "",
           "name": "PieSelect",
-          "members": [],
+          "members": [
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "privacy": "public",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "privacy": "public",
+              "attribute": "disabled"
+            },
+            {
+              "kind": "field",
+              "name": "status",
+              "privacy": "public",
+              "attribute": "status"
+            },
+            {
+              "kind": "field",
+              "name": "assistiveText",
+              "type": {
+                "text": "SelectProps['assistiveText']"
+              },
+              "privacy": "public",
+              "attribute": "assistiveText"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "SelectProps['name']"
+              },
+              "privacy": "public",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "focusTarget",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "_leadingIconSlot",
+              "type": {
+                "text": "Array<HTMLElement>"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_hasLeadingIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "_handleLeadingIconSlotchange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderAssistiveText",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "fieldName": "size"
+            },
+            {
+              "name": "disabled",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "status",
+              "fieldName": "status"
+            },
+            {
+              "name": "assistiveText",
+              "type": {
+                "text": "SelectProps['assistiveText']"
+              },
+              "fieldName": "assistiveText"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "SelectProps['name']"
+              },
+              "fieldName": "name"
+            }
+          ],
           "mixins": [
             {
               "name": "RtlMixin",

package/dist/index.d.ts

@@ -1,13 +1,33 @@
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit-html';
 
+declare type DefaultProps = ComponentDefaultProps<SelectProps, keyof Omit<SelectProps, 'name' | 'assistiveText'>>;
+
+export declare const defaultProps: DefaultProps;
+
 /**
  * @tagname pie-select
  */
 export declare class PieSelect extends PieSelect_base implements SelectProps {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+    };
+    size: "small" | "medium" | "large";
+    disabled: boolean;
+    status: "default" | "error";
+    assistiveText: SelectProps['assistiveText'];
+    name: SelectProps['name'];
+    focusTarget: HTMLElement;
+    private _leadingIconSlot;
+    private _hasLeadingIcon;
+    private _handleLeadingIconSlotchange;
+    private renderAssistiveText;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
@@ -15,6 +35,30 @@ export declare class PieSelect extends PieSelect_base implements SelectProps {
 declare const PieSelect_base: GenericConstructor<RTLInterface> & typeof LitElement;
 
 export declare interface SelectProps {
+    /**
+     * The size of the select component. Can be `small`, `medium` or `large`. Defaults to `medium`.
+     */
+    size?: typeof sizes[number];
+    /**
+     * Same as the HTML disabled attribute - indicates whether the select is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * An optional assistive text to display below the select element. Must be provided when the status is success or error.
+     */
+    assistiveText?: string;
+    /**
+     * The status of the select component / assistive text. Can be default or error.
+     */
+    status?: typeof statusTypes[number];
+    /**
+     * The name of the select (used as a key/value pair with `value`). This is required in order to work properly with forms.
+     */
+    name?: string;
 }
 
+export declare const sizes: readonly ["small", "medium", "large"];
+
+export declare const statusTypes: readonly ["default", "error"];
+
 export { }

package/dist/index.js

@@ -1,13 +1,104 @@
-import { LitElement as s, html as o, unsafeCSS as n } from "lit";
-import { RtlMixin as r, defineCustomElement as i } from "@justeattakeaway/pie-webc-core";
-const l = "*,*:after,*:before{box-sizing:inherit}", m = "pie-select", e = class e extends r(s) {
+import { LitElement as u, nothing as x, html as b, unsafeCSS as y } from "lit";
+import { RtlMixin as I, validPropertyValues as f, defineCustomElement as k } from "@justeattakeaway/pie-webc-core";
+import { property as c, query as z, queryAssignedElements as $, state as w } from "lit/decorators.js";
+import { ifDefined as d } from "lit/directives/if-defined.js";
+import { classMap as _ } from "lit/directives/class-map.js";
+import "@justeattakeaway/pie-icons-webc/dist/IconChevronDown.js";
+const L = "*,*:after,*:before{box-sizing:inherit}.c-select{--select-padding-block: var(--dt-spacing-c);--select-padding-inline-start: var(--dt-spacing-d);--select-padding-inline-end: var(--dt-spacing-h);--select-background-color: var(--dt-color-container-default);--select-text-color: var(--dt-color-content-default);--select-border-color: var(--dt-color-border-form);--select-font-size: calc(var(--dt-font-body-l-size) * 1px);--select-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--select-height: 48px;--select-cursor: pointer;position:relative;color:var(--select-text-color);font-size:var(--select-font-size);line-height:var(--select-line-height)}.c-select select{height:var(--select-height);width:100%;border:1px solid var(--select-border-color);border-radius:var(--dt-radius-rounded-c);padding-inline-start:var(--select-padding-inline-start);padding-inline-end:var(--select-padding-inline-end);padding-block-start:var(--select-padding-block);padding-block-end:var(--select-padding-block);background-color:var(--select-background-color);font-size:inherit;line-height:inherit;color:inherit;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--select-cursor)}.c-select select:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-select.c-select--small{--select-padding-block: var(--dt-spacing-b);--select-height: 40px}.c-select.c-select--large{--select-padding-block: var(--dt-spacing-d);--select-height: 56px}.c-select.c-select--error{--select-border-color: var(--dt-color-support-error)}.c-select.c-select--withLeadingIcon{--select-padding-inline-start: calc(var(--dt-spacing-h) - var(--dt-spacing-a))}.c-select ::slotted([slot=leadingIcon]),.c-select .c-select-trailingIcon{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none}.c-select:not(.is-disabled) ::slotted([slot=leadingIcon]),.c-select:not(.is-disabled) .c-select-trailingIcon{color:var(--dt-color-content-subdued)}.c-select ::slotted([slot=leadingIcon]){--icon-display-override: block;--icon-size-override: 24px;inset-inline-start:var(--dt-spacing-d)}.c-select .c-select-trailingIcon{inset-inline-end:var(--dt-spacing-d)}@media (hover: hover){.c-select:hover{--select-background-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01))))}@supports (background-color: color-mix(in srgb,black,white)){.c-select:hover{--select-background-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}}.c-select.is-disabled{--select-background-color: var(--dt-color-disabled-01);--select-border-color: var(--dt-color-disabled-01);--select-text-color: var(--dt-color-content-disabled);--select-cursor: auto}", T = ["small", "medium", "large"], S = ["default", "error"], i = {
+  size: "medium",
+  status: "default",
+  disabled: !1
+};
+var C = Object.defineProperty, s = (h, a, o, n) => {
+  for (var t = void 0, r = h.length - 1, l; r >= 0; r--)
+    (l = h[r]) && (t = l(a, o, t) || t);
+  return t && C(a, o, t), t;
+};
+const v = "pie-select", g = "assistive-text", p = class p extends I(u) {
+  constructor() {
+    super(...arguments), this.size = i.size, this.disabled = i.disabled, this.status = i.status, this._hasLeadingIcon = !1;
+  }
+  _handleLeadingIconSlotchange() {
+    this._hasLeadingIcon = !!this._leadingIconSlot.length;
+  }
+  renderAssistiveText() {
+    return this.assistiveText ? b`
+            <pie-assistive-text
+                id="${g}"
+                variant=${d(this.status)}
+                data-test-id="pie-textarea-assistive-text">
+                ${this.assistiveText}
+            </pie-assistive-text>
+        ` : x;
+  }
   render() {
-    return o`<h1 data-test-id="pie-select">Hello world!</h1>`;
+    const {
+      assistiveText: a,
+      disabled: o,
+      status: n,
+      size: t,
+      name: r,
+      _hasLeadingIcon: l
+    } = this, m = {
+      "c-select": !0,
+      [`c-select--${t}`]: !0,
+      [`c-select--${n}`]: !0,
+      "c-select--withLeadingIcon": l,
+      "is-disabled": o
+    };
+    return b`
+            <div
+                class="${_(m)}"
+                data-test-id="pie-select-shell">
+                    <slot name="leadingIcon" @slotchange=${this._handleLeadingIconSlotchange}></slot>
+                    <select
+                        name=${d(r)}
+                        ?disabled=${o}
+                        aria-describedby=${d(a ? g : void 0)}
+                        aria-invalid=${n === "error" ? "true" : "false"}
+                        aria-errormessage="${d(n === "error" ? g : void 0)}">
+                        <option value="dog">Dog</option>
+                        <option value="cat">Cat</option>
+                        <option value="hamster">Hamster</option>
+                    </select>
+                    <icon-chevron-down size='s' class='c-select-trailingIcon'></icon-chevron-down>
+            </div>
+            ${this.renderAssistiveText()}
+        `;
   }
 };
-e.styles = n(l);
-let t = e;
-i(m, t);
+p.shadowRootOptions = { ...u.shadowRootOptions, delegatesFocus: !0 }, p.styles = y(L);
+let e = p;
+s([
+  c({ type: String }),
+  f(v, T, i.size)
+], e.prototype, "size");
+s([
+  c({ type: Boolean })
+], e.prototype, "disabled");
+s([
+  c({ type: String }),
+  f(v, S, i.status)
+], e.prototype, "status");
+s([
+  c({ type: String })
+], e.prototype, "assistiveText");
+s([
+  c({ type: String })
+], e.prototype, "name");
+s([
+  z("select")
+], e.prototype, "focusTarget");
+s([
+  $({ slot: "leadingIcon", flatten: !0 })
+], e.prototype, "_leadingIconSlot");
+s([
+  w()
+], e.prototype, "_hasLeadingIcon");
+k(v, e);
 export {
-  t as PieSelect
+  e as PieSelect,
+  i as defaultProps,
+  T as sizes,
+  S as statusTypes
 };

package/dist/react.d.ts

@@ -1,3 +1,4 @@
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
@@ -5,21 +6,64 @@ import * as React_2 from 'react';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit-html';
 
+declare type DefaultProps = ComponentDefaultProps<SelectProps, keyof Omit<SelectProps, 'name' | 'assistiveText'>>;
+
+export declare const defaultProps: DefaultProps;
+
 export declare const PieSelect: React_2.ForwardRefExoticComponent<SelectProps & React_2.RefAttributes<PieSelect_2> & ReactBaseType>;
 
 /**
  * @tagname pie-select
  */
 declare class PieSelect_2 extends PieSelect_base implements SelectProps {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+    };
+    size: "small" | "medium" | "large";
+    disabled: boolean;
+    status: "default" | "error";
+    assistiveText: SelectProps['assistiveText'];
+    name: SelectProps['name'];
+    focusTarget: HTMLElement;
+    private _leadingIconSlot;
+    private _hasLeadingIcon;
+    private _handleLeadingIconSlotchange;
+    private renderAssistiveText;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
 declare const PieSelect_base: GenericConstructor<RTLInterface> & typeof LitElement;
 
-declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
+declare type ReactBaseType = React_2.HTMLAttributes<HTMLSelectElement>;
 
 export declare interface SelectProps {
+    /**
+     * The size of the select component. Can be `small`, `medium` or `large`. Defaults to `medium`.
+     */
+    size?: typeof sizes[number];
+    /**
+     * Same as the HTML disabled attribute - indicates whether the select is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * An optional assistive text to display below the select element. Must be provided when the status is success or error.
+     */
+    assistiveText?: string;
+    /**
+     * The status of the select component / assistive text. Can be default or error.
+     */
+    status?: typeof statusTypes[number];
+    /**
+     * The name of the select (used as a key/value pair with `value`). This is required in order to work properly with forms.
+     */
+    name?: string;
 }
 
+export declare const sizes: readonly ["small", "medium", "large"];
+
+export declare const statusTypes: readonly ["default", "error"];
+
 export { }

package/dist/react.js

@@ -1,13 +1,17 @@
 import * as e from "react";
 import { createComponent as t } from "@lit/react";
-import { PieSelect as c } from "./index.js";
-const a = t({
+import { PieSelect as s } from "./index.js";
+import { defaultProps as l, sizes as p, statusTypes as n } from "./index.js";
+const o = t({
   displayName: "PieSelect",
-  elementClass: c,
+  elementClass: s,
   react: e,
   tagName: "pie-select",
   events: {}
-}), m = a;
+}), r = o;
 export {
-  m as PieSelect
+  r as PieSelect,
+  l as defaultProps,
+  p as sizes,
+  n as statusTypes
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-select",
   "description": "PIE Design System Select built using Web Components",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -34,7 +34,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.18.0",
-    "@justeattakeaway/pie-css": "0.14.1",
+    "@justeattakeaway/pie-css": "0.16.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {

package/src/defs-react.ts

@@ -1,8 +1,3 @@
 import type React from 'react';
-/**
- * TODO: Verify if ReactBaseType can be set as a more specific React interface
- * Use the React IntrinsicElements interface to find how to map standard HTML elements to existing React Interfaces
- * Example: an HTML button maps to `React.ButtonHTMLAttributes<HTMLButtonElement>`
- * https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0bb210867d16170c4a08d9ce5d132817651a0f80/types/react/index.d.ts#L2829
- */
-export type ReactBaseType = React.HTMLAttributes<HTMLElement>
+
+export type ReactBaseType = React.HTMLAttributes<HTMLSelectElement>

package/src/defs.ts

@@ -1,3 +1,40 @@
-// TODO - please remove the eslint disable comment below when you add props to this interface
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface SelectProps {}
+import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
+
+export const sizes = ['small', 'medium', 'large'] as const;
+
+export const statusTypes = ['default', 'error'] as const;
+
+export interface SelectProps {
+    /**
+     * The size of the select component. Can be `small`, `medium` or `large`. Defaults to `medium`.
+     */
+    size?: typeof sizes[number];
+
+    /**
+     * Same as the HTML disabled attribute - indicates whether the select is disabled.
+     */
+    disabled?: boolean;
+
+    /**
+     * An optional assistive text to display below the select element. Must be provided when the status is success or error.
+     */
+    assistiveText?: string;
+
+    /**
+     * The status of the select component / assistive text. Can be default or error.
+     */
+    status?: typeof statusTypes[number];
+
+    /**
+     * The name of the select (used as a key/value pair with `value`). This is required in order to work properly with forms.
+     */
+    name?: string;
+}
+
+type DefaultProps = ComponentDefaultProps<SelectProps, keyof Omit<SelectProps, 'name' | 'assistiveText' >>;
+
+export const defaultProps: DefaultProps = {
+    size: 'medium',
+    status: 'default',
+    disabled: false,
+};

package/src/index.ts

@@ -1,20 +1,126 @@
-import { LitElement, html, unsafeCSS } from 'lit';
-import { RtlMixin, defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import {
+    LitElement,
+    html,
+    nothing,
+    unsafeCSS,
+} from 'lit';
+import {
+    RtlMixin,
+    defineCustomElement,
+    validPropertyValues,
+} from '@justeattakeaway/pie-webc-core';
+import {
+    property,
+    query,
+    queryAssignedElements,
+    state,
+} from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap, type ClassInfo } from 'lit/directives/class-map.js';
+import '@justeattakeaway/pie-icons-webc/dist/IconChevronDown.js';
 
 import styles from './select.scss?inline';
-import { type SelectProps } from './defs';
+import {
+    defaultProps,
+    sizes,
+    statusTypes,
+    type SelectProps,
+} from './defs';
 
 // Valid values available to consumers
 export * from './defs';
 
 const componentSelector = 'pie-select';
+const assistiveTextIdValue = 'assistive-text';
 
 /**
  * @tagname pie-select
  */
 export class PieSelect extends RtlMixin(LitElement) implements SelectProps {
+    static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+
+    @property({ type: String })
+    @validPropertyValues(componentSelector, sizes, defaultProps.size)
+    public size = defaultProps.size;
+
+    @property({ type: Boolean })
+    public disabled = defaultProps.disabled;
+
+    @property({ type: String })
+    @validPropertyValues(componentSelector, statusTypes, defaultProps.status)
+    public status = defaultProps.status;
+
+    @property({ type: String })
+    public assistiveText: SelectProps['assistiveText'];
+
+    @property({ type: String })
+    public name: SelectProps['name'];
+
+    @query('select')
+    public focusTarget!: HTMLElement;
+
+    @queryAssignedElements({ slot: 'leadingIcon', flatten: true })
+    private _leadingIconSlot!: Array<HTMLElement>;
+
+    @state()
+    private _hasLeadingIcon = false;
+
+    private _handleLeadingIconSlotchange () {
+        this._hasLeadingIcon = Boolean(this._leadingIconSlot.length);
+    }
+
+    private renderAssistiveText () {
+        if (!this.assistiveText) {
+            return nothing;
+        }
+
+        return html`
+            <pie-assistive-text
+                id="${assistiveTextIdValue}"
+                variant=${ifDefined(this.status)}
+                data-test-id="pie-textarea-assistive-text">
+                ${this.assistiveText}
+            </pie-assistive-text>
+        `;
+    }
+
     render () {
-        return html`<h1 data-test-id="pie-select">Hello world!</h1>`;
+        const {
+            assistiveText,
+            disabled,
+            status,
+            size,
+            name,
+            _hasLeadingIcon,
+        } = this;
+
+        const classes : ClassInfo = {
+            'c-select': true,
+            [`c-select--${size}`]: true,
+            [`c-select--${status}`]: true,
+            'c-select--withLeadingIcon': _hasLeadingIcon,
+            'is-disabled': disabled,
+        };
+
+        return html`
+            <div
+                class="${classMap(classes)}"
+                data-test-id="pie-select-shell">
+                    <slot name="leadingIcon" @slotchange=${this._handleLeadingIconSlotchange}></slot>
+                    <select
+                        name=${ifDefined(name)}
+                        ?disabled=${disabled}
+                        aria-describedby=${ifDefined(assistiveText ? assistiveTextIdValue : undefined)}
+                        aria-invalid=${status === 'error' ? 'true' : 'false'}
+                        aria-errormessage="${ifDefined(status === 'error' ? assistiveTextIdValue : undefined)}">
+                        <option value="dog">Dog</option>
+                        <option value="cat">Cat</option>
+                        <option value="hamster">Hamster</option>
+                    </select>
+                    <icon-chevron-down size='s' class='c-select-trailingIcon'></icon-chevron-down>
+            </div>
+            ${this.renderAssistiveText()}
+        `;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite

package/src/react.ts

@@ -13,7 +13,7 @@ const PieSelectReact = createComponent({
     events: {},
 });
 
-type ReactBaseType = React.HTMLAttributes<HTMLElement>
+type ReactBaseType = React.HTMLAttributes<HTMLSelectElement>
 
 export const PieSelect = PieSelectReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<SelectProps>
     & React.RefAttributes<PieSelectLit> & ReactBaseType>;

package/src/select.scss

@@ -1 +1,101 @@
 @use '@justeattakeaway/pie-css/scss' as p;
+
+.c-select {
+    --select-padding-block: var(--dt-spacing-c);
+    --select-padding-inline-start: var(--dt-spacing-d);
+    --select-padding-inline-end: var(--dt-spacing-h);
+    --select-background-color: var(--dt-color-container-default);
+    --select-text-color: var(--dt-color-content-default);
+    --select-border-color: var(--dt-color-border-form);
+    --select-font-size: #{p.font-size(--dt-font-body-l-size)};
+    --select-line-height: #{p.font-size(--dt-font-body-l-line-height)};
+    --select-height: 48px;
+    --select-cursor: pointer;
+
+    position: relative;
+    color: var(--select-text-color);
+    font-size: var(--select-font-size);
+    line-height: var(--select-line-height);
+
+    select {
+        height: var(--select-height);
+        width: 100%;
+        border: 1px solid var(--select-border-color);
+        border-radius: var(--dt-radius-rounded-c);
+        padding-inline-start: var(--select-padding-inline-start);
+        padding-inline-end: var(--select-padding-inline-end);
+        padding-block-start: var(--select-padding-block);
+        padding-block-end: var(--select-padding-block);
+        background-color: var(--select-background-color);
+        font-size: inherit;
+        line-height: inherit;
+        color: inherit;
+        outline: 0;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        cursor: var(--select-cursor);
+
+        &:focus-within {
+            @include p.focus;
+        }
+    }
+
+    &.c-select--small {
+        --select-padding-block: var(--dt-spacing-b);
+        --select-height: 40px;
+    }
+
+    &.c-select--large {
+        --select-padding-block: var(--dt-spacing-d);
+        --select-height: 56px;
+    }
+
+    &.c-select--error {
+        --select-border-color: var(--dt-color-support-error);
+    }
+
+    &.c-select--withLeadingIcon {
+        --select-padding-inline-start: calc(var(--dt-spacing-h) - var(--dt-spacing-a));
+    }
+
+    ::slotted([slot="leadingIcon"]),
+    .c-select-trailingIcon {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        pointer-events: none;
+    }
+
+    &:not(.is-disabled) ::slotted([slot="leadingIcon"]),
+    &:not(.is-disabled) .c-select-trailingIcon {
+        color: var(--dt-color-content-subdued);
+    }
+
+    ::slotted([slot="leadingIcon"]) {
+        --icon-display-override: block;
+        --icon-size-override: 24px;
+        inset-inline-start: var(--dt-spacing-d);
+    }
+
+    .c-select-trailingIcon {
+        inset-inline-end: var(--dt-spacing-d);
+    }
+
+    @media (hover: hover) {
+        &:hover {
+            --select-background-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01))));
+
+            @supports (background-color: color-mix(in srgb, black, white)) {
+                --select-background-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default));
+            }
+        }
+    }
+
+    &.is-disabled {
+        --select-background-color: var(--dt-color-disabled-01);
+        --select-border-color: var(--dt-color-disabled-01);
+        --select-text-color: var(--dt-color-content-disabled);
+        --select-cursor: auto;
+    }
+}