@ucalgary-design-system/dropdown 1.0.3 → 1.0.4

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @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

package/index.js

@@ -1,360 +1,16 @@
-import { unsafeCSS as A, nothing as v, html as y } from "lit";
-import { classMap as M } from "lit/directives/class-map.js";
-import { BaseElement as _ } 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 I = (s) => (e, t) => {
-  t !== void 0 ? t.addInitializer(() => {
-    customElements.define(s, e);
-  }) : customElements.define(s, 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 w = globalThis, x = w.ShadowRoot && (w.ShadyCSS === void 0 || w.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, L = Symbol(), C = /* @__PURE__ */ new WeakMap();
-let D = class {
-  constructor(e, t, i) {
-    if (this._$cssResult$ = !0, i !== L) 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 (x && e === void 0) {
-      const i = t !== void 0 && t.length === 1;
-      i && (e = C.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), i && C.set(t, e));
-    }
-    return e;
-  }
-  toString() {
-    return this.cssText;
-  }
-};
-const R = (s) => new D(typeof s == "string" ? s : s + "", void 0, L), z = (s, e) => {
-  if (x) s.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
-  else for (const t of e) {
-    const i = document.createElement("style"), o = w.litNonce;
-    o !== void 0 && i.setAttribute("nonce", o), i.textContent = t.cssText, s.appendChild(i);
-  }
-}, O = x ? (s) => s : (s) => s instanceof CSSStyleSheet ? ((e) => {
-  let t = "";
-  for (const i of e.cssRules) t += i.cssText;
-  return R(t);
-})(s) : s;
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const { is: j, defineProperty: q, getOwnPropertyDescriptor: T, getOwnPropertyNames: B, getOwnPropertySymbols: H, getPrototypeOf: V } = Object, u = globalThis, k = u.trustedTypes, K = k ? k.emptyScript : "", $ = u.reactiveElementPolyfillSupport, f = (s, e) => s, g = { toAttribute(s, e) {
-  switch (e) {
-    case Boolean:
-      s = s ? K : null;
-      break;
-    case Object:
-    case Array:
-      s = s == null ? s : JSON.stringify(s);
-  }
-  return s;
-}, fromAttribute(s, e) {
-  let t = s;
-  switch (e) {
-    case Boolean:
-      t = s !== null;
-      break;
-    case Number:
-      t = s === null ? null : Number(s);
-      break;
-    case Object:
-    case Array:
-      try {
-        t = JSON.parse(s);
-      } catch {
-        t = null;
-      }
-  }
-  return t;
-} }, E = (s, e) => !j(s, e), P = { attribute: !0, type: String, converter: g, reflect: !1, useDefault: !1, hasChanged: E };
-Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), u.litPropertyMetadata ?? (u.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-class p 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 = P) {
-    if (t.state && (t.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(e) && ((t = Object.create(t)).wrapped = !0), this.elementProperties.set(e, t), !t.noAccessor) {
-      const i = Symbol(), o = this.getPropertyDescriptor(e, i, t);
-      o !== void 0 && q(this.prototype, e, o);
-    }
-  }
-  static getPropertyDescriptor(e, t, i) {
-    const { get: o, set: r } = T(this.prototype, e) ?? { get() {
-      return this[t];
-    }, set(n) {
-      this[t] = n;
-    } };
-    return { get: o, set(n) {
-      const a = o == null ? void 0 : o.call(this);
-      r == null || r.call(this, n), this.requestUpdate(e, a, i);
-    }, configurable: !0, enumerable: !0 };
-  }
-  static getPropertyOptions(e) {
-    return this.elementProperties.get(e) ?? P;
-  }
-  static _$Ei() {
-    if (this.hasOwnProperty(f("elementProperties"))) return;
-    const e = V(this);
-    e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
-  }
-  static finalize() {
-    if (this.hasOwnProperty(f("finalized"))) return;
-    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(f("properties"))) {
-      const t = this.properties, i = [...B(t), ...H(t)];
-      for (const o of i) this.createProperty(o, t[o]);
-    }
-    const e = this[Symbol.metadata];
-    if (e !== null) {
-      const t = litPropertyMetadata.get(e);
-      if (t !== void 0) for (const [i, o] of t) this.elementProperties.set(i, o);
-    }
-    this._$Eh = /* @__PURE__ */ new Map();
-    for (const [t, i] of this.elementProperties) {
-      const o = this._$Eu(t, i);
-      o !== void 0 && this._$Eh.set(o, t);
-    }
-    this.elementStyles = this.finalizeStyles(this.styles);
-  }
-  static finalizeStyles(e) {
-    const t = [];
-    if (Array.isArray(e)) {
-      const i = new Set(e.flat(1 / 0).reverse());
-      for (const o of i) t.unshift(O(o));
-    } else e !== void 0 && t.push(O(e));
-    return t;
-  }
-  static _$Eu(e, t) {
-    const i = t.attribute;
-    return i === !1 ? void 0 : typeof i == "string" ? i : 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 i of t.keys()) this.hasOwnProperty(i) && (e.set(i, this[i]), delete this[i]);
-    e.size > 0 && (this._$Ep = e);
-  }
-  createRenderRoot() {
-    const e = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return z(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 i;
-      return (i = t.hostConnected) == null ? void 0 : i.call(t);
-    });
-  }
-  enableUpdating(e) {
-  }
-  disconnectedCallback() {
-    var e;
-    (e = this._$EO) == null || e.forEach((t) => {
-      var i;
-      return (i = t.hostDisconnected) == null ? void 0 : i.call(t);
-    });
-  }
-  attributeChangedCallback(e, t, i) {
-    this._$AK(e, i);
-  }
-  _$ET(e, t) {
-    var r;
-    const i = this.constructor.elementProperties.get(e), o = this.constructor._$Eu(e, i);
-    if (o !== void 0 && i.reflect === !0) {
-      const n = (((r = i.converter) == null ? void 0 : r.toAttribute) !== void 0 ? i.converter : g).toAttribute(t, i.type);
-      this._$Em = e, n == null ? this.removeAttribute(o) : this.setAttribute(o, n), this._$Em = null;
-    }
-  }
-  _$AK(e, t) {
-    var r, n;
-    const i = this.constructor, o = i._$Eh.get(e);
-    if (o !== void 0 && this._$Em !== o) {
-      const a = i.getPropertyOptions(o), d = typeof a.converter == "function" ? { fromAttribute: a.converter } : ((r = a.converter) == null ? void 0 : r.fromAttribute) !== void 0 ? a.converter : g;
-      this._$Em = o;
-      const b = d.fromAttribute(t, a.type);
-      this[o] = b ?? ((n = this._$Ej) == null ? void 0 : n.get(o)) ?? b, this._$Em = null;
-    }
-  }
-  requestUpdate(e, t, i) {
-    var o;
-    if (e !== void 0) {
-      const r = this.constructor, n = this[e];
-      if (i ?? (i = r.getPropertyOptions(e)), !((i.hasChanged ?? E)(n, t) || i.useDefault && i.reflect && n === ((o = this._$Ej) == null ? void 0 : o.get(e)) && !this.hasAttribute(r._$Eu(e, i)))) return;
-      this.C(e, t, i);
-    }
-    this.isUpdatePending === !1 && (this._$ES = this._$EP());
-  }
-  C(e, t, { useDefault: i, reflect: o, wrapped: r }, n) {
-    i && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(e) && (this._$Ej.set(e, n ?? t ?? this[e]), r !== !0 || n !== void 0) || (this._$AL.has(e) || (this.hasUpdated || i || (t = void 0), this._$AL.set(e, t)), o === !0 && this._$Em !== e && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(e));
-  }
-  async _$EP() {
-    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 i;
-    if (!this.isUpdatePending) return;
-    if (!this.hasUpdated) {
-      if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
-        for (const [r, n] of this._$Ep) this[r] = n;
-        this._$Ep = void 0;
-      }
-      const o = this.constructor.elementProperties;
-      if (o.size > 0) for (const [r, n] of o) {
-        const { wrapped: a } = n, d = this[r];
-        a !== !0 || this._$AL.has(r) || d === void 0 || this.C(r, void 0, n, d);
-      }
-    }
-    let e = !1;
-    const t = this._$AL;
-    try {
-      e = this.shouldUpdate(t), e ? (this.willUpdate(t), (i = this._$EO) == null || i.forEach((o) => {
-        var r;
-        return (r = o.hostUpdate) == null ? void 0 : r.call(o);
-      }), this.update(t)) : this._$EM();
-    } catch (o) {
-      throw e = !1, this._$EM(), o;
-    }
-    e && this._$AE(t);
-  }
-  willUpdate(e) {
-  }
-  _$AE(e) {
-    var t;
-    (t = this._$EO) == null || t.forEach((i) => {
-      var o;
-      return (o = i.hostUpdated) == null ? void 0 : o.call(i);
-    }), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(e)), this.updated(e);
-  }
-  _$EM() {
-    this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
-  }
-  get updateComplete() {
-    return this.getUpdateComplete();
-  }
-  getUpdateComplete() {
-    return this._$ES;
-  }
-  shouldUpdate(e) {
-    return !0;
-  }
-  update(e) {
-    this._$Eq && (this._$Eq = this._$Eq.forEach((t) => this._$ET(t, this[t]))), this._$EM();
-  }
-  updated(e) {
-  }
-  firstUpdated(e) {
-  }
-}
-p.elementStyles = [], p.shadowRootOptions = { mode: "open" }, p[f("elementProperties")] = /* @__PURE__ */ new Map(), p[f("finalized")] = /* @__PURE__ */ new Map(), $ == null || $({ ReactiveElement: p }), (u.reactiveElementVersions ?? (u.reactiveElementVersions = [])).push("2.1.1");
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const N = { attribute: !0, type: String, converter: g, reflect: !1, hasChanged: E }, J = (s = N, e, t) => {
-  const { kind: i, metadata: o } = t;
-  let r = globalThis.litPropertyMetadata.get(o);
-  if (r === void 0 && globalThis.litPropertyMetadata.set(o, r = /* @__PURE__ */ new Map()), i === "setter" && ((s = Object.create(s)).wrapped = !0), r.set(t.name, s), i === "accessor") {
-    const { name: n } = t;
-    return { set(a) {
-      const d = e.get.call(this);
-      e.set.call(this, a), this.requestUpdate(n, d, s);
-    }, init(a) {
-      return a !== void 0 && this.C(n, void 0, s, a), a;
-    } };
-  }
-  if (i === "setter") {
-    const { name: n } = t;
-    return function(a) {
-      const d = this[n];
-      e.call(this, a), this.requestUpdate(n, d, s);
-    };
-  }
-  throw Error("Unsupported decorator location: " + i);
-};
-function h(s) {
-  return (e, t) => typeof t == "object" ? J(s, e, t) : ((i, o, r) => {
-    const n = o.hasOwnProperty(r);
-    return o.constructor.createProperty(r, i), n ? Object.getOwnPropertyDescriptor(o, r) : void 0;
-  })(s, e, t);
-}
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-function U(s) {
-  return h({ ...s, state: !0, attribute: !1 });
-}
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const W = (s, e, t) => (t.configurable = !0, t.enumerable = !0, Reflect.decorate && typeof e != "object" && Object.defineProperty(s, e, t), t);
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-function X(s) {
-  return (e, t) => {
-    const { slot: i, selector: o } = s ?? {}, r = "slot" + (i ? `[name=${i}]` : ":not([name])");
-    return W(e, t, { get() {
-      var d;
-      const n = (d = this.renderRoot) == null ? void 0 : d.querySelector(r), a = (n == null ? void 0 : n.assignedElements(s)) ?? [];
-      return o === void 0 ? a : a.filter((b) => b.matches(o));
-    } });
-  };
-}
-const F = ':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 G = Object.defineProperty, Q = Object.getOwnPropertyDescriptor, c = (s, e, t, i) => {
-  for (var o = i > 1 ? void 0 : i ? Q(e, t) : e, r = s.length - 1, n; r >= 0; r--)
-    (n = s[r]) && (o = (i ? n(e, t, o) : n(o)) || o);
-  return i && o && G(e, t, o), o;
-};
-let l = class extends _ {
+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();
@@ -365,9 +21,9 @@ let l = class extends _ {
     return this._value;
   }
   /** Updates the value, triggers reactivity and form value update. */
-  set value(s) {
-    const e = this._value;
-    this._value = s, 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() {
@@ -377,27 +33,27 @@ let l = class extends _ {
     super.disconnectedCallback && super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeydown), this._removeOutsideClickListener();
   }
   firstUpdated() {
-    const s = this.items.find((e) => e.hasAttribute("selected"));
+    const e = this.items.find((t) => t.hasAttribute("selected"));
     queueMicrotask(() => {
-      var e;
-      !this.value && s ? (this.initialValue = s.value, this.initialLabel = (e = s.textContent) == null ? void 0 : e.trim(), this.value = this.initialValue, this.selectedLabel = this.initialLabel, this.activeIndex = this.items.indexOf(s)) : (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(s) {
-    var t, i;
-    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(s.key)) {
+      if (["ArrowDown", "ArrowUp", " "].includes(e.key)) {
         this._toggleMenu();
-        const o = this.items.findIndex((r) => r.hasAttribute("selected"));
-        this.activeIndex = o >= 0 ? o : 0, this.updateComplete.then(() => this._focusActiveItem()), s.preventDefault(), s.stopImmediatePropagation();
-      } else if (["ArrowLeft", "ArrowRight"].includes(s.key)) {
-        s.preventDefault(), s.stopImmediatePropagation();
-        const o = this.items.find((a) => a.hasAttribute("selected")), r = o ? this.items.indexOf(o) : -1;
+        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;
-        s.key === "ArrowLeft" ? n = Math.max(r - 1, 0) : s.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 = (i = this.items[this.activeIndex].textContent) == null ? void 0 : i.trim(), this._syncSelectedItem(), this.dispatchEvent(new CustomEvent("change", {
+        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
@@ -405,49 +61,49 @@ let l = class extends _ {
       }
       return;
     }
-    switch (s.key) {
+    switch (e.key) {
       case "ArrowDown":
-        s.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":
-        s.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(s) {
-    this.value = s.detail.value, this.selectedLabel = s.detail.selectedLabel, this._syncSelectedItem(), queueMicrotask(() => {
-      var i;
-      const e = this.items.find((o) => o.hasAttribute("selected"));
-      this.activeIndex = this.items.indexOf(e), this._toggleMenu();
-      const t = (i = this.shadowRoot) == null ? void 0 : i.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(s) {
-    var e;
+  _handleOutsideClick(e) {
+    var t;
     if (this.open) {
-      const t = s.composedPath(), i = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".menu");
-      (!i || !t.includes(i)) && (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 s = this.items.find((t) => t.value === this.initialValue);
-    s ? (this.selectedLabel = (e = s.textContent) == null ? void 0 : e.trim(), this.activeIndex = this.items.indexOf(s)) : (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(s) {
-    var t;
-    const e = this.items.find((i) => i.value === s);
-    e ? (this.selectedLabel = (t = e.textContent) == null ? void 0 : t.trim(), this.activeIndex = this.items.indexOf(e), this._syncSelectedItem(), this.value = s) : 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. */
@@ -458,28 +114,28 @@ let l = class extends _ {
   }
   /** Marks selected item visually based on value. */
   _syncSelectedItem() {
-    this.items.forEach((s) => {
-      const e = s;
-      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, i = window.innerHeight - e.bottom, o = i >= t ? "down" : "up";
-    this.setAttribute("data-open-direction", o);
-    const r = (a = this.shadowRoot) == null ? void 0 : a.querySelector(".menu");
+    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 d = o === "down" ? i - 16 : t - 16;
-      r.style.maxHeight = `${d}px`;
+      const g = s === "down" ? o - 16 : i - 16;
+      r.style.maxHeight = `${g}px`;
     }
   }
   /** Focuses the currently active item (for keyboard nav). */
   _focusActiveItem() {
-    var s, e;
+    var e, t;
     if (this.items.length > 0 && this.activeIndex > -1) {
-      const t = (e = (s = this.items[this.activeIndex]) == null ? void 0 : s.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. */
@@ -488,17 +144,17 @@ let l = class extends _ {
   }
   // == Render ==
   render() {
-    const s = {
+    const e = {
       disabled: this.disabled,
       error: this.error
     };
-    return y`
+    return p`
       <div class="dropdown-wrapper">
-        ${this.label ? y`
-          <form-label id="${this.inputId}-label" for="${this.inputId}" text="${this.label}" ?required="${this.required}" ?disabled="${this.disabled}"></form-label>` : v}
+        ${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 ${M(s)}"
-               aria-disabled="${this.disabled ? !0 : v}"
+          <div class="toggle ${y(e)}"
+               aria-disabled="${this.disabled ? !0 : u}"
                role="button"
                tabindex="${this.disabled ? "-1" : "0"}"
                @click="${this._toggleMenu}"
@@ -513,85 +169,85 @@ let l = class extends _ {
             <slot></slot>
           </div>
         </div>
-        ${this.error ? y`<form-error-message text="${this.errorText}"></form-error-message>` : v}
+        ${this.error ? p`<form-error-message text="${this.errorText}"></form-error-message>` : u}
       </div>
     `;
   }
 };
 l.styles = [
-  _.styles,
-  A(F)
+  m.styles,
+  v(_)
 ];
 l.formAssociated = !0;
-c([
-  h({ type: String, attribute: "error-text" })
+d([
+  a({ type: String, attribute: "error-text" })
 ], l.prototype, "errorText", 2);
-c([
-  h({ type: String, attribute: "input-id" })
+d([
+  a({ type: String, attribute: "input-id" })
 ], l.prototype, "inputId", 2);
-c([
-  h({ type: String })
+d([
+  a({ type: String })
 ], l.prototype, "label", 2);
-c([
-  h({ type: String, reflect: !0 })
+d([
+  a({ type: String, reflect: !0 })
 ], l.prototype, "name", 2);
-c([
-  h({ type: String, attribute: "selected-label" })
+d([
+  a({ type: String, attribute: "selected-label" })
 ], l.prototype, "selectedLabel", 2);
-c([
-  h({ type: Boolean, reflect: !0 })
+d([
+  a({ type: Boolean, reflect: !0 })
 ], l.prototype, "disabled", 2);
-c([
-  h({ type: Boolean, reflect: !0 })
+d([
+  a({ type: Boolean, reflect: !0 })
 ], l.prototype, "error", 2);
-c([
-  h({ type: Boolean, reflect: !0 })
+d([
+  a({ type: Boolean, reflect: !0 })
 ], l.prototype, "open", 2);
-c([
-  h({ type: Boolean, reflect: !0 })
+d([
+  a({ type: Boolean, reflect: !0 })
 ], l.prototype, "required", 2);
-c([
-  U()
+d([
+  b()
 ], l.prototype, "activeIndex", 2);
-c([
-  U()
+d([
+  b()
 ], l.prototype, "_value", 2);
-c([
-  X({ selector: "ucds-dropdown-item" })
+d([
+  x({ selector: "ucds-dropdown-item" })
 ], l.prototype, "items", 2);
-l = c([
-  I("ucds-dropdown")
+l = d([
+  w("ucds-dropdown")
 ], l);
-const Y = ".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 Z = Object.defineProperty, ee = Object.getOwnPropertyDescriptor, S = (s, e, t, i) => {
-  for (var o = i > 1 ? void 0 : i ? ee(e, t) : e, r = s.length - 1, n; r >= 0; r--)
-    (n = s[r]) && (o = (i ? n(e, t, o) : n(o)) || o);
-  return i && o && Z(e, t, o), o;
+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 m = class extends _ {
+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 s = (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: s },
+      detail: { value: this.value, selectedLabel: e },
       bubbles: !0,
       composed: !0
     }));
   }
   /** Handle Enter, Tab, or Esc key to activate the item. */
-  _handleKeydown(s) {
-    (s.key === "Enter" || s.key === "Tab" || s.key === "Esc") && (s.preventDefault(), this._select());
+  _handleKeydown(e) {
+    (e.key === "Enter" || e.key === "Tab" || e.key === "Esc") && (e.preventDefault(), this._select());
   }
   // == Render ==
   render() {
-    return y`
+    return p`
       <div class="dropdown-item ${this.selected ? "selected" : ""}"
-        aria-selected="${this.selected ? !0 : v}"
+        aria-selected="${this.selected ? !0 : u}"
         role="option"
         tabindex="-1"
         @click=${this._select}
@@ -603,20 +259,20 @@ let m = class extends _ {
     `;
   }
 };
-m.styles = [
-  _.styles,
-  A(Y)
+c.styles = [
+  m.styles,
+  v(L)
 ];
-S([
-  h({ type: String })
-], m.prototype, "value", 2);
-S([
-  h({ type: Boolean, reflect: !0 })
-], m.prototype, "selected", 2);
-m = S([
-  I("ucds-dropdown-item")
-], m);
+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 {
   l as Dropdown,
-  m as DropdownItem
+  c as DropdownItem
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucalgary-design-system/dropdown",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "type": "module",
   "main": "index.js",
   "module": "index.js",
@@ -11,10 +11,10 @@
     }
   },
   "peerDependencies": {
-    "@ucalgary-design-system/core": "^1.0.3",
+    "@ucalgary-design-system/core": "^1.0.4",
     "@ucalgary-design-system/helper-components": "^1.0.2",
-    "@ucalgary-design-system/icon": "^1.0.3",
-    "@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",