@ucalgary-design-system/dropdown 1.0.2 → 1.0.4

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @ucalgary-design-system/dropdown
 
+## 1.0.4
+
+### Patch Changes
+
+- fe87dab: Updated externalized dependencies
+- Updated dependencies [fe87dab]
+  - @ucalgary-design-system/icon@1.0.4
+  - @ucalgary-design-system/core@1.0.4
+  - @ucalgary-design-system/tokens@1.0.4
+
+## 1.0.3
+
+### Patch Changes
+
+- c3fdd31: Updated dependencies and modified build
+- Updated dependencies [386b04a]
+- Updated dependencies [c3fdd31]
+  - @ucalgary-design-system/icon@1.0.3
+  - @ucalgary-design-system/core@1.0.3
+
 ## 1.0.2
 
 ### Patch Changes

package/index.js

@@ -1,631 +1,16 @@
-import { unsafeCSS as oe, nothing as L, html as H } from "lit";
-import { BaseElement as N } from "@ucalgary-design-system/core";
+import { unsafeCSS as v, nothing as u, html as p } from "lit";
+import { property as a, state as b, queryAssignedElements as x, customElement as w } from "lit/decorators.js";
+import { classMap as y } from "lit/directives/class-map.js";
+import { BaseElement as m } 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);
+const _ = ':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-family-sans-serif);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 k = Object.defineProperty, I = Object.getOwnPropertyDescriptor, d = (e, t, i, o) => {
+  for (var s = o > 1 ? void 0 : o ? I(t, i) : t, r = e.length - 1, n; r >= 0; r--)
+    (n = e[r]) && (s = (o ? n(t, i, s) : n(s)) || s);
+  return o && s && k(t, i, s), s;
 };
-/**
- * @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-family-sans-serif);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 {
+let l = class extends m {
   // == 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();
@@ -636,9 +21,9 @@ let p = class extends N {
     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);
+  set value(e) {
+    const t = this._value;
+    this._value = e, this.internals.setFormValue(this._value), this.requestUpdate("value", t);
   }
   // == Lifecycle methods ==
   connectedCallback() {
@@ -648,27 +33,27 @@ let p = class extends N {
     super.disconnectedCallback && super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeydown), this._removeOutsideClickListener();
   }
   firstUpdated() {
-    const r = this.items.find((e) => e.hasAttribute("selected"));
+    const e = this.items.find((t) => t.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();
+      var t;
+      !this.value && e ? (this.initialValue = e.value, this.initialLabel = (t = e.textContent) == null ? void 0 : t.trim(), this.value = this.initialValue, this.selectedLabel = this.initialLabel, this.activeIndex = this.items.indexOf(e)) : (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");
+  _handleKeydown(e) {
+    var i, o;
+    const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".toggle");
     if (!this.open) {
-      if (["ArrowDown", "ArrowUp", " "].includes(r.key)) {
+      if (["ArrowDown", "ArrowUp", " "].includes(e.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", {
+        const s = this.items.findIndex((r) => r.hasAttribute("selected"));
+        this.activeIndex = s >= 0 ? s : 0, this.updateComplete.then(() => this._focusActiveItem()), e.preventDefault(), e.stopImmediatePropagation();
+      } else if (["ArrowLeft", "ArrowRight"].includes(e.key)) {
+        e.preventDefault(), e.stopImmediatePropagation();
+        const s = this.items.find((h) => h.hasAttribute("selected")), r = s ? this.items.indexOf(s) : -1;
+        let n = r;
+        e.key === "ArrowLeft" ? n = Math.max(r - 1, 0) : e.key === "ArrowRight" && (n = Math.min(r + 1, this.items.length - 1)), n !== this.activeIndex && (this.activeIndex = n, this.value = this.items[this.activeIndex].value, this.selectedLabel = (o = this.items[this.activeIndex].textContent) == null ? void 0 : o.trim(), this._syncSelectedItem(), this.dispatchEvent(new CustomEvent("change", {
           detail: { value: this.value, selectedLabel: this.selectedLabel },
           bubbles: !0,
           composed: !0
@@ -676,49 +61,49 @@ let p = class extends N {
       }
       return;
     }
-    switch (r.key) {
+    switch (e.key) {
       case "ArrowDown":
-        r.preventDefault(), this.activeIndex = Math.min(this.activeIndex + 1, this.items.length - 1), this._focusActiveItem();
+        e.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();
+        e.preventDefault(), this.activeIndex = Math.max(this.activeIndex - 1, 0), this._focusActiveItem();
         break;
       case "Escape":
-        this._toggleMenu(), e == null || e.focus();
+        this._toggleMenu(), t == null || t.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();
+  _handleSelection(e) {
+    this.value = e.detail.value, this.selectedLabel = e.detail.selectedLabel, this._syncSelectedItem(), queueMicrotask(() => {
+      var o;
+      const t = this.items.find((s) => s.hasAttribute("selected"));
+      this.activeIndex = this.items.indexOf(t), this._toggleMenu();
+      const i = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".toggle");
+      i == null || i.focus();
     });
   }
   /** Closes the dropdown when clicking outside. */
-  _handleOutsideClick(r) {
-    var e;
+  _handleOutsideClick(e) {
+    var t;
     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());
+      const i = e.composedPath(), o = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".menu");
+      (!o || !i.includes(o)) && (this.open = !1, this._removeOutsideClickListener());
     }
   }
   // == Form-associated methods ==
   /** Called when parent form is reset. */
   formResetCallback() {
-    var e;
+    var t;
     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();
+    const e = this.items.find((i) => i.value === this.initialValue);
+    e ? (this.selectedLabel = (t = e.textContent) == null ? void 0 : t.trim(), this.activeIndex = this.items.indexOf(e)) : (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");
+  formStateRestoreCallback(e) {
+    var i;
+    const t = this.items.find((o) => o.value === e);
+    t ? (this.selectedLabel = (i = t.textContent) == null ? void 0 : i.trim(), this.activeIndex = this.items.indexOf(t), this._syncSelectedItem(), this.value = e) : console.warn("No matching item found during restore");
   }
   // == Private methods ==
   /** Opens or closes the dropdown. */
@@ -729,28 +114,28 @@ let p = class extends N {
   }
   /** Marks selected item visually based on value. */
   _syncSelectedItem() {
-    this.items.forEach((r) => {
-      const e = r;
-      e.selected = e.value === this.value;
+    this.items.forEach((e) => {
+      const t = e;
+      t.selected = t.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`;
+    var n, h;
+    const t = ((n = this.shadowRoot) == null ? void 0 : n.querySelector(".dropdown")).getBoundingClientRect(), i = t.top, o = window.innerHeight - t.bottom, s = o >= i ? "down" : "up";
+    this.setAttribute("data-open-direction", s);
+    const r = (h = this.shadowRoot) == null ? void 0 : h.querySelector(".menu");
+    if (r) {
+      const g = s === "down" ? o - 16 : i - 16;
+      r.style.maxHeight = `${g}px`;
     }
   }
   /** Focuses the currently active item (for keyboard nav). */
   _focusActiveItem() {
-    var r, e;
+    var e, t;
     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();
+      const i = (t = (e = this.items[this.activeIndex]) == null ? void 0 : e.shadowRoot) == null ? void 0 : t.querySelector(".dropdown-item");
+      i == null || i.focus();
     }
   }
   /** Helper to remove the outside click handler and update _isOutsideClickListenerAttached at the same time. */
@@ -759,17 +144,17 @@ let p = class extends N {
   }
   // == Render ==
   render() {
-    const r = {
+    const e = {
       disabled: this.disabled,
       error: this.error
     };
-    return H`
+    return p`
       <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}
+        ${this.label ? p`
+          <form-label id="${this.inputId}-label" for="${this.inputId}" text="${this.label}" ?required="${this.required}" ?disabled="${this.disabled}"></form-label>` : u}
         <div class="dropdown">
-          <div class="toggle ${De(r)}"
-               aria-disabled="${this.disabled ? !0 : L}"
+          <div class="toggle ${y(e)}"
+               aria-disabled="${this.disabled ? !0 : u}"
                role="button"
                tabindex="${this.disabled ? "-1" : "0"}"
                @click="${this._toggleMenu}"
@@ -784,85 +169,85 @@ let p = class extends N {
             <slot></slot>
           </div>
         </div>
-        ${this.error ? H`<form-error-message text="${this.errorText}"></form-error-message>` : L}
+        ${this.error ? p`<form-error-message text="${this.errorText}"></form-error-message>` : u}
       </div>
     `;
   }
 };
-p.styles = [
-  N.styles,
-  oe(Ne)
+l.styles = [
+  m.styles,
+  v(_)
 ];
-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;
+l.formAssociated = !0;
+d([
+  a({ type: String, attribute: "error-text" })
+], l.prototype, "errorText", 2);
+d([
+  a({ type: String, attribute: "input-id" })
+], l.prototype, "inputId", 2);
+d([
+  a({ type: String })
+], l.prototype, "label", 2);
+d([
+  a({ type: String, reflect: !0 })
+], l.prototype, "name", 2);
+d([
+  a({ type: String, attribute: "selected-label" })
+], l.prototype, "selectedLabel", 2);
+d([
+  a({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled", 2);
+d([
+  a({ type: Boolean, reflect: !0 })
+], l.prototype, "error", 2);
+d([
+  a({ type: Boolean, reflect: !0 })
+], l.prototype, "open", 2);
+d([
+  a({ type: Boolean, reflect: !0 })
+], l.prototype, "required", 2);
+d([
+  b()
+], l.prototype, "activeIndex", 2);
+d([
+  b()
+], l.prototype, "_value", 2);
+d([
+  x({ selector: "ucds-dropdown-item" })
+], l.prototype, "items", 2);
+l = d([
+  w("ucds-dropdown")
+], l);
+const L = ".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 C = Object.defineProperty, O = Object.getOwnPropertyDescriptor, f = (e, t, i, o) => {
+  for (var s = o > 1 ? void 0 : o ? O(t, i) : t, r = e.length - 1, n; r >= 0; r--)
+    (n = e[r]) && (s = (o ? n(t, i, s) : n(s)) || s);
+  return o && s && C(t, i, s), s;
 };
-let I = class extends N {
+let c = class extends m {
   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();
+    var t;
+    const e = (t = this.textContent) == null ? void 0 : t.trim();
     this.selected = !0, this.dispatchEvent(new CustomEvent("dropdown-select", {
-      detail: { value: this.value, selectedLabel: r },
+      detail: { value: this.value, selectedLabel: e },
       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());
+  _handleKeydown(e) {
+    (e.key === "Enter" || e.key === "Tab" || e.key === "Esc") && (e.preventDefault(), this._select());
   }
   // == Render ==
   render() {
-    return H`
+    return p`
       <div class="dropdown-item ${this.selected ? "selected" : ""}"
-        aria-selected="${this.selected ? !0 : L}"
+        aria-selected="${this.selected ? !0 : u}"
         role="option"
         tabindex="-1"
         @click=${this._select}
@@ -874,20 +259,20 @@ let I = class extends N {
     `;
   }
 };
-I.styles = [
-  N.styles,
-  oe(Be)
+c.styles = [
+  m.styles,
+  v(L)
 ];
-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);
+f([
+  a({ type: String })
+], c.prototype, "value", 2);
+f([
+  a({ type: Boolean, reflect: !0 })
+], c.prototype, "selected", 2);
+c = f([
+  w("ucds-dropdown-item")
+], c);
 export {
-  p as Dropdown,
-  I as DropdownItem
+  l as Dropdown,
+  c as DropdownItem
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucalgary-design-system/dropdown",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "type": "module",
   "main": "index.js",
   "module": "index.js",
@@ -10,11 +10,11 @@
       "require": "./index.js"
     }
   },
-  "dependencies": {
-    "@ucalgary-design-system/core": "^1.0.2",
+  "peerDependencies": {
+    "@ucalgary-design-system/core": "^1.0.4",
     "@ucalgary-design-system/helper-components": "^1.0.2",
-    "@ucalgary-design-system/icon": "^1.0.2",
-    "@ucalgary-design-system/tokens": "^1.0.3",
+    "@ucalgary-design-system/icon": "^1.0.4",
+    "@ucalgary-design-system/tokens": "^1.0.4",
     "lit": "^3.2.1"
   },
   "description": "A web component for Dropdown",