@justeattakeaway/pie-select 0.0.0-snapshot-release-20250306125923

package/README.md

@@ -0,0 +1,91 @@
+<p align="center">
+  <img align="center" src="../../../readme_image.png" height="200" alt="">
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/@justeattakeaway/pie-select">
+    <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-select.svg">
+  </a>
+</p>
+
+# Table of Contents
+
+1. [Introduction](#pie-select)
+2. [Installation](#installation)
+3. [Importing the component](#importing-the-component)
+4. [Peer Dependencies](#peer-dependencies)
+5. [Props](#props)
+6. [Contributing](#contributing)
+
+## pie-select
+
+`pie-select` is a Web Component built using the Lit library.
+
+This component can be easily integrated into various frontend frameworks and customized through a set of properties.
+
+
+## Installation
+
+To install `pie-select` in your application, run the following on your command line:
+
+```bash
+# npm
+$ npm i @justeattakeaway/pie-select
+
+# yarn
+$ yarn add @justeattakeaway/pie-select
+```
+
+For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
+
+
+### Importing the component
+
+#### JavaScript
+```js
+// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
+import { PieSelect } from '@justeattakeaway/pie-select';
+
+// If you don't need to reference the imported object, you can simply
+// import the module which registers the component as a custom element.
+import '@justeattakeaway/pie-select';
+```
+
+#### React
+```js
+// React
+// For React, you will need to import our React-specific component build
+// which wraps the web component using ​@lit/react
+import { PieSelect } from '@justeattakeaway/pie-select/dist/react';
+```
+
+> [!NOTE]
+> When using the React version of the component, please make sure to also
+> include React as a [peer dependency](#peer-dependencies) in your project.
+
+
+## Peer Dependencies
+
+> [!IMPORTANT]
+> When using `pie-select`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
+
+
+## Props
+
+| Property | Type | Default | Description |
+|---|---|---|---|
+| - | - | - | - |
+
+In your markup or JSX, you can then use these to set the properties for the `pie-select` component:
+
+```html
+<!-- Native HTML -->
+<pie-select></pie-select>
+
+<!-- JSX -->
+<PieSelect></PieSelect>
+```
+
+## Contributing
+
+Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).

package/custom-elements.json

@@ -0,0 +1,217 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/defs-react.js",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/defs.js",
+      "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",
+      "path": "src/index.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PieSelect",
+          "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": "_leadingIconNodes",
+              "type": {
+                "text": "Array<Node>"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_hasLeadingIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "handleLeadingIconSlotchange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderAssistiveText"
+            }
+          ],
+          "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": "@justeattakeaway/pie-webc-core"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "pie-select",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./defs"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PieSelect",
+          "declaration": {
+            "name": "PieSelect",
+            "module": "src/index.js"
+          }
+        }
+      ]
+    }
+  ]
+}

package/declaration.d.ts

@@ -0,0 +1,9 @@
+declare module '*.scss' {
+    const content: Record<string, string>;
+    export default content;
+}
+
+declare module '*.scss?inline' {
+    const content: Record<string, string>;
+    export default content;
+}

package/dist/index.d.ts

@@ -0,0 +1,65 @@
+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 { nothing } 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;
+    _leadingIconNodes: Array<Node>;
+    private _hasLeadingIcon;
+    private handleLeadingIconSlotchange;
+    renderAssistiveText(): typeof nothing | TemplateResult<1>;
+    render(): TemplateResult<1>;
+    static styles: CSSResult;
+}
+
+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

@@ -0,0 +1,104 @@
+import { LitElement as h, nothing as x, html as b, unsafeCSS as y } from "lit";
+import { RtlMixin as k, validPropertyValues as f, defineCustomElement as I } from "@justeattakeaway/pie-webc-core";
+import { property as c, query as z, queryAssignedNodes as $, state as w } from "lit/decorators.js";
+import { ifDefined as d } from "lit/directives/if-defined.js";
+import { classMap as L } from "lit/directives/class-map.js";
+import "@justeattakeaway/pie-icons-webc/dist/IconChevronDown.js";
+const T = "*,*: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)}.c-select select{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);font-size:var(--select-font-size);line-height:var(--select-line-height);background-color:var(--select-background-color);color:inherit;cursor:var(--select-cursor);outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.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-trailing-icon{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-trailing-icon{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-trailing-icon{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}", _ = ["small", "medium", "large"], S = ["default", "error"], i = {
+  size: "medium",
+  status: "default",
+  disabled: !1
+};
+var C = Object.defineProperty, s = (u, a, o, n) => {
+  for (var t = void 0, r = u.length - 1, l; r >= 0; r--)
+    (l = u[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 k(h) {
+  constructor() {
+    super(...arguments), this.size = i.size, this.disabled = i.disabled, this.status = i.status, this._hasLeadingIcon = !1;
+  }
+  handleLeadingIconSlotchange() {
+    this._hasLeadingIcon = !!this._leadingIconNodes.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() {
+    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="${L(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-trailing-icon'></icon-chevron-down>
+            </div>
+            ${this.renderAssistiveText()}
+        `;
+  }
+};
+p.shadowRootOptions = { ...h.shadowRootOptions, delegatesFocus: !0 }, p.styles = y(T);
+let e = p;
+s([
+  c({ type: String }),
+  f(v, _, 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, "_leadingIconNodes");
+s([
+  w()
+], e.prototype, "_hasLeadingIcon");
+I(v, e);
+export {
+  e as PieSelect,
+  i as defaultProps,
+  _ as sizes,
+  S as statusTypes
+};

package/dist/react.d.ts

@@ -0,0 +1,70 @@
+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 { nothing } from 'lit';
+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;
+    _leadingIconNodes: Array<Node>;
+    private _hasLeadingIcon;
+    private handleLeadingIconSlotchange;
+    renderAssistiveText(): typeof nothing | TemplateResult<1>;
+    render(): TemplateResult<1>;
+    static styles: CSSResult;
+}
+
+declare const PieSelect_base: GenericConstructor<RTLInterface> & typeof LitElement;
+
+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

@@ -0,0 +1,17 @@
+import * as e from "react";
+import { createComponent as t } from "@lit/react";
+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: s,
+  react: e,
+  tagName: "pie-select",
+  events: {}
+}), r = o;
+export {
+  r as PieSelect,
+  l as defaultProps,
+  p as sizes,
+  n as statusTypes
+};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@justeattakeaway/pie-select",
+  "description": "PIE Design System Select built using Web Components",
+  "version": "0.0.0-snapshot-release-20250306125923",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "custom-elements.json",
+    "src",
+    "dist",
+    "**/*.d.ts"
+  ],
+  "pieMetadata": {
+    "componentStatus": "alpha"
+  },
+  "scripts": {
+    "build": "run -T vite build",
+    "build:react-wrapper": "npx build-react-wrapper",
+    "create:manifest": "yarn cem analyze --litelement",
+    "lint:scripts": "run -T eslint .",
+    "lint:scripts:fix": "yarn lint:scripts --fix",
+    "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
+    "lint:style:fix": "yarn lint:style --fix",
+    "watch": "run -T vite build --watch",
+    "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
+    "test:browsers:ci": "yarn test:browsers",
+    "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_SELECT} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
+    "test:visual:ci": "yarn test:visual"
+  },
+  "author": "Just Eat Takeaway.com - Design System Team",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "0.9.0",
+    "@justeattakeaway/pie-components-config": "0.18.0",
+    "@justeattakeaway/pie-css": "0.15.1",
+    "cem-plugin-module-file-extensions": "0.0.5"
+  },
+  "dependencies": {
+    "@justeattakeaway/pie-webc-core": "0.24.2"
+  },
+  "volta": {
+    "extends": "../../../package.json"
+  },
+  "customElements": "custom-elements.json",
+  "sideEffects": [
+    "dist/*.js"
+  ]
+}

package/src/defs-react.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+
+export type ReactBaseType = React.HTMLAttributes<HTMLSelectElement>

package/src/defs.ts

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,135 @@
+import {
+    LitElement,
+    html,
+    nothing,
+    unsafeCSS,
+} from 'lit';
+import {
+    RtlMixin,
+    defineCustomElement,
+    validPropertyValues,
+} from '@justeattakeaway/pie-webc-core';
+import {
+    property,
+    query,
+    queryAssignedNodes,
+    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 {
+    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;
+
+    @queryAssignedNodes({ slot: 'leadingIcon', flatten: true }) _leadingIconNodes!: Array<Node>;
+
+    @state()
+    private _hasLeadingIcon = false;
+
+    private handleLeadingIconSlotchange () {
+        this._hasLeadingIcon = Boolean(this._leadingIconNodes.length);
+    }
+
+    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 () {
+        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-trailing-icon'></icon-chevron-down>
+            </div>
+            ${this.renderAssistiveText()}
+        `;
+    }
+
+    // Renders a `CSSResult` generated from SCSS by Vite
+    static styles = unsafeCSS(styles);
+}
+
+defineCustomElement(componentSelector, PieSelect);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieSelect;
+    }
+}

package/src/react.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { PieSelect as PieSelectLit } from './index';
+import { type SelectProps } from './defs';
+
+export * from './defs';
+
+const PieSelectReact = createComponent({
+    displayName: 'PieSelect',
+    elementClass: PieSelectLit,
+    react: React,
+    tagName: 'pie-select',
+    events: {},
+});
+
+type ReactBaseType = React.HTMLAttributes<HTMLSelectElement>
+
+export const PieSelect = PieSelectReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<SelectProps>
+    & React.RefAttributes<PieSelectLit> & ReactBaseType>;

package/src/select.scss

@@ -0,0 +1,97 @@
+@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);
+
+    select {
+        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);
+        font-size: var(--select-font-size);
+        line-height: var(--select-line-height);
+        background-color: var(--select-background-color);
+        color: inherit;
+        cursor: var(--select-cursor);
+        outline: 0;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+
+        &: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-trailing-icon {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        pointer-events: none;
+    }
+
+    &:not(.is-disabled) ::slotted([slot="leadingIcon"]),
+    &:not(.is-disabled) .c-select-trailing-icon {
+        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-trailing-icon {
+        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;
+    }
+}