@ucalgary-design-system/dropdown 1.0.1

package/README.md

@@ -0,0 +1,57 @@
+# Dropdown
+
+This package provides the **Dropdown** web component.
+
+## Installation
+
+Install the component using npm:
+
+```sh
+npm install @ucalgary-design-system/dropdown
+```
+
+## Usage
+
+Import the component into your application:
+
+```ts
+import "@ucalgary-design-system/dropdown";
+```
+
+Use the component in your HTML:
+
+```html
+<ucds-dropdown></ucds-dropdown>
+```
+
+## Development
+
+Build the component:
+
+```sh
+npm run build
+```
+
+Alternatively, build from the monorepo root:
+
+```sh
+npm run build -w @ucalgary-design-system/ucds-dropdown
+``` 
+
+Run storybook from the monorepo root.
+
+## Testing
+
+Run the test from this package:
+
+```sh
+npm run test
+```
+
+Alternatively, run the tests from the monorepo root:
+
+```sh
+npm run test -w @ucalgary-design-system/ucds-dropdown
+``` 
+
+

package/dropdown.css

@@ -0,0 +1 @@
+:root{--ucds-color-palette-brand-red: #d6001c;--ucds-color-palette-brand-gold: #ffcd00;--ucds-color-palette-brand-light-orange: #ffa300;--ucds-color-palette-brand-dark-orange: #ff7b1f;--ucds-color-palette-brand-berry: #9c0534;--ucds-color-palette-brand-rubine: #ce0058;--ucds-color-palette-brand-brown: #6b3529;--ucds-color-palette-brand-teal: #47a67c;--ucds-color-palette-white: #ffffff;--ucds-color-palette-black: #000000;--ucds-color-palette-gray-100: #2d2d2d;--ucds-color-palette-gray-200: #3d3d3d;--ucds-color-palette-gray-250: #4d4d4d;--ucds-color-palette-gray-300: #5d5d5d;--ucds-color-palette-gray-400: #8d8d8d;--ucds-color-palette-gray-500: #adadad;--ucds-color-palette-gray-600: #c0c0c0;--ucds-color-palette-gray-700: #d8d8d8;--ucds-color-palette-gray-800: #e5e5e5;--ucds-color-palette-gray-900: #f4f4f4;--ucds-color-palette-red-100: #3d0910;--ucds-color-palette-red-200: #5c0e18;--ucds-color-palette-red-300: #7a111f;--ucds-color-palette-red-400: #991022;--ucds-color-palette-red-500: #b70b21;--ucds-color-palette-red-600: #d6001c;--ucds-color-palette-red-700: #df3047;--ucds-color-palette-red-800: #ee0e2c;--ucds-color-palette-red-900: #ffadad;--ucds-color-palette-berry-600: #9c0534;--ucds-color-palette-berry-700: #a6192e;--ucds-color-palette-berry-800: #ea7b8a;--ucds-color-palette-berry-900: #f6ebed;--ucds-color-palette-rubine-600: #ce0058;--ucds-color-palette-rubine-800: #ed0a72;--ucds-color-palette-rubine-900: #ffa3c9;--ucds-color-palette-dark-orange-200: #6b3529;--ucds-color-palette-dark-orange-600: #ff671f;--ucds-color-palette-dark-orange-900: #fff2e9;--ucds-color-palette-light-orange-200: #614e00;--ucds-color-palette-light-orange-600: #ffa300;--ucds-color-palette-light-orange-900: #fff6e7;--ucds-color-palette-brown-600: #6c3302;--ucds-color-palette-brown-900: #ca7d68;--ucds-color-surface-page: #ffffff;--ucds-color-surface-primary: #ffffff;--ucds-color-border-neutral: #8d8d8d;--ucds-color-text-primary: #2d2d2d;--ucds-color-text-primary-inverse: #ffffff;--ucds-color-text-secondary: #5d5d5d;--ucds-color-text-error: #df3047;--ucds-color-text-disabled: #e5e5e5;--ucds-color-icon-primary: #2d2d2d;--ucds-color-icon-primary-inverse: #ffffff;--ucds-color-forms-input-background-rest: #ffffff;--ucds-color-forms-input-background-hover: #9c0534;--ucds-color-forms-input-background-active: #9c0534;--ucds-color-forms-input-background-selected: #9c0534;--ucds-color-forms-input-background-disabled: #e5e5e5;--ucds-color-forms-input-background-error: rgb(255 173 173 / 50%);--ucds-color-forms-input-border-rest: #8d8d8d;--ucds-color-forms-input-border-hover: #3d3d3d;--ucds-color-forms-input-border-active: #3d3d3d;--ucds-color-forms-input-border-selected: #9c0534;--ucds-color-forms-input-border-disabled: #e5e5e5;--ucds-color-forms-input-border-error: #df3047;--ucds-color-forms-input-element-disabled: #f4f4f4;--ucds-color-action-rest: #d6001c;--ucds-color-action-hover: #991022;--ucds-color-action-active: #991022;--ucds-color-action-focus: #4d4d4d;--ucds-color-action-visited: #991022;--ucds-color-action-secondary-rest: #2d2d2d;--ucds-color-action-secondary-hover: #4d4d4d;--ucds-color-action-secondary-active: #4d4d4d;--ucds-color-action-secondary-focus: #4d4d4d;--ucds-color-action-inverse-rest: #ffffff;--ucds-color-action-inverse-hover: #e5e5e5;--ucds-color-action-inverse-active: #e5e5e5;--ucds-color-action-inverse-focus: #ffffff;--ucds-color-feedback-error-light: #df3047;--ucds-color-feedback-error-background-light: rgb(255 173 173 / 50%);--ucds-font-base-size: 16px;--ucds-font-base-line-height: 24px;--ucds-font-base-weight-light: 200;--ucds-font-base-weight-normal: 400;--ucds-font-base-weight-medium: 500;--ucds-font-base-weight-semibold: 600;--ucds-font-base-weight-bold: 700;--ucds-font-sans-serif-family: "Proxima Nova", Arial, Helvetica, sans-serif;--ucds-font-serif-family: "Museo Slab", "Proxima Nova", Arial, Helvetica, sans-serif;--ucds-form-element-border-radius: 8px;--ucds-form-element-border-width: 2px;--ucds-form-element-height: 48px;--ucds-form-element-width: 100%;--ucds-form-element-maxwidth: 555px;--ucds-form-element-horizontal-padding: 16px;--ucds-form-component-intra-spacing: 8px;--ucds-form-component-inter-spacing: 16px}

package/index.js

@@ -0,0 +1,893 @@
+import { unsafeCSS as oe, nothing as L, html as H } from "lit";
+import { BaseElement as N } from "@ucalgary-design-system/core";
+import "@ucalgary-design-system/helper-components";
+import "@ucalgary-design-system/icon";
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const ne = (r) => (e, t) => {
+  t !== void 0 ? t.addInitializer(() => {
+    customElements.define(r, e);
+  }) : customElements.define(r, e);
+};
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const M = globalThis, K = M.ShadowRoot && (M.ShadyCSS === void 0 || M.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, le = Symbol(), F = /* @__PURE__ */ new WeakMap();
+let pe = class {
+  constructor(e, t, s) {
+    if (this._$cssResult$ = !0, s !== le) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    this.cssText = e, this.t = t;
+  }
+  get styleSheet() {
+    let e = this.o;
+    const t = this.t;
+    if (K && e === void 0) {
+      const s = t !== void 0 && t.length === 1;
+      s && (e = F.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), s && F.set(t, e));
+    }
+    return e;
+  }
+  toString() {
+    return this.cssText;
+  }
+};
+const fe = (r) => new pe(typeof r == "string" ? r : r + "", void 0, le), me = (r, e) => {
+  if (K) r.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
+  else for (const t of e) {
+    const s = document.createElement("style"), i = M.litNonce;
+    i !== void 0 && s.setAttribute("nonce", i), s.textContent = t.cssText, r.appendChild(s);
+  }
+}, X = K ? (r) => r : (r) => r instanceof CSSStyleSheet ? ((e) => {
+  let t = "";
+  for (const s of e.cssRules) t += s.cssText;
+  return fe(t);
+})(r) : r;
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const { is: $e, defineProperty: _e, getOwnPropertyDescriptor: ve, getOwnPropertyNames: ge, getOwnPropertySymbols: be, getPrototypeOf: ye } = Object, g = globalThis, G = g.trustedTypes, we = G ? G.emptyScript : "", B = g.reactiveElementPolyfillSupport, C = (r, e) => r, T = { toAttribute(r, e) {
+  switch (e) {
+    case Boolean:
+      r = r ? we : null;
+      break;
+    case Object:
+    case Array:
+      r = r == null ? r : JSON.stringify(r);
+  }
+  return r;
+}, fromAttribute(r, e) {
+  let t = r;
+  switch (e) {
+    case Boolean:
+      t = r !== null;
+      break;
+    case Number:
+      t = r === null ? null : Number(r);
+      break;
+    case Object:
+    case Array:
+      try {
+        t = JSON.parse(r);
+      } catch {
+        t = null;
+      }
+  }
+  return t;
+} }, W = (r, e) => !$e(r, e), Q = { attribute: !0, type: String, converter: T, reflect: !1, hasChanged: W };
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), g.litPropertyMetadata ?? (g.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+class S extends HTMLElement {
+  static addInitializer(e) {
+    this._$Ei(), (this.l ?? (this.l = [])).push(e);
+  }
+  static get observedAttributes() {
+    return this.finalize(), this._$Eh && [...this._$Eh.keys()];
+  }
+  static createProperty(e, t = Q) {
+    if (t.state && (t.attribute = !1), this._$Ei(), this.elementProperties.set(e, t), !t.noAccessor) {
+      const s = Symbol(), i = this.getPropertyDescriptor(e, s, t);
+      i !== void 0 && _e(this.prototype, e, i);
+    }
+  }
+  static getPropertyDescriptor(e, t, s) {
+    const { get: i, set: o } = ve(this.prototype, e) ?? { get() {
+      return this[t];
+    }, set(n) {
+      this[t] = n;
+    } };
+    return { get() {
+      return i == null ? void 0 : i.call(this);
+    }, set(n) {
+      const a = i == null ? void 0 : i.call(this);
+      o.call(this, n), this.requestUpdate(e, a, s);
+    }, configurable: !0, enumerable: !0 };
+  }
+  static getPropertyOptions(e) {
+    return this.elementProperties.get(e) ?? Q;
+  }
+  static _$Ei() {
+    if (this.hasOwnProperty(C("elementProperties"))) return;
+    const e = ye(this);
+    e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
+  }
+  static finalize() {
+    if (this.hasOwnProperty(C("finalized"))) return;
+    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(C("properties"))) {
+      const t = this.properties, s = [...ge(t), ...be(t)];
+      for (const i of s) this.createProperty(i, t[i]);
+    }
+    const e = this[Symbol.metadata];
+    if (e !== null) {
+      const t = litPropertyMetadata.get(e);
+      if (t !== void 0) for (const [s, i] of t) this.elementProperties.set(s, i);
+    }
+    this._$Eh = /* @__PURE__ */ new Map();
+    for (const [t, s] of this.elementProperties) {
+      const i = this._$Eu(t, s);
+      i !== void 0 && this._$Eh.set(i, t);
+    }
+    this.elementStyles = this.finalizeStyles(this.styles);
+  }
+  static finalizeStyles(e) {
+    const t = [];
+    if (Array.isArray(e)) {
+      const s = new Set(e.flat(1 / 0).reverse());
+      for (const i of s) t.unshift(X(i));
+    } else e !== void 0 && t.push(X(e));
+    return t;
+  }
+  static _$Eu(e, t) {
+    const s = t.attribute;
+    return s === !1 ? void 0 : typeof s == "string" ? s : typeof e == "string" ? e.toLowerCase() : void 0;
+  }
+  constructor() {
+    super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
+  }
+  _$Ev() {
+    var e;
+    this._$ES = new Promise((t) => this.enableUpdating = t), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), (e = this.constructor.l) == null || e.forEach((t) => t(this));
+  }
+  addController(e) {
+    var t;
+    (this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(e), this.renderRoot !== void 0 && this.isConnected && ((t = e.hostConnected) == null || t.call(e));
+  }
+  removeController(e) {
+    var t;
+    (t = this._$EO) == null || t.delete(e);
+  }
+  _$E_() {
+    const e = /* @__PURE__ */ new Map(), t = this.constructor.elementProperties;
+    for (const s of t.keys()) this.hasOwnProperty(s) && (e.set(s, this[s]), delete this[s]);
+    e.size > 0 && (this._$Ep = e);
+  }
+  createRenderRoot() {
+    const e = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
+    return me(e, this.constructor.elementStyles), e;
+  }
+  connectedCallback() {
+    var e;
+    this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (e = this._$EO) == null || e.forEach((t) => {
+      var s;
+      return (s = t.hostConnected) == null ? void 0 : s.call(t);
+    });
+  }
+  enableUpdating(e) {
+  }
+  disconnectedCallback() {
+    var e;
+    (e = this._$EO) == null || e.forEach((t) => {
+      var s;
+      return (s = t.hostDisconnected) == null ? void 0 : s.call(t);
+    });
+  }
+  attributeChangedCallback(e, t, s) {
+    this._$AK(e, s);
+  }
+  _$EC(e, t) {
+    var o;
+    const s = this.constructor.elementProperties.get(e), i = this.constructor._$Eu(e, s);
+    if (i !== void 0 && s.reflect === !0) {
+      const n = (((o = s.converter) == null ? void 0 : o.toAttribute) !== void 0 ? s.converter : T).toAttribute(t, s.type);
+      this._$Em = e, n == null ? this.removeAttribute(i) : this.setAttribute(i, n), this._$Em = null;
+    }
+  }
+  _$AK(e, t) {
+    var o;
+    const s = this.constructor, i = s._$Eh.get(e);
+    if (i !== void 0 && this._$Em !== i) {
+      const n = s.getPropertyOptions(i), a = typeof n.converter == "function" ? { fromAttribute: n.converter } : ((o = n.converter) == null ? void 0 : o.fromAttribute) !== void 0 ? n.converter : T;
+      this._$Em = i, this[i] = a.fromAttribute(t, n.type), this._$Em = null;
+    }
+  }
+  requestUpdate(e, t, s) {
+    if (e !== void 0) {
+      if (s ?? (s = this.constructor.getPropertyOptions(e)), !(s.hasChanged ?? W)(this[e], t)) return;
+      this.P(e, t, s);
+    }
+    this.isUpdatePending === !1 && (this._$ES = this._$ET());
+  }
+  P(e, t, s) {
+    this._$AL.has(e) || this._$AL.set(e, t), s.reflect === !0 && this._$Em !== e && (this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Set())).add(e);
+  }
+  async _$ET() {
+    this.isUpdatePending = !0;
+    try {
+      await this._$ES;
+    } catch (t) {
+      Promise.reject(t);
+    }
+    const e = this.scheduleUpdate();
+    return e != null && await e, !this.isUpdatePending;
+  }
+  scheduleUpdate() {
+    return this.performUpdate();
+  }
+  performUpdate() {
+    var s;
+    if (!this.isUpdatePending) return;
+    if (!this.hasUpdated) {
+      if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
+        for (const [o, n] of this._$Ep) this[o] = n;
+        this._$Ep = void 0;
+      }
+      const i = this.constructor.elementProperties;
+      if (i.size > 0) for (const [o, n] of i) n.wrapped !== !0 || this._$AL.has(o) || this[o] === void 0 || this.P(o, this[o], n);
+    }
+    let e = !1;
+    const t = this._$AL;
+    try {
+      e = this.shouldUpdate(t), e ? (this.willUpdate(t), (s = this._$EO) == null || s.forEach((i) => {
+        var o;
+        return (o = i.hostUpdate) == null ? void 0 : o.call(i);
+      }), this.update(t)) : this._$EU();
+    } catch (i) {
+      throw e = !1, this._$EU(), i;
+    }
+    e && this._$AE(t);
+  }
+  willUpdate(e) {
+  }
+  _$AE(e) {
+    var t;
+    (t = this._$EO) == null || t.forEach((s) => {
+      var i;
+      return (i = s.hostUpdated) == null ? void 0 : i.call(s);
+    }), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(e)), this.updated(e);
+  }
+  _$EU() {
+    this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
+  }
+  get updateComplete() {
+    return this.getUpdateComplete();
+  }
+  getUpdateComplete() {
+    return this._$ES;
+  }
+  shouldUpdate(e) {
+    return !0;
+  }
+  update(e) {
+    this._$Ej && (this._$Ej = this._$Ej.forEach((t) => this._$EC(t, this[t]))), this._$EU();
+  }
+  updated(e) {
+  }
+  firstUpdated(e) {
+  }
+}
+S.elementStyles = [], S.shadowRootOptions = { mode: "open" }, S[C("elementProperties")] = /* @__PURE__ */ new Map(), S[C("finalized")] = /* @__PURE__ */ new Map(), B == null || B({ ReactiveElement: S }), (g.reactiveElementVersions ?? (g.reactiveElementVersions = [])).push("2.0.4");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const Ae = { attribute: !0, type: String, converter: T, reflect: !1, hasChanged: W }, xe = (r = Ae, e, t) => {
+  const { kind: s, metadata: i } = t;
+  let o = globalThis.litPropertyMetadata.get(i);
+  if (o === void 0 && globalThis.litPropertyMetadata.set(i, o = /* @__PURE__ */ new Map()), o.set(t.name, r), s === "accessor") {
+    const { name: n } = t;
+    return { set(a) {
+      const l = e.get.call(this);
+      e.set.call(this, a), this.requestUpdate(n, l, r);
+    }, init(a) {
+      return a !== void 0 && this.P(n, void 0, r), a;
+    } };
+  }
+  if (s === "setter") {
+    const { name: n } = t;
+    return function(a) {
+      const l = this[n];
+      e.call(this, a), this.requestUpdate(n, l, r);
+    };
+  }
+  throw Error("Unsupported decorator location: " + s);
+};
+function m(r) {
+  return (e, t) => typeof t == "object" ? xe(r, e, t) : ((s, i, o) => {
+    const n = i.hasOwnProperty(o);
+    return i.constructor.createProperty(o, n ? { ...s, wrapped: !0 } : s), n ? Object.getOwnPropertyDescriptor(i, o) : void 0;
+  })(r, e, t);
+}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function ae(r) {
+  return m({ ...r, state: !0, attribute: !1 });
+}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const Se = (r, e, t) => (t.configurable = !0, t.enumerable = !0, Reflect.decorate && typeof e != "object" && Object.defineProperty(r, e, t), t);
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function Ee(r) {
+  return (e, t) => {
+    const { slot: s, selector: i } = r ?? {}, o = "slot" + (s ? `[name=${s}]` : ":not([name])");
+    return Se(e, t, { get() {
+      var l;
+      const n = (l = this.renderRoot) == null ? void 0 : l.querySelector(o), a = (n == null ? void 0 : n.assignedElements(r)) ?? [];
+      return i === void 0 ? a : a.filter((h) => h.matches(i));
+    } });
+  };
+}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const O = globalThis, R = O.trustedTypes, Y = R ? R.createPolicy("lit-html", { createHTML: (r) => r }) : void 0, de = "$lit$", v = `lit$${Math.random().toFixed(9).slice(2)}$`, he = "?" + v, Ce = `<${he}>`, w = document, D = () => w.createComment(""), P = (r) => r === null || typeof r != "object" && typeof r != "function", J = Array.isArray, Oe = (r) => J(r) || typeof (r == null ? void 0 : r[Symbol.iterator]) == "function", q = `[ 	
+\f\r]`, E = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, ee = /-->/g, te = />/g, b = RegExp(`>|${q}(?:([^\\s"'>=/]+)(${q}*=${q}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), se = /'/g, ie = /"/g, ce = /^(?:script|style|textarea|title)$/i, A = Symbol.for("lit-noChange"), c = Symbol.for("lit-nothing"), re = /* @__PURE__ */ new WeakMap(), y = w.createTreeWalker(w, 129);
+function ue(r, e) {
+  if (!J(r) || !r.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return Y !== void 0 ? Y.createHTML(e) : e;
+}
+const Pe = (r, e) => {
+  const t = r.length - 1, s = [];
+  let i, o = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", n = E;
+  for (let a = 0; a < t; a++) {
+    const l = r[a];
+    let h, u, d = -1, $ = 0;
+    for (; $ < l.length && (n.lastIndex = $, u = n.exec(l), u !== null); ) $ = n.lastIndex, n === E ? u[1] === "!--" ? n = ee : u[1] !== void 0 ? n = te : u[2] !== void 0 ? (ce.test(u[2]) && (i = RegExp("</" + u[2], "g")), n = b) : u[3] !== void 0 && (n = b) : n === b ? u[0] === ">" ? (n = i ?? E, d = -1) : u[1] === void 0 ? d = -2 : (d = n.lastIndex - u[2].length, h = u[1], n = u[3] === void 0 ? b : u[3] === '"' ? ie : se) : n === ie || n === se ? n = b : n === ee || n === te ? n = E : (n = b, i = void 0);
+    const _ = n === b && r[a + 1].startsWith("/>") ? " " : "";
+    o += n === E ? l + Ce : d >= 0 ? (s.push(h), l.slice(0, d) + de + l.slice(d) + v + _) : l + v + (d === -2 ? a : _);
+  }
+  return [ue(r, o + (r[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), s];
+};
+class k {
+  constructor({ strings: e, _$litType$: t }, s) {
+    let i;
+    this.parts = [];
+    let o = 0, n = 0;
+    const a = e.length - 1, l = this.parts, [h, u] = Pe(e, t);
+    if (this.el = k.createElement(h, s), y.currentNode = this.el.content, t === 2 || t === 3) {
+      const d = this.el.content.firstChild;
+      d.replaceWith(...d.childNodes);
+    }
+    for (; (i = y.nextNode()) !== null && l.length < a; ) {
+      if (i.nodeType === 1) {
+        if (i.hasAttributes()) for (const d of i.getAttributeNames()) if (d.endsWith(de)) {
+          const $ = u[n++], _ = i.getAttribute(d).split(v), U = /([.?@])?(.*)/.exec($);
+          l.push({ type: 1, index: o, name: U[2], strings: _, ctor: U[1] === "." ? Ie : U[1] === "?" ? Ue : U[1] === "@" ? Le : z }), i.removeAttribute(d);
+        } else d.startsWith(v) && (l.push({ type: 6, index: o }), i.removeAttribute(d));
+        if (ce.test(i.tagName)) {
+          const d = i.textContent.split(v), $ = d.length - 1;
+          if ($ > 0) {
+            i.textContent = R ? R.emptyScript : "";
+            for (let _ = 0; _ < $; _++) i.append(d[_], D()), y.nextNode(), l.push({ type: 2, index: ++o });
+            i.append(d[$], D());
+          }
+        }
+      } else if (i.nodeType === 8) if (i.data === he) l.push({ type: 2, index: o });
+      else {
+        let d = -1;
+        for (; (d = i.data.indexOf(v, d + 1)) !== -1; ) l.push({ type: 7, index: o }), d += v.length - 1;
+      }
+      o++;
+    }
+  }
+  static createElement(e, t) {
+    const s = w.createElement("template");
+    return s.innerHTML = e, s;
+  }
+}
+function x(r, e, t = r, s) {
+  var n, a;
+  if (e === A) return e;
+  let i = s !== void 0 ? (n = t._$Co) == null ? void 0 : n[s] : t._$Cl;
+  const o = P(e) ? void 0 : e._$litDirective$;
+  return (i == null ? void 0 : i.constructor) !== o && ((a = i == null ? void 0 : i._$AO) == null || a.call(i, !1), o === void 0 ? i = void 0 : (i = new o(r), i._$AT(r, t, s)), s !== void 0 ? (t._$Co ?? (t._$Co = []))[s] = i : t._$Cl = i), i !== void 0 && (e = x(r, i._$AS(r, e.values), i, s)), e;
+}
+class ke {
+  constructor(e, t) {
+    this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = t;
+  }
+  get parentNode() {
+    return this._$AM.parentNode;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  u(e) {
+    const { el: { content: t }, parts: s } = this._$AD, i = ((e == null ? void 0 : e.creationScope) ?? w).importNode(t, !0);
+    y.currentNode = i;
+    let o = y.nextNode(), n = 0, a = 0, l = s[0];
+    for (; l !== void 0; ) {
+      if (n === l.index) {
+        let h;
+        l.type === 2 ? h = new j(o, o.nextSibling, this, e) : l.type === 1 ? h = new l.ctor(o, l.name, l.strings, this, e) : l.type === 6 && (h = new He(o, this, e)), this._$AV.push(h), l = s[++a];
+      }
+      n !== (l == null ? void 0 : l.index) && (o = y.nextNode(), n++);
+    }
+    return y.currentNode = w, i;
+  }
+  p(e) {
+    let t = 0;
+    for (const s of this._$AV) s !== void 0 && (s.strings !== void 0 ? (s._$AI(e, s, t), t += s.strings.length - 2) : s._$AI(e[t])), t++;
+  }
+}
+class j {
+  get _$AU() {
+    var e;
+    return ((e = this._$AM) == null ? void 0 : e._$AU) ?? this._$Cv;
+  }
+  constructor(e, t, s, i) {
+    this.type = 2, this._$AH = c, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = s, this.options = i, this._$Cv = (i == null ? void 0 : i.isConnected) ?? !0;
+  }
+  get parentNode() {
+    let e = this._$AA.parentNode;
+    const t = this._$AM;
+    return t !== void 0 && (e == null ? void 0 : e.nodeType) === 11 && (e = t.parentNode), e;
+  }
+  get startNode() {
+    return this._$AA;
+  }
+  get endNode() {
+    return this._$AB;
+  }
+  _$AI(e, t = this) {
+    e = x(this, e, t), P(e) ? e === c || e == null || e === "" ? (this._$AH !== c && this._$AR(), this._$AH = c) : e !== this._$AH && e !== A && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : Oe(e) ? this.k(e) : this._(e);
+  }
+  O(e) {
+    return this._$AA.parentNode.insertBefore(e, this._$AB);
+  }
+  T(e) {
+    this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
+  }
+  _(e) {
+    this._$AH !== c && P(this._$AH) ? this._$AA.nextSibling.data = e : this.T(w.createTextNode(e)), this._$AH = e;
+  }
+  $(e) {
+    var o;
+    const { values: t, _$litType$: s } = e, i = typeof s == "number" ? this._$AC(e) : (s.el === void 0 && (s.el = k.createElement(ue(s.h, s.h[0]), this.options)), s);
+    if (((o = this._$AH) == null ? void 0 : o._$AD) === i) this._$AH.p(t);
+    else {
+      const n = new ke(i, this), a = n.u(this.options);
+      n.p(t), this.T(a), this._$AH = n;
+    }
+  }
+  _$AC(e) {
+    let t = re.get(e.strings);
+    return t === void 0 && re.set(e.strings, t = new k(e)), t;
+  }
+  k(e) {
+    J(this._$AH) || (this._$AH = [], this._$AR());
+    const t = this._$AH;
+    let s, i = 0;
+    for (const o of e) i === t.length ? t.push(s = new j(this.O(D()), this.O(D()), this, this.options)) : s = t[i], s._$AI(o), i++;
+    i < t.length && (this._$AR(s && s._$AB.nextSibling, i), t.length = i);
+  }
+  _$AR(e = this._$AA.nextSibling, t) {
+    var s;
+    for ((s = this._$AP) == null ? void 0 : s.call(this, !1, !0, t); e && e !== this._$AB; ) {
+      const i = e.nextSibling;
+      e.remove(), e = i;
+    }
+  }
+  setConnected(e) {
+    var t;
+    this._$AM === void 0 && (this._$Cv = e, (t = this._$AP) == null || t.call(this, e));
+  }
+}
+class z {
+  get tagName() {
+    return this.element.tagName;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  constructor(e, t, s, i, o) {
+    this.type = 1, this._$AH = c, this._$AN = void 0, this.element = e, this.name = t, this._$AM = i, this.options = o, s.length > 2 || s[0] !== "" || s[1] !== "" ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = c;
+  }
+  _$AI(e, t = this, s, i) {
+    const o = this.strings;
+    let n = !1;
+    if (o === void 0) e = x(this, e, t, 0), n = !P(e) || e !== this._$AH && e !== A, n && (this._$AH = e);
+    else {
+      const a = e;
+      let l, h;
+      for (e = o[0], l = 0; l < o.length - 1; l++) h = x(this, a[s + l], t, l), h === A && (h = this._$AH[l]), n || (n = !P(h) || h !== this._$AH[l]), h === c ? e = c : e !== c && (e += (h ?? "") + o[l + 1]), this._$AH[l] = h;
+    }
+    n && !i && this.j(e);
+  }
+  j(e) {
+    e === c ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
+  }
+}
+class Ie extends z {
+  constructor() {
+    super(...arguments), this.type = 3;
+  }
+  j(e) {
+    this.element[this.name] = e === c ? void 0 : e;
+  }
+}
+class Ue extends z {
+  constructor() {
+    super(...arguments), this.type = 4;
+  }
+  j(e) {
+    this.element.toggleAttribute(this.name, !!e && e !== c);
+  }
+}
+class Le extends z {
+  constructor(e, t, s, i, o) {
+    super(e, t, s, i, o), this.type = 5;
+  }
+  _$AI(e, t = this) {
+    if ((e = x(this, e, t, 0) ?? c) === A) return;
+    const s = this._$AH, i = e === c && s !== c || e.capture !== s.capture || e.once !== s.once || e.passive !== s.passive, o = e !== c && (s === c || i);
+    i && this.element.removeEventListener(this.name, this, s), o && this.element.addEventListener(this.name, this, e), this._$AH = e;
+  }
+  handleEvent(e) {
+    var t;
+    typeof this._$AH == "function" ? this._$AH.call(((t = this.options) == null ? void 0 : t.host) ?? this.element, e) : this._$AH.handleEvent(e);
+  }
+}
+class He {
+  constructor(e, t, s) {
+    this.element = e, this.type = 6, this._$AN = void 0, this._$AM = t, this.options = s;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AI(e) {
+    x(this, e);
+  }
+}
+const V = O.litHtmlPolyfillSupport;
+V == null || V(k, j), (O.litHtmlVersions ?? (O.litHtmlVersions = [])).push("3.2.1");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const Me = { ATTRIBUTE: 1 }, Te = (r) => (...e) => ({ _$litDirective$: r, values: e });
+class Re {
+  constructor(e) {
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AT(e, t, s) {
+    this._$Ct = e, this._$AM = t, this._$Ci = s;
+  }
+  _$AS(e, t) {
+    return this.update(e, t);
+  }
+  update(e, t) {
+    return this.render(...t);
+  }
+}
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const De = Te(class extends Re {
+  constructor(r) {
+    var e;
+    if (super(r), r.type !== Me.ATTRIBUTE || r.name !== "class" || ((e = r.strings) == null ? void 0 : e.length) > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
+  }
+  render(r) {
+    return " " + Object.keys(r).filter((e) => r[e]).join(" ") + " ";
+  }
+  update(r, [e]) {
+    var s, i;
+    if (this.st === void 0) {
+      this.st = /* @__PURE__ */ new Set(), r.strings !== void 0 && (this.nt = new Set(r.strings.join(" ").split(/\s/).filter((o) => o !== "")));
+      for (const o in e) e[o] && !((s = this.nt) != null && s.has(o)) && this.st.add(o);
+      return this.render(e);
+    }
+    const t = r.element.classList;
+    for (const o of this.st) o in e || (t.remove(o), this.st.delete(o));
+    for (const o in e) {
+      const n = !!e[o];
+      n === this.st.has(o) || (i = this.nt) != null && i.has(o) || (n ? (t.add(o), this.st.add(o)) : (t.remove(o), this.st.delete(o)));
+    }
+    return A;
+  }
+}), Ne = ':host{position:relative;display:block}.dropdown-wrapper{display:flex;flex-direction:column;gap:8px;align-items:start}.dropdown,.menu,.toggle,.dropdown-wrapper{min-width:115px;max-width:var(--ucds-form-element-maxwidth);width:var(--ucds-form-element-width)}.dropdown{position:relative}.toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;height:48px;padding:0 var(--ucds-form-element-horizontal-padding);font-family:var(--ucds-font-proxima-nova-family);font-size:var(--ucds-font-base-size);border:var(--ucds-color-forms-input-border-rest) solid var(--ucds-form-element-border-width);border-radius:var(--ucds-form-element-border-radius);background-color:var(--ucds-color-forms-input-background-rest)}.toggle:focus{outline:var(--ucds-color-action-focus) 2px solid;outline-offset:2px}.toggle .selected-label-wrapper{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toggle ucds-icon{color:var(--ucds-color-action-rest);transition:transform .5s ease}.toggle.error{background-color:var(--ucds-color-feedback-error-background-light);border-color:var(--ucds-color-feedback-error-light)}.toggle:hover{border-color:var(--ucds-color-forms-input-border-hover);cursor:pointer}.toggle.disabled{border-color:var(--ucds-color-forms-input-border-disabled);color:var(--ucds-color-text-disabled);cursor:not-allowed;pointer-events:none}.toggle.disabled ucds-icon{color:var(--ucds-color-forms-input-element-disabled)}.menu{position:absolute;background:var(--ucds-color-forms-input-background-rest);border:var(--ucds-color-forms-input-border-rest) solid var(--ucds-form-element-border-width);border-radius:var(--ucds-form-element-border-radius);display:none;cursor:pointer;list-style:none;margin:0;padding:12px;flex-direction:column;gap:8px;overflow-y:auto;z-index:100;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}:host([open]) .menu{display:flex}:host([open]) ucds-icon{transform:rotateX(180deg)}:host([data-open-direction="up"]) .menu{bottom:calc(100% + 8px)}:host([data-open-direction="down"]) .menu{top:calc(100% + 8px)}';
+var je = Object.defineProperty, ze = Object.getOwnPropertyDescriptor, f = (r, e, t, s) => {
+  for (var i = s > 1 ? void 0 : s ? ze(e, t) : e, o = r.length - 1, n; o >= 0; o--)
+    (n = r[o]) && (i = (s ? n(e, t, i) : n(i)) || i);
+  return s && i && je(e, t, i), i;
+};
+let p = class extends N {
+  // == Constructor ==
+  constructor() {
+    super(), this.initialValue = "", this.initialLabel = "", this._isOutsideClickListenerAttached = !1, this.scrollHandler = () => this._adjustDropdownDirection(), this.resizeObserver = new ResizeObserver(() => this._adjustDropdownDirection()), this.errorText = "", this.inputId = "", this.label = "", this.name = "", this.selectedLabel = "- Select -", this.disabled = !1, this.error = !1, this.open = !1, this.required = !1, this.activeIndex = -1, this._value = "", this.internals = this.attachInternals();
+  }
+  // == Accessors ==
+  /** Returns the current value of the dropdown. */
+  get value() {
+    return this._value;
+  }
+  /** Updates the value, triggers reactivity and form value update. */
+  set value(r) {
+    const e = this._value;
+    this._value = r, this.internals.setFormValue(this._value), this.requestUpdate("value", e);
+  }
+  // == Lifecycle methods ==
+  connectedCallback() {
+    super.connectedCallback && super.connectedCallback(), this.addEventListener("keydown", this._handleKeydown), this._boundOutsideClickHandler = this._handleOutsideClick.bind(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback && super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeydown), this._removeOutsideClickListener();
+  }
+  firstUpdated() {
+    const r = this.items.find((e) => e.hasAttribute("selected"));
+    queueMicrotask(() => {
+      var e;
+      !this.value && r ? (this.initialValue = r.value, this.initialLabel = (e = r.textContent) == null ? void 0 : e.trim(), this.value = this.initialValue, this.selectedLabel = this.initialLabel, this.activeIndex = this.items.indexOf(r)) : (this.initialValue = "", this.initialLabel = this.selectedLabel), this._syncSelectedItem();
+    });
+  }
+  // == Event handlers ==
+  /** Handles keyboard navigation and interaction. */
+  _handleKeydown(r) {
+    var t, s;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".toggle");
+    if (!this.open) {
+      if (["ArrowDown", "ArrowUp", " "].includes(r.key)) {
+        this._toggleMenu();
+        const i = this.items.findIndex((o) => o.hasAttribute("selected"));
+        this.activeIndex = i >= 0 ? i : 0, this.updateComplete.then(() => this._focusActiveItem()), r.preventDefault(), r.stopImmediatePropagation();
+      } else if (["ArrowLeft", "ArrowRight"].includes(r.key)) {
+        r.preventDefault(), r.stopImmediatePropagation();
+        const i = this.items.find((a) => a.hasAttribute("selected")), o = i ? this.items.indexOf(i) : -1;
+        let n = o;
+        r.key === "ArrowLeft" ? n = Math.max(o - 1, 0) : r.key === "ArrowRight" && (n = Math.min(o + 1, this.items.length - 1)), n !== this.activeIndex && (this.activeIndex = n, this.value = this.items[this.activeIndex].value, this.selectedLabel = (s = this.items[this.activeIndex].textContent) == null ? void 0 : s.trim(), this._syncSelectedItem(), this.dispatchEvent(new CustomEvent("change", {
+          detail: { value: this.value, selectedLabel: this.selectedLabel },
+          bubbles: !0,
+          composed: !0
+        })));
+      }
+      return;
+    }
+    switch (r.key) {
+      case "ArrowDown":
+        r.preventDefault(), this.activeIndex = Math.min(this.activeIndex + 1, this.items.length - 1), this._focusActiveItem();
+        break;
+      case "ArrowUp":
+        r.preventDefault(), this.activeIndex = Math.max(this.activeIndex - 1, 0), this._focusActiveItem();
+        break;
+      case "Escape":
+        this._toggleMenu(), e == null || e.focus();
+        break;
+    }
+  }
+  /** Handles selection of an item via custom `dropdown-select` event. */
+  _handleSelection(r) {
+    this.value = r.detail.value, this.selectedLabel = r.detail.selectedLabel, this._syncSelectedItem(), queueMicrotask(() => {
+      var s;
+      const e = this.items.find((i) => i.hasAttribute("selected"));
+      this.activeIndex = this.items.indexOf(e), this._toggleMenu();
+      const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector(".toggle");
+      t == null || t.focus();
+    });
+  }
+  /** Closes the dropdown when clicking outside. */
+  _handleOutsideClick(r) {
+    var e;
+    if (this.open) {
+      const t = r.composedPath(), s = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".menu");
+      (!s || !t.includes(s)) && (this.open = !1, this._removeOutsideClickListener());
+    }
+  }
+  // == Form-associated methods ==
+  /** Called when parent form is reset. */
+  formResetCallback() {
+    var e;
+    this.value = this.initialValue;
+    const r = this.items.find((t) => t.value === this.initialValue);
+    r ? (this.selectedLabel = (e = r.textContent) == null ? void 0 : e.trim(), this.activeIndex = this.items.indexOf(r)) : (this.selectedLabel = this.initialLabel, this.activeIndex = -1), this._syncSelectedItem();
+  }
+  /** Called when form state is restored. */
+  formStateRestoreCallback(r) {
+    var t;
+    const e = this.items.find((s) => s.value === r);
+    e ? (this.selectedLabel = (t = e.textContent) == null ? void 0 : t.trim(), this.activeIndex = this.items.indexOf(e), this._syncSelectedItem(), this.value = r) : console.warn("No matching item found during restore");
+  }
+  // == Private methods ==
+  /** Opens or closes the dropdown. */
+  _toggleMenu() {
+    this.disabled || (this.open = !this.open), this.open ? (this._adjustDropdownDirection(), window.addEventListener("scroll", this.scrollHandler, !0), window.addEventListener("resize", this.scrollHandler), this.resizeObserver.observe(this), this._isOutsideClickListenerAttached || setTimeout(() => {
+      document.addEventListener("click", this._boundOutsideClickHandler), this._isOutsideClickListenerAttached = !0;
+    }, 0)) : (this._removeOutsideClickListener(), window.removeEventListener("scroll", this.scrollHandler, !0), window.removeEventListener("resize", this.scrollHandler), this.resizeObserver.disconnect());
+  }
+  /** Marks selected item visually based on value. */
+  _syncSelectedItem() {
+    this.items.forEach((r) => {
+      const e = r;
+      e.selected = e.value === this.value;
+    });
+  }
+  /** Determines if dropdown should open upward or downward based on viewport space. */
+  _adjustDropdownDirection() {
+    var n, a;
+    const e = ((n = this.shadowRoot) == null ? void 0 : n.querySelector(".dropdown")).getBoundingClientRect(), t = e.top, s = window.innerHeight - e.bottom, i = s >= t ? "down" : "up";
+    this.setAttribute("data-open-direction", i);
+    const o = (a = this.shadowRoot) == null ? void 0 : a.querySelector(".menu");
+    if (o) {
+      const l = i === "down" ? s - 16 : t - 16;
+      o.style.maxHeight = `${l}px`;
+    }
+  }
+  /** Focuses the currently active item (for keyboard nav). */
+  _focusActiveItem() {
+    var r, e;
+    if (this.items.length > 0 && this.activeIndex > -1) {
+      const t = (e = (r = this.items[this.activeIndex]) == null ? void 0 : r.shadowRoot) == null ? void 0 : e.querySelector(".dropdown-item");
+      t == null || t.focus();
+    }
+  }
+  /** Helper to remove the outside click handler and update _isOutsideClickListenerAttached at the same time. */
+  _removeOutsideClickListener() {
+    this._isOutsideClickListenerAttached && (document.removeEventListener("click", this._boundOutsideClickHandler), this._isOutsideClickListenerAttached = !1);
+  }
+  // == Render ==
+  render() {
+    const r = {
+      disabled: this.disabled,
+      error: this.error
+    };
+    return H`
+      <div class="dropdown-wrapper">
+        ${this.label ? H`
+          <form-label id="${this.inputId}-label" for="${this.inputId}" text="${this.label}" ?required="${this.required}" ?disabled="${this.disabled}"></form-label>` : L}
+        <div class="dropdown">
+          <div class="toggle ${De(r)}"
+               aria-disabled="${this.disabled ? !0 : L}"
+               role="button"
+               tabindex="${this.disabled ? "-1" : "0"}"
+               @click="${this._toggleMenu}"
+               @keydown=${this._handleKeydown}
+               aria-expanded="${this.open}">
+            <div class="selected-label-wrapper">
+              ${this.selectedLabel}
+            </div>
+            <ucds-icon name="chevronDown" size="24"></ucds-icon>
+          </div>
+          <div class="menu" ?open="${this.open}" role="listbox" aria-labelledby="${this.inputId}-label" @dropdown-select=${this._handleSelection}>
+            <slot></slot>
+          </div>
+        </div>
+        ${this.error ? H`<form-error-message text="${this.errorText}"></form-error-message>` : L}
+      </div>
+    `;
+  }
+};
+p.styles = [
+  N.styles,
+  oe(Ne)
+];
+p.formAssociated = !0;
+f([
+  m({ type: String, attribute: "error-text" })
+], p.prototype, "errorText", 2);
+f([
+  m({ type: String, attribute: "input-id" })
+], p.prototype, "inputId", 2);
+f([
+  m({ type: String })
+], p.prototype, "label", 2);
+f([
+  m({ type: String, reflect: !0 })
+], p.prototype, "name", 2);
+f([
+  m({ type: String, attribute: "selected-label" })
+], p.prototype, "selectedLabel", 2);
+f([
+  m({ type: Boolean, reflect: !0 })
+], p.prototype, "disabled", 2);
+f([
+  m({ type: Boolean, reflect: !0 })
+], p.prototype, "error", 2);
+f([
+  m({ type: Boolean, reflect: !0 })
+], p.prototype, "open", 2);
+f([
+  m({ type: Boolean, reflect: !0 })
+], p.prototype, "required", 2);
+f([
+  ae()
+], p.prototype, "activeIndex", 2);
+f([
+  ae()
+], p.prototype, "_value", 2);
+f([
+  Ee({ selector: "ucds-dropdown-item" })
+], p.prototype, "items", 2);
+p = f([
+  ne("ucds-dropdown")
+], p);
+const Be = ".dropdown-item{display:flex;gap:4px;align-items:center;padding:10px 6px 10px 26px;border-radius:8px}.dropdown-item ucds-icon{display:none}.dropdown-item .dropdown-item-text{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover,.dropdown-item:active,.dropdown-item:focus{background-color:var(--ucds-color-palette-berry-900);outline:none}.dropdown-item.selected{padding-left:6px}.dropdown-item.selected ucds-icon{display:inline-flex}";
+var qe = Object.defineProperty, Ve = Object.getOwnPropertyDescriptor, Z = (r, e, t, s) => {
+  for (var i = s > 1 ? void 0 : s ? Ve(e, t) : e, o = r.length - 1, n; o >= 0; o--)
+    (n = r[o]) && (i = (s ? n(e, t, i) : n(i)) || i);
+  return s && i && qe(e, t, i), i;
+};
+let I = class extends N {
+  constructor() {
+    super(...arguments), this.value = "", this.selected = !1;
+  }
+  // == Private methods ==
+  /** Called when the item is clicked or activated via keyboard. */
+  _select() {
+    var e;
+    const r = (e = this.textContent) == null ? void 0 : e.trim();
+    this.selected = !0, this.dispatchEvent(new CustomEvent("dropdown-select", {
+      detail: { value: this.value, selectedLabel: r },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  /** Handle Enter, Tab, or Esc key to activate the item. */
+  _handleKeydown(r) {
+    (r.key === "Enter" || r.key === "Tab" || r.key === "Esc") && (r.preventDefault(), this._select());
+  }
+  // == Render ==
+  render() {
+    return H`
+      <div class="dropdown-item ${this.selected ? "selected" : ""}"
+        aria-selected="${this.selected ? !0 : L}"
+        role="option"
+        tabindex="-1"
+        @click=${this._select}
+        @keydown=${this._handleKeydown}
+      >
+        <ucds-icon name="checkmark" size="16" color="berry"></ucds-icon>
+        <span class="dropdown-item-text"><slot></slot></span>
+      </div>
+    `;
+  }
+};
+I.styles = [
+  N.styles,
+  oe(Be)
+];
+Z([
+  m({ type: String })
+], I.prototype, "value", 2);
+Z([
+  m({ type: Boolean, reflect: !0 })
+], I.prototype, "selected", 2);
+I = Z([
+  ne("ucds-dropdown-item")
+], I);
+export {
+  p as Dropdown,
+  I as DropdownItem
+};

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@ucalgary-design-system/dropdown",
+  "version": "1.0.1",
+  "type": "module",
+  "main": "index.js",
+  "module": "index.js",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.js"
+    }
+  },
+  "dependencies": {
+    "@ucalgary-design-system/core": "^1.0.1",
+    "@ucalgary-design-system/helper-components": "^1.0.1",
+    "@ucalgary-design-system/icon": "^1.0.1",
+    "@ucalgary-design-system/tokens": "^1.0.1",
+    "lit": "^3.2.1"
+  },
+  "description": "A web component for Dropdown",
+  "publishConfig": {
+    "access": "public"
+  }
+}