@duyluonganduin/acl-web-components 0.0.58 → 0.0.59

package/dist/{anduin-table-gTUL80nN.js → anduin-table-DRPTUmAM.js}

@@ -3,16 +3,16 @@
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const k2 = globalThis, T5 = k2.ShadowRoot && (k2.ShadyCSS === void 0 || k2.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, I5 = Symbol(), be = /* @__PURE__ */ new WeakMap();
+const k2 = globalThis, I5 = k2.ShadowRoot && (k2.ShadyCSS === void 0 || k2.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, T5 = Symbol(), be = /* @__PURE__ */ new WeakMap();
 let e3 = class {
   constructor(e, t, o) {
-    if (this._$cssResult$ = !0, o !== I5) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    if (this._$cssResult$ = !0, o !== T5) 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 (T5 && e === void 0) {
+    if (I5 && e === void 0) {
       const o = t !== void 0 && t.length === 1;
       o && (e = be.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), o && be.set(t, e));
     }
@@ -22,20 +22,20 @@ let e3 = class {
     return this.cssText;
   }
 };
-const t3 = (r) => new e3(typeof r == "string" ? r : r + "", void 0, I5), g = (r, ...e) => {
+const t3 = (r) => new e3(typeof r == "string" ? r : r + "", void 0, T5), g = (r, ...e) => {
   const t = r.length === 1 ? r[0] : e.reduce((o, i, n) => o + ((l) => {
     if (l._$cssResult$ === !0) return l.cssText;
     if (typeof l == "number") return l;
     throw Error("Value passed to 'css' function must be a 'css' function result: " + l + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
   })(i) + r[n + 1], r[0]);
-  return new e3(t, r, I5);
+  return new e3(t, r, T5);
 }, $3 = (r, e) => {
-  if (T5) r.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
+  if (I5) r.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
   else for (const t of e) {
     const o = document.createElement("style"), i = k2.litNonce;
     i !== void 0 && o.setAttribute("nonce", i), o.textContent = t.cssText, r.appendChild(o);
   }
-}, ye = T5 ? (r) => r : (r) => r instanceof CSSStyleSheet ? ((e) => {
+}, ye = I5 ? (r) => r : (r) => r instanceof CSSStyleSheet ? ((e) => {
   let t = "";
   for (const o of e.cssRules) t += o.cssText;
   return t3(t);
@@ -291,7 +291,7 @@ function l3(r, e) {
   if (!j5(r) || !r.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return Ve !== void 0 ? Ve.createHTML(e) : e;
 }
-const T3 = (r, e) => {
+const I3 = (r, e) => {
   const t = r.length - 1, o = [];
   let i, n = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", l = J1;
   for (let d = 0; d < t; d++) {
@@ -308,7 +308,7 @@ class C2 {
     let i;
     this.parts = [];
     let n = 0, l = 0;
-    const d = e.length - 1, c = this.parts, [C, p] = T3(e, t);
+    const d = e.length - 1, c = this.parts, [C, p] = I3(e, t);
     if (this.el = C2.createElement(C, o), V1.currentNode = this.el.content, t === 2 || t === 3) {
       const f = this.el.content.firstChild;
       f.replaceWith(...f.childNodes);
@@ -347,7 +347,7 @@ function O1(r, e, t = r, o) {
   const n = d2(e) ? void 0 : e._$litDirective$;
   return (i == null ? void 0 : i.constructor) !== n && ((d = i == null ? void 0 : i._$AO) == null || d.call(i, !1), n === void 0 ? i = void 0 : (i = new n(r), i._$AT(r, t, o)), o !== void 0 ? (t._$Co ?? (t._$Co = []))[o] = i : t._$Cl = i), i !== void 0 && (e = O1(r, i._$AS(r, e.values), i, o)), e;
 }
-class I3 {
+class T3 {
   constructor(e, t) {
     this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = t;
   }
@@ -411,7 +411,7 @@ class w2 {
     const { values: t, _$litType$: o } = e, i = typeof o == "number" ? this._$AC(e) : (o.el === void 0 && (o.el = C2.createElement(l3(o.h, o.h[0]), this.options)), o);
     if (((n = this._$AH) == null ? void 0 : n._$AD) === i) this._$AH.p(t);
     else {
-      const l = new I3(i, this), d = l.u(this.options);
+      const l = new T3(i, this), d = l.u(this.options);
       l.p(t), this.T(d), this._$AH = l;
     }
   }
@@ -997,17 +997,17 @@ X5.styles = g`
       }
     }
   `;
-let T1 = X5;
+let I1 = X5;
 U5([
   s({ reflect: !0 })
-], T1.prototype, "state");
+], I1.prototype, "state");
 U5([
   s({ type: Number, reflect: !0 })
-], T1.prototype, "size");
+], I1.prototype, "size");
 U5([
   R(".ai-spinner")
-], T1.prototype, "wrapper");
-customElements.get("anduin-ai-spinner") || customElements.define("anduin-ai-spinner", T1);
+], I1.prototype, "wrapper");
+customElements.get("anduin-ai-spinner") || customElements.define("anduin-ai-spinner", I1);
 const Se = {
   access: [{ d: "M13 2.5H3C2.72386 2.5 2.5 2.72386 2.5 3V5.75H1V3C1 1.89543 1.89543 1 3 1H13C14.1046 1 15 1.89543 15 3V13C15 14.1046 14.1046 15 13 15H3C1.89543 15 1 14.1046 1 13V10.25H2.5V13C2.5 13.2761 2.72386 13.5 3 13.5H13C13.2761 13.5 13.5 13.2761 13.5 13V3C13.5 2.72386 13.2761 2.5 13 2.5ZM7.53033 4.21979C7.23744 3.9269 6.76256 3.9269 6.46967 4.21979C6.17678 4.51269 6.17678 4.98756 6.46967 5.28045L8.43922 7.25L0.75 7.25C0.335786 7.25 0 7.58579 0 8C0 8.41421 0.335786 8.75 0.75 8.75L8.43946 8.75L6.46967 10.7198C6.17678 11.0127 6.17678 11.4876 6.46967 11.7805C6.76256 12.0733 7.23744 12.0733 7.53033 11.7805L10.7803 8.53044C11.0732 8.23755 11.0732 7.76268 10.7803 7.46978L7.53033 4.21979Z", fillRule: "evenodd", clipRule: "evenodd" }],
   alignCenter: [{ d: "M2 1C1.44772 1 1 1.44772 1 2C1 2.55228 1.44772 3 2 3H14C14.5523 3 15 2.55228 15 2C15 1.44772 14.5523 1 14 1H2ZM2 9C1.44772 9 1 9.44771 1 10C1 10.5523 1.44772 11 2 11H14C14.5523 11 15 10.5523 15 10C15 9.44771 14.5523 9 14 9H2ZM4 6C4 5.44772 4.44772 5 5 5H11C11.5523 5 12 5.44772 12 6C12 6.55228 11.5523 7 11 7H5C4.44772 7 4 6.55228 4 6ZM5 13C4.44772 13 4 13.4477 4 14C4 14.5523 4.44772 15 5 15H11C11.5523 15 12 14.5523 12 14C12 13.4477 11.5523 13 11 13H5Z", fillRule: "evenodd", clipRule: "evenodd" }],
@@ -2221,7 +2221,7 @@ var L7 = Object.defineProperty, K = (r, e, t, o) => {
     (l = r[n]) && (i = l(e, t, i) || i);
   return i && L7(e, t, i), i;
 };
-const Ae = "anduin-input:change", V7 = "anduin-input:clear", I2 = class I2 extends h {
+const Ae = "anduin-input:change", V7 = "anduin-input:clear", T2 = class T2 extends h {
   constructor() {
     super(...arguments), this.value = "", this.size = "default", this.disabled = !1, this.readonly = !1, this.placeholder = "", this.inputid = "", this.status = "", this.startIcon = "", this.endIcon = "", this.clearable = !1;
   }
@@ -2319,7 +2319,7 @@ const Ae = "anduin-input:change", V7 = "anduin-input:clear", I2 = class I2 exten
     `;
   }
 };
-I2.shadowRootOptions = { ...h.shadowRootOptions, delegatesFocus: !0 }, I2.styles = g`
+T2.shadowRootOptions = { ...h.shadowRootOptions, delegatesFocus: !0 }, T2.styles = g`
     :host { display: block; font-family: var(--font-sans); }
 
     .input-wrapper { position: relative; display: flex; align-items: center; }
@@ -2373,7 +2373,7 @@ I2.shadowRootOptions = { ...h.shadowRootOptions, delegatesFocus: !0 }, I2.styles
     }
     .input__clear:hover { color: var(--color-gray-7); }
   `;
-let B = I2;
+let B = T2;
 K([
   s()
 ], B.prototype, "value");
@@ -2554,16 +2554,16 @@ u4.styles = g`
     .tabs { display: flex; flex-direction: column; width: 100%; }
     :host([fill]) .tabs { flex: 1; min-height: 0; }
   `;
-let I1 = u4;
+let T1 = u4;
 N([
   s({ attribute: "default-value" })
-], I1.prototype, "defaultValue");
+], T1.prototype, "defaultValue");
 N([
   s()
-], I1.prototype, "value");
+], T1.prototype, "value");
 N([
   s({ type: Boolean, reflect: !0 })
-], I1.prototype, "fill");
+], T1.prototype, "fill");
 const g4 = class g4 extends h {
   constructor() {
     super(...arguments), this.alignment = "left", this.lastActiveValue = "", this.resizeObserver = null;
@@ -2743,7 +2743,7 @@ N([
 N([
   y()
 ], y2.prototype, "isActive");
-customElements.get("anduin-tabs") || customElements.define("anduin-tabs", I1);
+customElements.get("anduin-tabs") || customElements.define("anduin-tabs", T1);
 customElements.get("anduin-tabs-list") || customElements.define("anduin-tabs-list", b2);
 customElements.get("anduin-tab-trigger") || customElements.define("anduin-tab-trigger", n1);
 customElements.get("anduin-tab-content") || customElements.define("anduin-tab-content", y2);
@@ -3212,7 +3212,7 @@ function O7(r, e, t, o = 8) {
 function C5(r) {
   return r.split("-")[0] || "top";
 }
-function T7(r, e, t) {
+function I7(r, e, t) {
   let o = !1, i = t.length - 1;
   for (let n = 0; n < t.length; n++) {
     const l = t[n][0], d = t[n][1], c = t[i][0], C = t[i][1];
@@ -3325,7 +3325,7 @@ const V4 = class V4 extends h {
       var n, l;
       if (!this.graceArea) return;
       const t = e.target, o = ((n = this.triggerEl) == null ? void 0 : n.contains(t)) ?? !1, i = ((l = this.popupEl) == null ? void 0 : l.contains(t)) ?? !1;
-      o || i ? this.graceArea = null : T7(e.clientX, e.clientY, this.graceArea) || (this.graceArea = null, this.dispatchEvent(new CustomEvent(W5, { bubbles: !0, composed: !0 })));
+      o || i ? this.graceArea = null : I7(e.clientX, e.clientY, this.graceArea) || (this.graceArea = null, this.dispatchEvent(new CustomEvent(W5, { bubbles: !0, composed: !0 })));
     }, this.handleTriggerLeave = (e) => {
       this.triggerEl && this.popupEl && this.createGraceArea(this.triggerEl, this.popupEl, e);
     }, this.handleContentLeave = (e) => {
@@ -3411,10 +3411,10 @@ let h5 = V4;
 customElements.get("anduin-tooltip") || customElements.define("anduin-tooltip", H2);
 customElements.get("anduin-tooltip-trigger") || customElements.define("anduin-tooltip-trigger", p5);
 customElements.get("anduin-tooltip-content") || customElements.define("anduin-tooltip-content", h5);
-var I7 = Object.defineProperty, N7 = (r, e, t, o) => {
+var T7 = Object.defineProperty, N7 = (r, e, t, o) => {
   for (var i = void 0, n = r.length - 1, l; n >= 0; n--)
     (l = r[n]) && (i = l(e, t, i) || i);
-  return i && I7(e, t, i), i;
+  return i && T7(e, t, i), i;
 };
 const j7 = "anduin-well-close:click", x4 = class x4 extends h {
   constructor() {
@@ -4442,7 +4442,7 @@ var Q7 = Object.defineProperty, z1 = (r, e, t, o) => {
     (l = r[n]) && (i = l(e, t, i) || i);
   return i && Q7(e, t, i), i;
 };
-const Te = [
+const Ie = [
   { bg: "#6172F3", text: "#ffffff" },
   { bg: "#B692F6", text: "#ffffff" },
   { bg: "#F670C7", text: "#ffffff" },
@@ -4455,7 +4455,7 @@ const Te = [
 function e0(r) {
   let e = 0;
   for (let t = 0; t < r.length; t++) e = e * 31 + r.charCodeAt(t) >>> 0;
-  return Te[e % Te.length];
+  return Ie[e % Ie.length];
 }
 function t0(r, e = 2) {
   var i;
@@ -4889,7 +4889,7 @@ var c0 = Object.defineProperty, S1 = (r, e, t, o) => {
     (l = r[n]) && (i = l(e, t, i) || i);
   return i && c0(e, t, i), i;
 };
-const Ie = {
+const Te = {
   gray: "info",
   primary: "infoCircleLine",
   success: "checkCircle",
@@ -4915,7 +4915,7 @@ const Ie = {
     this.dismiss();
   }
   render() {
-    const e = Ie[this.variant] ?? Ie.gray;
+    const e = Te[this.variant] ?? Te.gray;
     return a`
       <div
         class="toast toast--${this.variant} ${this._dismissing ? "toast--dismissing" : ""}"
@@ -5316,16 +5316,16 @@ M3([
   s({ type: Boolean })
 ], V2.prototype, "disabled");
 customElements.get("anduin-switcher") || customElements.define("anduin-switcher", V2);
-var g0 = Object.defineProperty, S = (r, e, t, o) => {
+var g0 = Object.defineProperty, $ = (r, e, t, o) => {
   for (var i = void 0, n = r.length - 1, l; n >= 0; n--)
     (l = r[n]) && (i = l(e, t, i) || i);
   return i && g0(e, t, i), i;
 };
 const Ne = "anduin-dropdown:change", B4 = class B4 extends h {
   constructor() {
-    super(...arguments), this.value = "", this.placeholder = "Select...", this.options = [], this.icon = "", this.searchable = !0, this.disabled = !1, this.placement = "bottom-start", this.appearance = "filled", this.variant = "gray0", this.size = "default", this.fullWidth = !1, this.clearable = !0, this._open = !1, this._query = "", this._onOutsideClick = (e) => {
+    super(...arguments), this.value = "", this.placeholder = "Select...", this.options = [], this.icon = "", this.searchable = !0, this.disabled = !1, this.placement = "bottom-start", this.appearance = "filled", this.variant = "gray0", this.size = "default", this.fullWidth = !1, this.clearable = !0, this._open = !1, this._query = "", this._activeIndex = -1, this._onOutsideClick = (e) => {
       var t;
-      !this.contains(e.target) && !((t = this.shadowRoot) != null && t.contains(e.target)) && (this._open = !1, this._query = "");
+      !this.contains(e.target) && !((t = this.shadowRoot) != null && t.contains(e.target)) && (this._open = !1, this._query = "", this._activeIndex = -1);
     }, this._onScrollOrResize = () => {
       this._open && this._updatePosition();
     };
@@ -5337,20 +5337,47 @@ const Ne = "anduin-dropdown:change", B4 = class B4 extends h {
     super.disconnectedCallback(), document.removeEventListener("click", this._onOutsideClick), window.removeEventListener("scroll", this._onScrollOrResize, { capture: !0 }), window.removeEventListener("resize", this._onScrollOrResize);
   }
   updated(e) {
-    e.has("_open") && this._open && requestAnimationFrame(() => {
-      var t, o;
+    var t, o;
+    e.has("_activeIndex") && this._activeIndex >= 0 && ((o = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".option--active")) == null || o.scrollIntoView({ block: "nearest" })), e.has("_open") && this._open && requestAnimationFrame(() => {
+      var i, n;
       if (this._updatePosition(), this.searchable) {
-        const i = (o = (t = this._searchEl) == null ? void 0 : t.shadowRoot) == null ? void 0 : o.querySelector("input");
-        i == null || i.focus();
+        const l = (n = (i = this._searchEl) == null ? void 0 : i.shadowRoot) == null ? void 0 : n.querySelector("input");
+        l == null || l.focus();
       }
     });
   }
   _onTriggerClick() {
-    this.disabled || (this._open = !this._open, this._open || (this._query = ""));
+    this.disabled || (this._open = !this._open, this._activeIndex = -1, this._open || (this._query = ""));
   }
+  // Bound on both the trigger and the panel, so it hears keys whether focus is
+  // on the trigger (searchable off) or in the search input (keydown is composed
+  // and bubbles out of anduin-input's shadow root). Before 0.0.59 only Escape
+  // was handled; the arrows and Enter are new and act only while the panel is
+  // open, so a closed dropdown's keyboard behaviour is unchanged.
   _onKeyDown(e) {
     var t;
-    e.key === "Escape" && (this._open = !1, this._query = "", (t = this._triggerEl) == null || t.focus());
+    if (e.key === "Escape") {
+      this._open = !1, this._query = "", this._activeIndex = -1, (t = this._triggerEl) == null || t.focus();
+      return;
+    }
+    if (this._open) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp")
+        e.preventDefault(), this._moveActive(e.key === "ArrowDown" ? 1 : -1);
+      else if (e.key === "Enter" && this._activeIndex >= 0) {
+        e.preventDefault();
+        const o = this._filteredOptions[this._activeIndex];
+        o && this._selectOption(o);
+      }
+    }
+  }
+  /** Step the highlight by `dir`, skipping disabled rows; stays put at either end. */
+  _moveActive(e) {
+    const t = this._filteredOptions;
+    for (let o = this._activeIndex + e; o >= 0 && o < t.length; o += e)
+      if (!t[o].disabled) {
+        this._activeIndex = o;
+        return;
+      }
   }
   _onClear(e) {
     e.stopPropagation(), this.clearable && (this.value = "", this.dispatchEvent(new CustomEvent(Ne, {
@@ -5360,11 +5387,11 @@ const Ne = "anduin-dropdown:change", B4 = class B4 extends h {
     })));
   }
   _selectOption(e) {
-    this.value = e.value, this._open = !1, this._query = "", this.dispatchEvent(new CustomEvent(Ne, {
+    e.disabled || (this.value = e.value, this._open = !1, this._query = "", this._activeIndex = -1, this.dispatchEvent(new CustomEvent(Ne, {
       detail: e.value,
       bubbles: !0,
       composed: !0
-    }));
+    })));
   }
   _updatePosition() {
     const e = this._triggerEl, t = this._panelEl;
@@ -5420,24 +5447,31 @@ const Ne = "anduin-dropdown:change", B4 = class B4 extends h {
                 placeholder="Search ..."
                 .value=${this._query}
                 @anduin-input:change=${(l) => {
-      this._query = l.detail;
+      this._query = l.detail, this._activeIndex = -1;
     }}
               ></anduin-input>
             </div>
           ` : u}
           <div class="options">
-            ${i.length ? i.map((l) => a`
+            ${i.length ? i.map((l, d) => a`
                   <div
-                    class="option"
+                    class="option${l.disabled ? " option--disabled" : ""}${l.description ? " option--described" : ""}${d === this._activeIndex ? " option--active" : ""}"
                     role="option"
                     aria-selected=${l.value === this.value}
+                    aria-disabled=${l.disabled ? "true" : u}
                     @click=${() => this._selectOption(l)}
+                    @mouseenter=${() => {
+      this._activeIndex >= 0 && !l.disabled && (this._activeIndex = d);
+    }}
                   >
                     <span class="option__check">
                       ${l.value === this.value ? a`<anduin-icon name="checkSmall" size="16"></anduin-icon>` : u}
                     </span>
                     ${l.icon ? a`<anduin-icon name="${l.icon}" size="16"></anduin-icon>` : u}
-                    <span class="option__label">${l.label}</span>
+                    ${l.description ? a`<span class="option__text">
+                          <span class="option__label">${l.label}</span>
+                          <span class="option__description" part="option-description">${l.description}</span>
+                        </span>` : a`<span class="option__label">${l.label}</span>`}
                   </div>
                 `) : a`<div class="empty">No results</div>`}
           </div>
@@ -5622,9 +5656,40 @@ B4.styles = g`
     }
     .option:hover  { background: var(--color-gray-2, #f2f4f7); }
     .option:active { background: var(--color-gray-3, #e4e7ec); }
+    /* Keyboard highlight. The same fill as :hover, so a row reached by arrow
+       keys reads exactly like one under the pointer. Only ever set by a key
+       press (see _activeIndex), so a dropdown driven by the mouse alone paints
+       as it always did. */
+    .option--active { background: var(--color-gray-2, #f2f4f7); }
     .option__check { flex-shrink: 0; width: 16px; display: flex; align-items: center; color: var(--color-gray-7, #344054); }
     .option__label { flex: 1; min-width: 0; }
 
+    /* Disabled option: visible but unavailable. Opacity 0.5 is the design
+       system's own value for anduin-select-item[disabled]. The cursor is
+       default rather than its not-allowed, to match this library's disabled
+       trigger (.trigger:disabled) — nothing here uses not-allowed. Hover and
+       press draw no fill, so the row never pretends it can be picked. */
+    .option--disabled { opacity: 0.5; cursor: default; }
+    .option--disabled:hover,
+    .option--disabled:active { background: transparent; }
+
+    /* Option with a description: two lines. The label keeps its own line and
+       typography; the description sits under it at 12px in gray-6 (the
+       placeholder's ink — lighter than the gray-9 label, still legible on a
+       dimmed disabled row). The row aligns to the top so the check and icon line
+       up with the label rather than the middle of the block; each is 16px tall
+       against a 20px label line, hence the 2px nudge. Rows without a
+       description never get --described, so their height is unchanged. */
+    .option--described { align-items: flex-start; }
+    .option--described > .option__check,
+    .option--described > anduin-icon { margin-top: 2px; }
+    .option__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+    .option__description {
+      font-size: 12px;
+      line-height: 16px;
+      color: var(--color-gray-6, #667085);
+    }
+
     .empty {
       padding: 12px 16px;
       font-size: 13px;
@@ -5632,59 +5697,62 @@ B4.styles = g`
       text-align: center;
     }
   `;
-let Z = B4;
-S([
+let w = B4;
+$([
   s()
-], Z.prototype, "value");
-S([
+], w.prototype, "value");
+$([
   s()
-], Z.prototype, "placeholder");
-S([
+], w.prototype, "placeholder");
+$([
   s({ attribute: !1 })
-], Z.prototype, "options");
-S([
+], w.prototype, "options");
+$([
   s()
-], Z.prototype, "icon");
-S([
+], w.prototype, "icon");
+$([
   s({ type: Boolean })
-], Z.prototype, "searchable");
-S([
+], w.prototype, "searchable");
+$([
   s({ type: Boolean })
-], Z.prototype, "disabled");
-S([
+], w.prototype, "disabled");
+$([
   s()
-], Z.prototype, "placement");
-S([
+], w.prototype, "placement");
+$([
   s()
-], Z.prototype, "appearance");
-S([
+], w.prototype, "appearance");
+$([
   s()
-], Z.prototype, "variant");
-S([
+], w.prototype, "variant");
+$([
   s()
-], Z.prototype, "size");
-S([
+], w.prototype, "size");
+$([
   s({ type: Boolean, attribute: "full-width", reflect: !0 })
-], Z.prototype, "fullWidth");
-S([
+], w.prototype, "fullWidth");
+$([
   s({ converter: (r) => r !== "false" })
-], Z.prototype, "clearable");
-S([
+], w.prototype, "clearable");
+$([
   y()
-], Z.prototype, "_open");
-S([
+], w.prototype, "_open");
+$([
+  y()
+], w.prototype, "_query");
+$([
   y()
-], Z.prototype, "_query");
-S([
+], w.prototype, "_activeIndex");
+$([
   R(".trigger")
-], Z.prototype, "_triggerEl");
-S([
+], w.prototype, "_triggerEl");
+$([
   R(".panel")
-], Z.prototype, "_panelEl");
-S([
+], w.prototype, "_panelEl");
+$([
   R("anduin-input")
-], Z.prototype, "_searchEl");
-customElements.get("anduin-dropdown") || customElements.define("anduin-dropdown", Z);
+], w.prototype, "_searchEl");
+customElements.get("anduin-dropdown") || customElements.define("anduin-dropdown", w);
 var f0 = Object.defineProperty, a1 = (r, e, t, o) => {
   for (var i = void 0, n = r.length - 1, l; n >= 0; n--)
     (l = r[n]) && (i = l(e, t, i) || i);
@@ -5993,7 +6061,7 @@ class b0 extends HTMLElement {
   }
 }
 customElements.get("anduin-drawer-close") || customElements.define("anduin-drawer-close", b0);
-var y0 = Object.defineProperty, $ = (r, e, t, o) => {
+var y0 = Object.defineProperty, E = (r, e, t, o) => {
   for (var i = void 0, n = r.length - 1, l; n >= 0; n--)
     (l = r[n]) && (i = l(e, t, i) || i);
   return i && y0(e, t, i), i;
@@ -6284,68 +6352,68 @@ O4.styles = g`
       text-align: center;
     }
   `;
-let w = O4;
-$([
+let Z = O4;
+E([
   s()
-], w.prototype, "value");
-$([
+], Z.prototype, "value");
+E([
   s()
-], w.prototype, "size");
-$([
+], Z.prototype, "size");
+E([
   s({ type: Boolean })
-], w.prototype, "disabled");
-$([
+], Z.prototype, "disabled");
+E([
   s({ type: Boolean })
-], w.prototype, "readonly");
-$([
+], Z.prototype, "readonly");
+E([
   s()
-], w.prototype, "placeholder");
-$([
+], Z.prototype, "placeholder");
+E([
   s()
-], w.prototype, "inputid");
-$([
+], Z.prototype, "inputid");
+E([
   s()
-], w.prototype, "status");
-$([
+], Z.prototype, "status");
+E([
   s({ attribute: "start-icon" })
-], w.prototype, "startIcon");
-$([
+], Z.prototype, "startIcon");
+E([
   s({ attribute: "end-icon" })
-], w.prototype, "endIcon");
-$([
+], Z.prototype, "endIcon");
+E([
   s({ type: Boolean })
-], w.prototype, "clearable");
-$([
+], Z.prototype, "clearable");
+E([
   s({ attribute: !1 })
-], w.prototype, "suggestions");
-$([
+], Z.prototype, "suggestions");
+E([
   s({ type: Boolean })
-], w.prototype, "filter");
-$([
+], Z.prototype, "filter");
+E([
   s({ type: Boolean, attribute: "hide-when-empty" })
-], w.prototype, "hideWhenEmpty");
-$([
+], Z.prototype, "hideWhenEmpty");
+E([
   s({ attribute: "empty-text" })
-], w.prototype, "emptyText");
-$([
+], Z.prototype, "emptyText");
+E([
   y()
-], w.prototype, "_open");
-$([
+], Z.prototype, "_open");
+E([
   y()
-], w.prototype, "_activeIndex");
-$([
+], Z.prototype, "_activeIndex");
+E([
   R("input")
-], w.prototype, "_inputEl");
-$([
+], Z.prototype, "_inputEl");
+E([
   R(".panel")
-], w.prototype, "_panelEl");
-customElements.get("anduin-suggestion") || customElements.define("anduin-suggestion", w);
+], Z.prototype, "_panelEl");
+customElements.get("anduin-suggestion") || customElements.define("anduin-suggestion", Z);
 var L0 = Object.defineProperty, W = (r, e, t, o) => {
   for (var i = void 0, n = r.length - 1, l; n >= 0; n--)
     (l = r[n]) && (i = l(e, t, i) || i);
   return i && L0(e, t, i), i;
 };
-const V0 = "anduin-navigation:change", _5 = "anduin-navigation-item:item-click", T4 = class T4 extends h {
+const V0 = "anduin-navigation:change", _5 = "anduin-navigation-item:item-click", I4 = class I4 extends h {
   constructor() {
     super(...arguments), this.defaultValue = "", this.value = null, this.theme = "light", this.alignment = "left", this.internalValue = "", this.onItemClick = (e) => {
       e.stopPropagation();
@@ -6388,7 +6456,7 @@ const V0 = "anduin-navigation:change", _5 = "anduin-navigation-item:item-click",
     `;
   }
 };
-T4.styles = g`
+I4.styles = g`
     :host {
       display: block;
       font-family: var(--font-sans);
@@ -6431,7 +6499,7 @@ T4.styles = g`
     .navigation--center { justify-content: center; }
     .navigation--right { justify-content: flex-end; }
   `;
-let v1 = T4;
+let v1 = I4;
 W([
   s({ attribute: "default-value" })
 ], v1.prototype, "defaultValue");
@@ -6447,7 +6515,7 @@ W([
 W([
   y()
 ], v1.prototype, "internalValue");
-const I4 = class I4 extends h {
+const T4 = class T4 extends h {
   constructor() {
     super(...arguments), this.value = "", this.startIcon = "", this.href = "", this.disabled = !1, this.selected = !1, this.theme = "light";
   }
@@ -6494,7 +6562,7 @@ const I4 = class I4 extends h {
         `;
   }
 };
-I4.styles = g`
+T4.styles = g`
     :host { display: inline-block; font-family: var(--font-sans); }
     .nav-item {
       box-sizing: border-box;
@@ -6539,7 +6607,7 @@ I4.styles = g`
     }
     .nav-item__icon { display: flex; }
   `;
-let l1 = I4;
+let l1 = T4;
 W([
   s()
 ], l1.prototype, "value");
@@ -8125,38 +8193,38 @@ Ce.styles = g`
     .calendar__day-button--in-range { color: var(--color-primary-7, var(--color-primary-5)); }
     .calendar__day-button--in-range:hover { background-color: var(--color-primary-2); }
   `;
-let I = Ce;
+let T = Ce;
 e1([
   s({ reflect: !0 })
-], I.prototype, "value");
+], T.prototype, "value");
 e1([
   s({ attribute: "min-date" })
-], I.prototype, "minDate");
+], T.prototype, "minDate");
 e1([
   s({ attribute: "max-date" })
-], I.prototype, "maxDate");
+], T.prototype, "maxDate");
 e1([
   s({ attribute: "range-start" })
-], I.prototype, "rangeStart");
+], T.prototype, "rangeStart");
 e1([
   s({ attribute: "range-end" })
-], I.prototype, "rangeEnd");
+], T.prototype, "rangeEnd");
 e1([
   s({ type: Boolean, attribute: "range-mode" })
-], I.prototype, "rangeMode");
+], T.prototype, "rangeMode");
 e1([
   y()
-], I.prototype, "_viewMonth");
+], T.prototype, "_viewMonth");
 e1([
   y()
-], I.prototype, "_viewYear");
+], T.prototype, "_viewYear");
 e1([
   y()
-], I.prototype, "_focus");
+], T.prototype, "_focus");
 e1([
   y()
-], I.prototype, "_openSelect");
-customElements.get("anduin-calendar") || customElements.define("anduin-calendar", I);
+], T.prototype, "_openSelect");
+customElements.get("anduin-calendar") || customElements.define("anduin-calendar", T);
 var P0 = Object.defineProperty, q1 = (r, e, t, o) => {
   for (var i = void 0, n = r.length - 1, l; n >= 0; n--)
     (l = r[n]) && (i = l(e, t, i) || i);
@@ -8287,13 +8355,13 @@ const he = class he extends h {
 he.styles = g`
     :host { display: inline-block; font-family: var(--font-sans); }
   `;
-let T2 = he;
-class F0 extends T2 {
+let I2 = he;
+class F0 extends I2 {
   constructor() {
     super(...arguments), this.panelRole = "start";
   }
 }
-class O0 extends T2 {
+class O0 extends I2 {
   constructor() {
     super(...arguments), this.panelRole = "end";
   }
@@ -8318,13 +8386,13 @@ customElements.get("anduin-date-range") || customElements.define("anduin-date-ra
 customElements.get("anduin-date-range-default") || customElements.define("anduin-date-range-default", F5);
 customElements.get("anduin-date-range-start") || customElements.define("anduin-date-range-start", F0);
 customElements.get("anduin-date-range-end") || customElements.define("anduin-date-range-end", O0);
-var T0 = Object.defineProperty, O = (r, e, t, o) => {
+var I0 = Object.defineProperty, O = (r, e, t, o) => {
   for (var i = void 0, n = r.length - 1, l; n >= 0; n--)
     (l = r[n]) && (i = l(e, t, i) || i);
-  return i && T0(e, t, i), i;
+  return i && I0(e, t, i), i;
 };
 const O5 = "anduin-date-input:change", qe = { M: "month", d: "day", y: "year" };
-function I0(r) {
+function T0(r) {
   const e = [];
   let t = 0, o = 0;
   for (; o < r.length; ) {
@@ -8361,7 +8429,7 @@ const e2 = 1, j2 = class j2 extends h {
     super.disconnectedCallback(), (e = this.closest("anduin-field")) == null || e.removeEventListener(u1, this._onFieldLabelClick);
   }
   willUpdate(e) {
-    e.has("format") ? (this._tokens = I0(this.format), this._segments = this._tokens.flatMap((t) => "segment" in t ? [t.segment] : []), this._digits = this._segments.map(() => null), this._active = 0, this._buffer = "", this.value && this._adoptValue(this.value)) : e.has("value") && this.value !== this._composeValue() && this._adoptValue(this.value);
+    e.has("format") ? (this._tokens = T0(this.format), this._segments = this._tokens.flatMap((t) => "segment" in t ? [t.segment] : []), this._digits = this._segments.map(() => null), this._active = 0, this._buffer = "", this.value && this._adoptValue(this.value)) : e.has("value") && this.value !== this._composeValue() && this._adoptValue(this.value);
   }
   updated() {
     const e = this._display();
@@ -8611,51 +8679,51 @@ j2.shadowRootOptions = { ...h.shadowRootOptions, delegatesFocus: !0 }, j2.styles
     .date-input--warning  { border-color: var(--color-warning-4); }
     .date-input--loading  { border-color: var(--color-gray-4); }
   `;
-let E = j2;
+let z = j2;
 O([
   s()
-], E.prototype, "format");
+], z.prototype, "format");
 O([
   s()
-], E.prototype, "value");
+], z.prototype, "value");
 O([
   s()
-], E.prototype, "size");
+], z.prototype, "size");
 O([
   s({ type: Boolean })
-], E.prototype, "disabled");
+], z.prototype, "disabled");
 O([
   s({ type: Boolean })
-], E.prototype, "readonly");
+], z.prototype, "readonly");
 O([
   s()
-], E.prototype, "status");
+], z.prototype, "status");
 O([
   s({ attribute: "start-icon" })
-], E.prototype, "startIcon");
+], z.prototype, "startIcon");
 O([
   s({ attribute: "min-date" })
-], E.prototype, "minDate");
+], z.prototype, "minDate");
 O([
   s({ attribute: "max-date" })
-], E.prototype, "maxDate");
+], z.prototype, "maxDate");
 O([
   s()
-], E.prototype, "inputid");
+], z.prototype, "inputid");
 O([
   y()
-], E.prototype, "_digits");
+], z.prototype, "_digits");
 O([
   y()
-], E.prototype, "_active");
+], z.prototype, "_active");
 O([
   y()
-], E.prototype, "_buffer");
+], z.prototype, "_buffer");
 O([
   R("input")
-], E.prototype, "_inputEl");
-customElements.get("anduin-date-input") || customElements.define("anduin-date-input", E);
-var N0 = Object.defineProperty, T = (r, e, t, o) => {
+], z.prototype, "_inputEl");
+customElements.get("anduin-date-input") || customElements.define("anduin-date-input", z);
+var N0 = Object.defineProperty, I = (r, e, t, o) => {
   for (var i = void 0, n = r.length - 1, l; n >= 0; n--)
     (l = r[n]) && (i = l(e, t, i) || i);
   return i && N0(e, t, i), i;
@@ -8788,50 +8856,50 @@ ge.styles = g`
     /* The popover contributes 8px; the calendar reads better with 16px total. */
     .datepicker__panel { padding: 8px; display: flex; flex-direction: column; }
   `;
-let z = ge;
-T([
+let S = ge;
+I([
   s()
-], z.prototype, "format");
-T([
+], S.prototype, "format");
+I([
   s()
-], z.prototype, "value");
-T([
+], S.prototype, "value");
+I([
   s()
-], z.prototype, "size");
-T([
+], S.prototype, "size");
+I([
   s({ type: Boolean })
-], z.prototype, "disabled");
-T([
+], S.prototype, "disabled");
+I([
   s({ type: Boolean })
-], z.prototype, "readonly");
-T([
+], S.prototype, "readonly");
+I([
   s()
-], z.prototype, "status");
-T([
+], S.prototype, "status");
+I([
   s({ attribute: "start-icon" })
-], z.prototype, "startIcon");
-T([
+], S.prototype, "startIcon");
+I([
   s({ attribute: "min-date" })
-], z.prototype, "minDate");
-T([
+], S.prototype, "minDate");
+I([
   s({ attribute: "max-date" })
-], z.prototype, "maxDate");
-T([
+], S.prototype, "maxDate");
+I([
   s()
-], z.prototype, "placement");
-T([
+], S.prototype, "placement");
+I([
   s()
-], z.prototype, "inputid");
-T([
+], S.prototype, "inputid");
+I([
   y()
-], z.prototype, "_open");
-T([
+], S.prototype, "_open");
+I([
   R("anduin-date-input")
-], z.prototype, "_inputEl");
-T([
+], S.prototype, "_inputEl");
+I([
   R("anduin-popover")
-], z.prototype, "_popoverEl");
-customElements.get("anduin-date-picker") || customElements.define("anduin-date-picker", z);
+], S.prototype, "_popoverEl");
+customElements.get("anduin-date-picker") || customElements.define("anduin-date-picker", S);
 var K0 = Object.defineProperty, L = (r, e, t, o) => {
   for (var i = void 0, n = r.length - 1, l; n >= 0; n--)
     (l = r[n]) && (i = l(e, t, i) || i);
@@ -9958,7 +10026,7 @@ L([
 customElements.get("anduin-table") || customElements.define("anduin-table", H);
 export {
   F2 as $,
-  T1 as A,
+  I1 as A,
   B,
   A2 as C,
   k1 as D,
@@ -9993,7 +10061,7 @@ export {
   o1 as a3,
   h2 as a4,
   p2 as a5,
-  w as a6,
+  Z as a6,
   V2 as a7,
   y2 as a8,
   n1 as a9,
@@ -10025,7 +10093,7 @@ export {
   H0 as aZ,
   u0 as a_,
   H as aa,
-  I1 as ab,
+  T1 as ab,
   b2 as ac,
   N1 as ad,
   d5 as ae,
@@ -10085,21 +10153,21 @@ export {
   lt as bv,
   g2 as c,
   k as d,
-  I as e,
+  T as e,
   z2 as f,
   g1 as g,
-  E as h,
-  z as i,
+  z as h,
+  S as i,
   Q as j,
   F5 as k,
   O0 as l,
-  T2 as m,
+  I2 as m,
   F0 as n,
   f2 as o,
   S2 as p,
   j as q,
   b0 as r,
-  Z as s,
+  w as s,
   D2 as t,
   l5 as u,
   s5 as v,