@repobit/dex-system-design 0.25.12 → 1.0.0

package/src/components/divider/divider.stories.js

@@ -3,7 +3,7 @@ import './divider-horizontal.js';
 import './divider-vertical.js';
 
 export default {
-  title     : 'Components/Divider',
+  title     : 'Atoms/Divider',
   tags      : ['autodocs'],
   parameters: {
     docs: {
@@ -16,8 +16,8 @@ Two divider components are available:
 
 ### Usage
 \`\`\`html
-<bd-divider-horizontal width="100%" color="#026DFF" opacity="0.5"></bd-divider-horizontal>
-<bd-divider-vertical height="24px" thickness="2px" color="#E53935" opacity="1"></bd-divider-vertical>
+<bd-divider-horizontal width="100%" color="primary" opacity="0.5"></bd-divider-horizontal>
+<bd-divider-vertical height="24" thickness="2px" color="error" opacity="1"></bd-divider-vertical>
 \`\`\`
         `
       }
@@ -26,13 +26,14 @@ Two divider components are available:
   argTypes: {
     width: {
       control    : 'text',
-      description: '(Horizontal) Width of the line e.g. "100%", "200px"',
+      description: '(Horizontal) Layout length for how far the rule spans, e.g. "100%". This is layout, not a design-token decision.',
       table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Horizontal' }
     },
     hColor: {
-      control    : 'color',
-      description: '(Horizontal) Border color',
-      table      : { type: { summary: 'string' }, defaultValue: { summary: 'var(--color-neutral-400)' }, category: 'Horizontal' }
+      control    : { type: 'select' },
+      options    : ['primary', 'strong', 'muted', 'subtle', 'inverse', 'success', 'warning', 'error'],
+      description: '(Horizontal) A semantic colour role, not a CSS colour.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: 'subtle' }, category: 'Horizontal' }
     },
     hOpacity: {
       control    : 'text',
@@ -40,9 +41,11 @@ Two divider components are available:
       table      : { type: { summary: 'string' }, defaultValue: { summary: '0.25' }, category: 'Horizontal' }
     },
     height: {
-      control    : 'text',
-      description: '(Vertical) Height of the divider e.g. "15px"',
-      table      : { type: { summary: 'string' }, defaultValue: { summary: '15px' }, category: 'Vertical' }
+      control: { type: 'select' },
+      options: ['0', '1', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '24',
+        '28', '32', '36', '40', '44', '48', '52', '56', '64', '80', '96', '112', '128'],
+      description: '(Vertical) A spacing step. Resolves to `var(--spacing-N)`.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '16' }, category: 'Vertical' }
     },
     thickness: {
       control    : 'text',
@@ -50,9 +53,10 @@ Two divider components are available:
       table      : { type: { summary: 'string' }, defaultValue: { summary: '1px' }, category: 'Vertical' }
     },
     vColor: {
-      control    : 'color',
-      description: '(Vertical) Background color of the divider div',
-      table      : { type: { summary: 'string' }, defaultValue: { summary: 'var(--color-neutral-400)' }, category: 'Vertical' }
+      control    : { type: 'select' },
+      options    : ['primary', 'strong', 'muted', 'subtle', 'inverse', 'success', 'warning', 'error'],
+      description: '(Vertical) A semantic colour role, not a CSS colour.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: 'subtle' }, category: 'Vertical' }
     },
     vOpacity: {
       control    : 'text',
@@ -80,9 +84,9 @@ export const HorizontalCustomColor = {
   name  : 'Horizontal — Custom Color',
   render: () => html`
     <div style="display:flex; flex-direction:column; gap:16px;">
-      <bd-divider-horizontal width="100%" color="#026DFF" opacity="1"></bd-divider-horizontal>
-      <bd-divider-horizontal width="100%" color="#E53935" opacity="1"></bd-divider-horizontal>
-      <bd-divider-horizontal width="100%" color="white"   opacity="1" style="background:#333; padding:4px;"></bd-divider-horizontal>
+      <bd-divider-horizontal width="100%" color="primary" opacity="1"></bd-divider-horizontal>
+      <bd-divider-horizontal width="100%" color="error" opacity="1"></bd-divider-horizontal>
+      <bd-divider-horizontal width="100%" color="inverse"   opacity="1" style="background:#333; padding:4px;"></bd-divider-horizontal>
     </div>
   `,
   parameters: { docs: { description: { story: 'Horizontal dividers with custom color values at full opacity.' } } }
@@ -92,10 +96,10 @@ export const HorizontalOpacities = {
   name  : 'Horizontal — Opacity Variants',
   render: () => html`
     <div style="display:flex; flex-direction:column; gap:12px;">
-      <bd-divider-horizontal width="100%" color="#026DFF" opacity="1"></bd-divider-horizontal>
-      <bd-divider-horizontal width="100%" color="#026DFF" opacity="0.5"></bd-divider-horizontal>
-      <bd-divider-horizontal width="100%" color="#026DFF" opacity="0.25"></bd-divider-horizontal>
-      <bd-divider-horizontal width="100%" color="#026DFF" opacity="0.1"></bd-divider-horizontal>
+      <bd-divider-horizontal width="100%" color="primary" opacity="1"></bd-divider-horizontal>
+      <bd-divider-horizontal width="100%" color="primary" opacity="0.5"></bd-divider-horizontal>
+      <bd-divider-horizontal width="100%" color="primary" opacity="0.25"></bd-divider-horizontal>
+      <bd-divider-horizontal width="100%" color="primary" opacity="0.1"></bd-divider-horizontal>
     </div>
   `,
   parameters: { docs: { description: { story: 'Four opacity levels: 1, 0.5, 0.25, 0.1.' } } }
@@ -103,7 +107,7 @@ export const HorizontalOpacities = {
 
 export const HorizontalFixedWidth = {
   name      : 'Horizontal — Fixed Width',
-  render    : () => html`<bd-divider-horizontal width="200px" color="#026DFF" opacity="1"></bd-divider-horizontal>`,
+  render    : () => html`<bd-divider-horizontal width="200px" color="primary" opacity="1"></bd-divider-horizontal>`,
   parameters: { docs: { description: { story: 'Horizontal divider with a fixed pixel width of 200px.' } } }
 };
 
@@ -126,9 +130,9 @@ export const VerticalCustomHeight = {
   render: () => html`
     <div style="display:flex; align-items:center; gap:8px; height:60px;">
       <span>Home</span>
-      <bd-divider-vertical height="40px"></bd-divider-vertical>
+      <bd-divider-vertical height="40"></bd-divider-vertical>
       <span>Products</span>
-      <bd-divider-vertical height="40px"></bd-divider-vertical>
+      <bd-divider-vertical height="40"></bd-divider-vertical>
       <span>Contact</span>
     </div>
   `,
@@ -139,9 +143,9 @@ export const VerticalCustomThickness = {
   name  : 'Vertical — Custom Thickness',
   render: () => html`
     <div style="display:flex; align-items:center; gap:16px; height:40px;">
-      <bd-divider-vertical height="30px" thickness="1px" color="#026DFF" opacity="1"></bd-divider-vertical>
-      <bd-divider-vertical height="30px" thickness="2px" color="#026DFF" opacity="1"></bd-divider-vertical>
-      <bd-divider-vertical height="30px" thickness="4px" color="#026DFF" opacity="1"></bd-divider-vertical>
+      <bd-divider-vertical height="32" thickness="1px" color="primary" opacity="1"></bd-divider-vertical>
+      <bd-divider-vertical height="32" thickness="2px" color="primary" opacity="1"></bd-divider-vertical>
+      <bd-divider-vertical height="32" thickness="4px" color="primary" opacity="1"></bd-divider-vertical>
     </div>
   `,
   parameters: { docs: { description: { story: 'Three thickness values: 1px, 2px, 4px.' } } }
@@ -151,9 +155,9 @@ export const VerticalCustomColor = {
   name  : 'Vertical — Custom Color',
   render: () => html`
     <div style="display:flex; align-items:center; gap:16px; height:40px;">
-      <bd-divider-vertical height="30px" thickness="2px" color="#026DFF" opacity="1"></bd-divider-vertical>
-      <bd-divider-vertical height="30px" thickness="2px" color="#E53935" opacity="1"></bd-divider-vertical>
-      <bd-divider-vertical height="30px" thickness="2px" color="#43A047" opacity="1"></bd-divider-vertical>
+      <bd-divider-vertical height="32" thickness="2px" color="primary" opacity="1"></bd-divider-vertical>
+      <bd-divider-vertical height="32" thickness="2px" color="error" opacity="1"></bd-divider-vertical>
+      <bd-divider-vertical height="32" thickness="2px" color="success" opacity="1"></bd-divider-vertical>
     </div>
   `,
   parameters: { docs: { description: { story: 'Blue, red, and green vertical dividers.' } } }
@@ -167,12 +171,12 @@ export const BothTypes = {
     <div>
       <div style="display:flex; align-items:center; gap:12px; margin-bottom:16px;">
         <span>Home</span>
-        <bd-divider-vertical height="20px" thickness="1px" color="#026DFF" opacity="1"></bd-divider-vertical>
+        <bd-divider-vertical height="20" thickness="1px" color="primary" opacity="1"></bd-divider-vertical>
         <span>Products</span>
-        <bd-divider-vertical height="20px" thickness="1px" color="#026DFF" opacity="1"></bd-divider-vertical>
+        <bd-divider-vertical height="20" thickness="1px" color="primary" opacity="1"></bd-divider-vertical>
         <span>Contact</span>
       </div>
-      <bd-divider-horizontal width="100%" color="#026DFF" opacity="0.25"></bd-divider-horizontal>
+      <bd-divider-horizontal width="100%" color="primary" opacity="0.25"></bd-divider-horizontal>
       <p style="margin-top:16px;">Content below the divider.</p>
     </div>
   `,
@@ -181,7 +185,7 @@ export const BothTypes = {
 
 export const PlaygroundHorizontal = {
   name  : '🛝 Playground — Horizontal',
-  args  : { width: '100%', hColor: '#026DFF', hOpacity: '0.5' },
+  args  : { width: '100%', hColor: 'primary', hOpacity: '0.5' },
   render: (args) => html`
     <bd-divider-horizontal width="${args.width}" color="${args.hColor}" opacity="${args.hOpacity}"></bd-divider-horizontal>
   `,
@@ -190,7 +194,7 @@ export const PlaygroundHorizontal = {
 
 export const PlaygroundVertical = {
   name  : '🛝 Playground — Vertical',
-  args  : { height: '30px', thickness: '1px', vColor: '#026DFF', vOpacity: '1' },
+  args  : { height: '32', thickness: '1px', vColor: 'primary', vOpacity: '1' },
   render: (args) => html`
     <div style="display:flex; align-items:center; gap:8px; height:50px;">
       <span>Left</span>

package/src/components/dropdown/dropdown.css.js

@@ -1,138 +1,105 @@
 import { css } from "lit";
 
+/**
+ * What a select adds to the shared field chrome: the native control is
+ * suppressed and a chevron is drawn in its place.
+ *
+ * Everything else — label, sizes, states, help text — comes from
+ * shared/form-field.css.js.
+ */
 export default css`
-  :host {
+  /* The caret is a sibling of the select rather than a pseudo-element, because a
+     select cannot carry a reliable one of its own.
+
+     This wrapper used to set color: var(--form-input-default-color) purely so
+     currentColor on the mark resolved to the field's ink instead of whatever the
+     page happened to carry. The caret names its own role now, so that
+     declaration had no remaining reader and is gone. */
+  .select-wrap {
+    position: relative;
     display: block;
-    width: 90%;
   }
 
-  .input-container {
-    display: flex;
-    flex-direction: column;
-  }
-
-  label {
-    margin-bottom: 4px;
-    font-weight: 500;
-    color: var(--color-neutral-900);
-  }
-
-  .form-label__required {
-    color: var(--color-red-500);
-    margin-left: var(--spacing-4);
-  }
-
-  .label-sm {
-    font-size: var(--typography-fontSize-xs);
-    font-weight: var(--typography-fontWeight-bold);
-    line-height: var(--typography-lineHeight-normal);
-    letter-spacing: var(--typography-letterSpacing-wide);
-    margin-bottom: var(--spacing-4);
-  }
-
-  .label-md {
-    font-size: var(--typography-fontSize-sm);
-    font-weight: var(--typography-fontWeight-bold);
-    line-height: var(--typography-lineHeight-normal);
-    margin-bottom: var(--spacing-4);
-  }
-
-  .label-lg {
-    font-size: var(--typography-fontSize-lg);
-    font-weight: var(--typography-fontWeight-bold);
-    line-height: var(--typography-lineHeight-normal);
-    margin-bottom: var(--spacing-8);
-  }
-
-  select {
-    width: 100%;
-    font-family: var(--typography-fontFamily-sans, sans-serif);
-    border: var(--border-width-1, 1px) solid var(--color-neutral-300);
-    background-color: var(--color-neutral-0);
-    color: var(--color-neutral-900);
-    line-height: var(--typography-lineHeight-normal, 1.5);
-    transition: border-color 0.3s ease, background-color 0.3s ease,
-      box-shadow 0.3s ease;
-    outline: none;
+  select.form-input-bd {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
-    background-image: url('data:image/svg+xml;utf8,<svg fill="%23000000" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5H7z"/></svg>');
-    background-repeat: no-repeat;
-    background-position: right var(--spacing-16) center;
-    background-size: 1rem;
-    padding-right: var(--spacing-28);
     cursor: pointer;
-  }
-
-  select:focus {
-    border-color: var(--color-blue-500);
-    box-shadow: var(--focus-outline-primary, 0 0 0 2px rgba(0, 109, 255, 0.3));
-  }
-
-  .input-sm {
-    padding: var(--spacing-8) var(--spacing-12);
-    font-size: var(--typography-fontSize-sm);
-    height: var(--dimension-34px);
-    border-radius: var(--form-input-medium-borderRadius);
-  }
-
-  .input-md {
-    padding: var(--spacing-8) var(--spacing-16);
-    font-size: var(--typography-fontSize-base);
-    height: var(--dimension-45px);
-    border-radius: var(--form-input-large-borderRadius);
-  }
-
-  .input-lg {
-    padding: var(--spacing-16) var(--spacing-20);
-    font-size: var(--typography-fontSize-lg);
-    height: var(--dimension-55px);
-    border-radius: var(--form-input-large-borderRadius);
-  }
-
-  .form-label {
-    display: block;
-    font-family: var(--typography-fontFamily-sans);
-    color: var(--color-neutral-900);
-    letter-spacing: var(--typography-letterSpacing-normal);
-  }
-
-  .form-help-text {
-    font-size: var(--typography-fontSize-xs);
-    font-weight: var(--typography-fontWeight-normal);
-    line-height: var(--typography-lineHeight-normal);
-    letter-spacing: var(--typography-letterSpacing-normal);
-    font-family: var(--typography-fontFamily-sans);
-    margin-top: var(--spacing-4);
-  }
-
-  .form-help-text--default {
-    color: var(--color-neutral-600);
-  }
-
-  .form-input--error {
-    background-color: var(--color-red-50);
-    border-color: var(--color-red-500);
-  }
-
-  .form-help-text--error {
-    color: var(--color-red-600);
-  }
-
-  .form-input--success {
-    background-color: var(--color-green-50);
-    border-color: var(--color-green-500);
-  }
-
-  .form-help-text--success {
-    color: var(--color-green-600);
-  }
-
-  .form-input--disabled {
-    background-color: var(--color-neutral-100);
-    border-color: var(--color-neutral-300);
-    color: var(--color-neutral-500);
-    cursor: not-allowed;
+    /* Clearance for the chevron: its own width plus the gap on either side.
+       This used to be a padding-right on a bare select type selector, which the
+       .input-* size classes then overrode with the padding shorthand — they
+       are a class each and beat a type selector — so the clearance never
+       applied and a long option ran underneath the chevron. Typing it onto
+       select.form-input-bd outranks them. */
+    padding-inline-end: calc(var(--icon-sm-size) + var(--spacing-12) * 2);
+  }
+
+  /* bd-arrow-down-icon, positioned over the select. Three versions of this mark,
+     and the progression is the point:
+
+       background-image  an encoded SVG carrying fill="%23000000" -- black,
+                         percent-encoded inside a url(), which no theme could
+                         reach and no lint could see
+       mask              the same encoded SVG, alpha only, so the mark finally
+                         took currentColor and followed the field's own ink
+       the atom          what it is now
+
+     The mask fixed the colour and left the real problem: the glyph was still a
+     drawing encoded in a stylesheet, invisible to check:icons, and it was a
+     SOLID TRIANGLE where every other disclosure control in the package uses a
+     chevron -- which is also what this file's Figma Dropdown has always shown.
+     A select cannot carry a reliable pseudo-element of its own, but it can have
+     a sibling, so the caret is now the same atom the accordion uses. */
+  .select-caret {
+    /* muted at rest, brand when open -- the same pair bd-anchor-nav's mobile
+       toggle uses, and converged on deliberately. This was action/primary in
+       both states, which says "this control opens" and says nothing about
+       whether it IS open; the rotation carried that alone. Letting the colour
+       carry it too is the answer the other disclosure control already gave.
+
+       Measured on all four grounds a caret sits on, against the 3:1 WCAG
+       1.4.11 asks of non-text UI -- and muted beats action/primary on every
+       one of them:
+
+                       white   error tint   success tint   disabled
+         text/muted     6.59      5.95          6.25         5.12
+         text/brand     6.18      5.58          5.86         4.80
+         action/primary 4.53      4.10          4.30         3.52
+
+       The disabled rule below is (0,3,0) against this (0,1,0), so a disabled
+       field keeps its grey and never shows the open colour. */
+    color: var(--color-text-muted);
+    position: absolute;
+    top: 50%;
+    right: var(--spacing-12);
+    transform: translateY(-50%);
+    pointer-events: none;
+    /* normal, not fast: bd-anchor-nav's chevron turns on the same gesture and
+       already used it, and two durations for one motion is the kind of thing
+       nobody notices as a decision and everybody notices as an inconsistency. */
+    transition: transform var(--transition-duration-normal) var(--transition-easing-smooth),
+      color var(--transition-duration-normal) var(--transition-easing-smooth);
+  }
+
+  /* Rotated rather than swapped for bd-arrow-up-icon, which is the same drawing
+     the other way up. One element means the mark cannot change weight as it
+     turns, and a transform can be animated where a DOM swap cannot. The weight
+     argument was the sharper one when this was written -- arrow-up was still on
+     the lighter Eclipse weight while arrow-down was on fill -- and although the
+     two now agree, rotating keeps them from drifting apart again here. */
+  .select-caret--open {
+    transform: translateY(-50%) rotate(180deg);
+    color: var(--color-text-brand);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .select-caret {
+      transition: none;
+    }
+  }
+
+  /* The chevron is part of the control, so it greys with it. */
+  .select-wrap:has(.form-input--disabled) .select-caret {
+    color: var(--form-input-disabled-color);
   }
 `;

package/src/components/dropdown/dropdown.js

@@ -1,30 +1,99 @@
-import { LitElement, html } from "lit";
-import { tokens } from "../../tokens/tokens.js";
+import { LitElement, html, nothing } from "lit";
+// Installs the design tokens into document scope; see src/tokens/tokens.js
+import "../../tokens/tokens.js";
+import "../icons/arrow-down-icon.js";
+import { formFieldCSS } from "../shared/form-field.css.js";
 import dropdownCSS from "../dropdown/dropdown.css.js";
+import { resolveSize } from '../shared/prop-vocabulary.js';
 
 
 class CustomDropdown extends LitElement {
   static properties = {
     label    : { type: String },
     options  : { type: Array },
+    size     : { type: String, reflect: true },
+    /** @deprecated pass `size`. It named the size, not the kind. */
     kind     : { type: String },
     required : { type: Boolean },
     tooltip  : { type: String },
     invalid  : { type: Boolean },
     validated: { type: Boolean },
-    disabled : { type: Boolean }
+    disabled : { type: Boolean },
+    /* Whether the native picker is showing. A best effort, not a fact: a
+       <select> renders its popup in the OS, so the page is never told when it
+       opens or closes. See _onSelectMouseDown. */
+    _open    : { type: Boolean, state: true }
   };
 
   constructor() {
     super();
-    this.label = "Select an option";
+    /* No default copy — see the note in input.js. */
+    this.label = "";
     this.options = [];
-    this.kind = "md";
+    this.size = "md";
+    this.kind = "";
     this.required = false;
     this.tooltip = "";
     this.invalid = false;
     this.validated = false;
     this.disabled = false;
+    this._open = false;
+  }
+
+  /* WHY THIS IS APPROXIMATED RATHER THAN OBSERVED.
+     A native select's picker is drawn by the operating system, so there is no
+     event for "opened" and no state to read. Chrome 152 does support
+     `select:open` and a `toggle` event, but only for a CUSTOMIZABLE select
+     (appearance: base-select) -- this field is appearance: none, and Safari and
+     Firefox have neither, so a CSS-only answer does not ship.
+
+     What is left is inference from the interactions that open a picker, plus
+     every signal that proves one has CLOSED. Opening is easy; closing is where
+     this gets hard, because dismissing a picker without choosing consumes the
+     click inside the popup. The page never sees it and the select keeps focus,
+     so `blur` does not arrive until the NEXT click somewhere -- which showed up
+     as a chevron stuck pointing up. Hence three closing signals, not one:
+
+       change            a value was chosen
+       blur              focus left the field
+       window focus      the picker is a separate native window, so the browser
+                         window becomes key again when it closes. This is the
+                         one that catches dismiss-without-choosing.
+       pointerdown       anywhere outside this element, capture phase
+
+     The last two can only ever fire when the picker is already shut, so they
+     add no false closes. Escape remains unobservable on macOS, which does not
+     deliver that keystroke to the page while the popup holds the keyboard; the
+     window-focus signal covers it only if focus actually moved. */
+  connectedCallback() {
+    super.connectedCallback();
+    this._onWindowFocus = () => { if (this._open) this._open = false; };
+    this._onDocPointerDown = e => {
+      if (this._open && e.composedPath()[0] !== this.shadowRoot?.querySelector("select")) this._open = false;
+    };
+    window.addEventListener("focus", this._onWindowFocus);
+    document.addEventListener("pointerdown", this._onDocPointerDown, true);
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener("focus", this._onWindowFocus);
+    document.removeEventListener("pointerdown", this._onDocPointerDown, true);
+    super.disconnectedCallback();
+  }
+
+  _onSelectMouseDown() {
+    /* clicking an open picker closes it, so this toggles rather than sets */
+    this._open = !this._open;
+  }
+
+  _onSelectKeyDown(e) {
+    if (e.key === "Enter" || e.key === " " || (e.altKey && (e.key === "ArrowDown" || e.key === "ArrowUp"))) {
+      this._open = true;
+    }
+  }
+
+  _closePicker() {
+    this._open = false;
   }
 
   set options(val) {
@@ -42,18 +111,25 @@ class CustomDropdown extends LitElement {
   get options() {
     return this._options;
   }
+  willUpdate(changed) {
+    // kind said "size" on these three and nothing else in the system,
+    // so it moved; see shared/prop-vocabulary.js
+    if (changed.has("kind") && this.kind) this.size = this.kind;
+    if (changed.has("size") || changed.has("kind")) this.size = resolveSize(this.size);
+  }
+
   render() {
     const inputClass = {
       sm: "input-sm",
       md: "input-md",
       lg: "input-lg"
-    }[this.kind];
+    }[this.size];
 
     const labelClass = {
       sm: "label-sm",
       md: "label-md",
       lg: "label-lg"
-    }[this.kind];
+    }[this.size];
 
     const inputStateClass = this.disabled
       ? "form-input--disabled"
@@ -71,32 +147,36 @@ class CustomDropdown extends LitElement {
 
     return html`
       <div class="input-container">
-        <label for="custom-dropdown" class="form-label ${labelClass}">
-          ${this.label}
-          ${this.required
-            ? html`<span class="form-label__required">*</span>`
-            : ""}
-        </label>
-     <select
-  id="custom-dropdown"
-  class="${inputClass} ${inputStateClass}"
-  ?required="${this.required}"
-  ?disabled="${this.disabled}"
->
-  ${this.options.map(
-    (option, index) =>
-      html`<option
-        value="${option}"
-        ?selected="${index === 0}"
-      >
-        ${option}
-      </option>`
-  )}
-</select>
-
-
-
-
+        ${this.label
+          ? html`<label for="custom-dropdown" class="form-label ${labelClass}">
+              ${this.label}
+              ${this.required
+                ? html`<span class="form-label__required" aria-hidden="true">*</span>`
+                : ""}
+            </label>`
+          : nothing}
+        <div class="select-wrap">
+          <select
+            id="custom-dropdown"
+            class="form-input-bd ${inputClass} ${inputStateClass}"
+            ?required="${this.required}"
+            ?disabled="${this.disabled}"
+            @mousedown="${this._onSelectMouseDown}"
+            @keydown="${this._onSelectKeyDown}"
+            @change="${this._closePicker}"
+            @blur="${this._closePicker}"
+          >
+            ${this.options.map(
+              (option, index) => html`<option value="${option}" ?selected="${index === 0}">
+                ${option}
+              </option>`
+            )}
+          </select>
+          <bd-arrow-down-icon
+            size="sm"
+            class="select-caret ${this._open ? "select-caret--open" : ""}"
+          ></bd-arrow-down-icon>
+        </div>
         ${this.tooltip
           ? html`<div class="form-help-text ${helpTextClass}">
               ${this.tooltip}
@@ -106,6 +186,6 @@ class CustomDropdown extends LitElement {
     `;
   }
 }
-CustomDropdown.styles = [tokens, dropdownCSS];
+CustomDropdown.styles = [formFieldCSS, dropdownCSS];
 
 customElements.define("bd-custom-dropdown", CustomDropdown);