@duyluonganduin/acl-web-components 0.0.64 → 0.0.66

package/dist/{anduin-table-nCkyNUJA.js → anduin-table-D5xijY_4.js}

@@ -284,12 +284,12 @@ I1.elementStyles = [], I1.shadowRootOptions = { mode: "open" }, I1[s2("elementPr
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const a2 = globalThis, M4 = (r) => r, z2 = a2.trustedTypes, w4 = z2 ? z2.createPolicy("lit-html", { createHTML: (r) => r }) : void 0, r3 = "$lit$", p1 = `lit$${Math.random().toFixed(9).slice(2)}$`, l3 = "?" + p1, T3 = `<${l3}>`, k1 = document, c2 = () => k1.createComment(""), C2 = (r) => r === null || typeof r != "object" && typeof r != "function", G5 = Array.isArray, N3 = (r) => G5(r) || typeof (r == null ? void 0 : r[Symbol.iterator]) == "function", q2 = `[ 	
+const a2 = globalThis, w4 = (r) => r, z2 = a2.trustedTypes, M4 = z2 ? z2.createPolicy("lit-html", { createHTML: (r) => r }) : void 0, r3 = "$lit$", p1 = `lit$${Math.random().toFixed(9).slice(2)}$`, l3 = "?" + p1, T3 = `<${l3}>`, k1 = document, c2 = () => k1.createComment(""), C2 = (r) => r === null || typeof r != "object" && typeof r != "function", G5 = Array.isArray, N3 = (r) => G5(r) || typeof (r == null ? void 0 : r[Symbol.iterator]) == "function", q2 = `[ 	
 \f\r]`, e2 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Z4 = /-->/g, k4 = />/g, V1 = RegExp(`>|${q2}(?:([^\\s"'>=/]+)(${q2}*=${q2}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), R4 = /'/g, $4 = /"/g, s3 = /^(?:script|style|textarea|title)$/i, a3 = (r) => (e, ...t) => ({ _$litType$: r, strings: e, values: t }), a = a3(1), u2 = a3(2), R1 = Symbol.for("lit-noChange"), u = Symbol.for("lit-nothing"), E4 = /* @__PURE__ */ new WeakMap(), M1 = k1.createTreeWalker(k1, 129);
+\f\r"'\`<>=]|("|')|))|$)`, "g"), R4 = /'/g, $4 = /"/g, s3 = /^(?:script|style|textarea|title)$/i, a3 = (r) => (e, ...t) => ({ _$litType$: r, strings: e, values: t }), a = a3(1), u2 = a3(2), R1 = Symbol.for("lit-noChange"), u = Symbol.for("lit-nothing"), E4 = /* @__PURE__ */ new WeakMap(), w1 = k1.createTreeWalker(k1, 129);
 function d3(r, e) {
   if (!G5(r) || !r.hasOwnProperty("raw")) throw Error("invalid template strings array");
-  return w4 !== void 0 ? w4.createHTML(e) : e;
+  return M4 !== void 0 ? M4.createHTML(e) : e;
 }
 const j3 = (r, e) => {
   const t = r.length - 1, o = [];
@@ -309,11 +309,11 @@ class p2 {
     this.parts = [];
     let n = 0, l = 0;
     const d = e.length - 1, c = this.parts, [C, p] = j3(e, t);
-    if (this.el = p2.createElement(C, o), M1.currentNode = this.el.content, t === 2 || t === 3) {
+    if (this.el = p2.createElement(C, o), w1.currentNode = this.el.content, t === 2 || t === 3) {
       const f = this.el.content.firstChild;
       f.replaceWith(...f.childNodes);
     }
-    for (; (i = M1.nextNode()) !== null && c.length < d; ) {
+    for (; (i = w1.nextNode()) !== null && c.length < d; ) {
       if (i.nodeType === 1) {
         if (i.hasAttributes()) for (const f of i.getAttributeNames()) if (f.endsWith(r3)) {
           const H = p[l++], m = i.getAttribute(f).split(p1), V = /([.?@])?(.*)/.exec(H);
@@ -323,7 +323,7 @@ class p2 {
           const f = i.textContent.split(p1), H = f.length - 1;
           if (H > 0) {
             i.textContent = z2 ? z2.emptyScript : "";
-            for (let m = 0; m < H; m++) i.append(f[m], c2()), M1.nextNode(), c.push({ type: 2, index: ++n });
+            for (let m = 0; m < H; m++) i.append(f[m], c2()), w1.nextNode(), c.push({ type: 2, index: ++n });
             i.append(f[H], c2());
           }
         }
@@ -359,16 +359,16 @@ class U3 {
   }
   u(e) {
     const { el: { content: t }, parts: o } = this._$AD, i = ((e == null ? void 0 : e.creationScope) ?? k1).importNode(t, !0);
-    M1.currentNode = i;
-    let n = M1.nextNode(), l = 0, d = 0, c = o[0];
+    w1.currentNode = i;
+    let n = w1.nextNode(), l = 0, d = 0, c = o[0];
     for (; c !== void 0; ) {
       if (l === c.index) {
         let C;
         c.type === 2 ? C = new k2(n, n.nextSibling, this, e) : c.type === 1 ? C = new c.ctor(n, c.name, c.strings, this, e) : c.type === 6 && (C = new Y3(n, this, e)), this._$AV.push(C), c = o[++d];
       }
-      l !== (c == null ? void 0 : c.index) && (n = M1.nextNode(), l++);
+      l !== (c == null ? void 0 : c.index) && (n = w1.nextNode(), l++);
     }
-    return M1.currentNode = k1, i;
+    return w1.currentNode = k1, i;
   }
   p(e) {
     let t = 0;
@@ -429,8 +429,8 @@ class k2 {
   _$AR(e = this._$AA.nextSibling, t) {
     var o;
     for ((o = this._$AP) == null ? void 0 : o.call(this, !1, !0, t); e !== this._$AB; ) {
-      const i = M4(e).nextSibling;
-      M4(e).remove(), e = i;
+      const i = w4(e).nextSibling;
+      w4(e).remove(), e = i;
     }
   }
   setConnected(e) {
@@ -718,10 +718,10 @@ J5.styles = g`
     :host { display: inline-block; line-height: 0; }
 
     /* ── Colors ─────────────────────────────────────────────────── */
-    :host([color="primary"]) { color: var(--color-primary); }
+    :host([color="primary"]) { color: var(--color-primary-icon); }
     :host([color="success"])  { color: var(--color-success); }
     :host([color="warning"])  { color: var(--color-warning-active); }
-    :host([color="danger"])   { color: var(--color-destructive); }
+    :host([color="danger"])   { color: var(--color-destructive-icon); }
 
     /* ── Star base ──────────────────────────────────────────────── */
     .star {
@@ -809,14 +809,14 @@ const u3 = [
     originY: 39.0175,
     delay: -0.97
   }
-], S4 = 20, A4 = 5, nt = 900, rt = 160, D4 = 2, lt = "cubic-bezier(0.22, 0.61, 0.36, 1)", Q2 = 180, o2 = "ai-spinner--loading", n2 = "ai-spinner--settling", w1 = "ai-spinner__segment", st = u3.map(
+], S4 = 20, A4 = 5, nt = 900, rt = 160, D4 = 2, lt = "cubic-bezier(0.22, 0.61, 0.36, 1)", Q2 = 180, o2 = "ai-spinner--loading", n2 = "ai-spinner--settling", M1 = "ai-spinner__segment", st = u3.map(
   (r) => `
-    .${w1}--${r.index} {
+    .${M1}--${r.index} {
       transform-origin: ${r.originX}px ${r.originY}px;
     }
 
-    .${o2} .${w1}--${r.index},
-    .${n2} .${w1}--${r.index} {
+    .${o2} .${M1}--${r.index},
+    .${n2} .${M1}--${r.index} {
       animation-delay: ${r.delay}s;
     }
   `
@@ -841,7 +841,7 @@ const u3 = [
           ${u3.map(
       (t) => u2`
               <path
-                class="${w1} ${w1}--${t.index}"
+                class="${M1} ${M1}--${t.index}"
                 fill="currentColor"
                 d=${t.d}
               />
@@ -894,7 +894,7 @@ const u3 = [
    */
   restSegments(e) {
     this.detachSettleListener(e), this.cancelSegmentRest(e), e.style.removeProperty("transition"), e.style.removeProperty("transform");
-    const o = Array.from(e.querySelectorAll(`.${w1}`)).map((n) => {
+    const o = Array.from(e.querySelectorAll(`.${M1}`)).map((n) => {
       const l = getComputedStyle(n);
       return { segment: n, transform: l.transform, opacity: l.opacity };
     });
@@ -916,7 +916,7 @@ const u3 = [
   }
   cancelSegmentRest(e) {
     this.segmentRestTimer !== void 0 && (clearTimeout(this.segmentRestTimer), this.segmentRestTimer = void 0);
-    for (const t of e.querySelectorAll(`.${w1}`))
+    for (const t of e.querySelectorAll(`.${M1}`))
       t.style.removeProperty("transition"), t.style.removeProperty("transform"), t.style.removeProperty("opacity");
   }
   dropPhaseClasses(e) {
@@ -927,7 +927,9 @@ Q5.styles = g`
     :host {
       display: inline-block;
       line-height: 0;
-      color: var(--color-ai);
+      /* Purple as text, not the fill: purple-600 in light, purple-200 in dark,
+         where purple-600 is 2.5:1 on gray-9. anduin.design's spinner does the same. */
+      color: var(--color-ai-text);
     }
 
     .ai-spinner {
@@ -1635,7 +1637,7 @@ oe.styles = g`
     .button--outlined.button--danger { border-color: var(--color-destructive-border); color: var(--color-destructive-subtle-foreground); background-color: transparent; }
     .button--outlined.button--danger:hover { background-color: var(--color-destructive-subtle); }
     .button--outlined.button--danger:active { background-color: var(--color-destructive-subtle-active); }
-    .button--outlined.button--primary { border-color: var(--color-primary-border); color: var(--color-primary); background-color: transparent; }
+    .button--outlined.button--primary { border-color: var(--color-primary-border); color: var(--color-primary-text); background-color: transparent; }
     .button--outlined.button--primary:hover { background-color: var(--color-primary-subtle); }
     .button--outlined.button--primary:active { background-color: var(--color-primary-subtle-active); }
     .button--outlined.button--success { border-color: var(--color-success-border); color: var(--color-success-subtle-foreground); background-color: transparent; }
@@ -1644,8 +1646,9 @@ oe.styles = g`
     .button--outlined.button--warning { border-color: var(--color-warning-border); color: var(--color-warning-subtle-foreground); background-color: transparent; }
     .button--outlined.button--warning:hover { background-color: var(--color-warning-subtle); }
     .button--outlined.button--warning:active { background-color: var(--color-warning-subtle-active); }
-    /* Purple text moves from purple-500 to --color-ai (purple-600): one step darker, better contrast. */
-    .button--outlined.button--purple { border-color: var(--color-ai-border); color: var(--color-ai); background-color: transparent; }
+    /* Purple text moved from purple-500 to purple-600 for contrast on white; it now reads --color-ai-text,
+       which is that same purple-600 in light and purple-200 in dark, where purple-600 is 2.5:1 on gray-9. */
+    .button--outlined.button--purple { border-color: var(--color-ai-border); color: var(--color-ai-text); background-color: transparent; }
     .button--outlined.button--purple:hover { background-color: var(--color-ai-subtle); }
     .button--outlined.button--purple:active { background-color: var(--color-ai-subtle-active); }
     .button--plain.button--gray9 { border-color: transparent; color: var(--color-muted-foreground); background-color: transparent; }
@@ -1657,7 +1660,7 @@ oe.styles = g`
     .button--plain.button--danger { border-color: transparent; color: var(--color-destructive-subtle-foreground); background-color: transparent; }
     .button--plain.button--danger:hover { background-color: var(--color-destructive-subtle); }
     .button--plain.button--danger:active { background-color: var(--color-destructive-subtle-active); }
-    .button--plain.button--primary { border-color: transparent; color: var(--color-primary); background-color: transparent; }
+    .button--plain.button--primary { border-color: transparent; color: var(--color-primary-text); background-color: transparent; }
     .button--plain.button--primary:hover { background-color: var(--color-primary-subtle); }
     .button--plain.button--primary:active { background-color: var(--color-primary-subtle-active); }
     .button--plain.button--success { border-color: transparent; color: var(--color-success-subtle-foreground); background-color: transparent; }
@@ -1666,7 +1669,7 @@ oe.styles = g`
     .button--plain.button--warning { border-color: transparent; color: var(--color-warning-subtle-foreground); background-color: transparent; }
     .button--plain.button--warning:hover { background-color: var(--color-warning-subtle); }
     .button--plain.button--warning:active { background-color: var(--color-warning-subtle-active); }
-    .button--plain.button--purple { border-color: transparent; color: var(--color-ai); background-color: transparent; }
+    .button--plain.button--purple { border-color: transparent; color: var(--color-ai-text); background-color: transparent; }
     .button--plain.button--purple:hover { background-color: var(--color-ai-subtle); }
     .button--plain.button--purple:active { background-color: var(--color-ai-subtle-active); }
     .button--text { border: none; background: none; padding: 0; height: auto; width: auto; display: inline-flex; align-items: center; vertical-align: bottom; }
@@ -1678,7 +1681,7 @@ oe.styles = g`
     .button--text.button--success { color: var(--color-success-subtle-foreground); }
     .button--text.button--danger { color: var(--color-destructive-subtle-foreground); }
     .button--text.button--warning { color: var(--color-warning-subtle-foreground); }
-    .button--text.button--purple { color: var(--color-ai); }
+    .button--text.button--purple { color: var(--color-ai-text); }
     .button--selected.button--filled.button--gray0 { background-color: var(--color-accent-strong); }
     .button--selected.button--filled.button--gray9 { background-color: var(--color-neutral-active); }
     .button--selected.button--filled.button--primary { background-color: var(--color-primary-active); }
@@ -1987,7 +1990,7 @@ const de = class de extends h {
 de.styles = g`
     :host { display: block; height: 100%; font-family: var(--font-sans); }
     .loading-state { display: flex; flex-direction: column; justify-content: center; align-items: center; }
-    .loading-state__indicator { color: var(--color-primary); }
+    .loading-state__indicator { color: var(--color-primary-icon); }
     .loading-state__content { margin-top: 12px; font-size: 15px; color: var(--color-subtle-foreground); }
   `;
 let P2 = de;
@@ -2089,7 +2092,7 @@ const pe = class pe extends h {
 };
 pe.styles = g`
     :host { display: block; font-family: var(--font-sans); }
-    .field-error { color: var(--color-destructive); }
+    .field-error { color: var(--color-destructive-text); }
   `;
 let d5 = pe;
 const he = class he extends h {
@@ -2221,12 +2224,12 @@ R2([
   s()
 ], v1.prototype, "inputid");
 customElements.get("anduin-checkbox") || customElements.define("anduin-checkbox", v1);
-var Mt = Object.defineProperty, Y = (r, e, t, o) => {
+var wt = Object.defineProperty, Y = (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 && Mt(e, t, i), i;
+  return i && wt(e, t, i), i;
 };
-const B4 = "anduin-input:change", wt = "anduin-input:clear", j2 = class j2 extends h {
+const B4 = "anduin-input:change", Mt = "anduin-input:clear", j2 = class j2 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;
   }
@@ -2280,7 +2283,7 @@ const B4 = "anduin-input:change", wt = "anduin-input:clear", j2 = class j2 exten
   }
   onClear() {
     var e;
-    this.value = "", this.inputEl && (this.inputEl.value = ""), this.dispatchEvent(new CustomEvent(B4, { detail: "", bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent(wt, { bubbles: !0, composed: !0 })), (e = this.inputEl) == null || e.focus();
+    this.value = "", this.inputEl && (this.inputEl.value = ""), this.dispatchEvent(new CustomEvent(B4, { detail: "", bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent(Mt, { bubbles: !0, composed: !0 })), (e = this.inputEl) == null || e.focus();
   }
   render() {
     const e = this.size === "small" ? "input--small" : this.size === "large" ? "input--large" : "input--default", t = this.status ? `input--${this.status}` : "", o = !!this.startIcon, i = !!this.endIcon || this.clearable && !!this.value, n = this.clearable && !!this.value && !this.disabled && !this.readonly, l = this.size === "small" ? "12" : this.size === "large" ? "20" : "16", d = this.size === "small" ? "10" : this.size === "large" ? "16" : "14";
@@ -2484,8 +2487,8 @@ function Rt(r, e, t, o = 8) {
       top: Math.round(Math.min(Math.max(C.top, 0), n - c))
     };
   p.sort((m, V) => {
-    const y = { left: m.off.left, top: m.off.top, right: m.off.left + d, bottom: m.off.top + c }, v = { left: V.off.left, top: V.off.top, right: V.off.left + d, bottom: V.off.top + c }, x = O4(y, l), M = O4(v, l);
-    if (M !== x) return M - x;
+    const y = { left: m.off.left, top: m.off.top, right: m.off.left + d, bottom: m.off.top + c }, v = { left: V.off.left, top: V.off.top, right: V.off.left + d, bottom: V.off.top + c }, x = O4(y, l), w = O4(v, l);
+    if (w !== x) return w - x;
     const D = Math.abs(m.off.left - C.left) + Math.abs(m.off.top - C.top), K = Math.abs(V.off.left - C.left) + Math.abs(V.off.top - C.top);
     return D - K;
   });
@@ -3074,12 +3077,12 @@ var Bt = Object.defineProperty, U = (r, e, t, o) => {
     (l = r[n]) && (i = l(e, t, i) || i);
   return i && Bt(e, t, i), i;
 };
-const M3 = "anduin-tab:trigger-click", W2 = "anduin-tab:value-changed", Ft = "anduin-tab:change", He = class He extends h {
+const w3 = "anduin-tab:trigger-click", W2 = "anduin-tab:value-changed", Ft = "anduin-tab:change", He = class He extends h {
   constructor() {
     super(...arguments), this.defaultValue = "", this.value = "", this.fill = !1;
   }
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener(M3, (e) => {
+    super.connectedCallback(), this.addEventListener(w3, (e) => {
       e.stopPropagation();
       const t = e;
       this.value = t.detail, this.broadcastValueChanged(t.detail), this.dispatchEvent(new CustomEvent(Ft, { detail: t.detail, bubbles: !0, composed: !0 }));
@@ -3198,7 +3201,7 @@ const ye = class ye extends h {
     });
   }
   onClick() {
-    this.dispatchEvent(new CustomEvent(M3, { detail: this.value, bubbles: !0, composed: !0 }));
+    this.dispatchEvent(new CustomEvent(w3, { detail: this.value, bubbles: !0, composed: !0 }));
   }
   render() {
     return a`
@@ -3382,10 +3385,10 @@ Ve.styles = g`
     .tag__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
     .tag--disabled { opacity: 0.6; }
     .tag__icon--light-gray { color: var(--color-neutral-subtle-foreground); }
-    .tag__icon--light-primary { color: var(--color-primary); }
+    .tag__icon--light-primary { color: var(--color-primary-icon); }
     .tag__icon--light-success { color: var(--color-success); }
     .tag__icon--light-warning { color: var(--color-warning-active); }
-    .tag__icon--light-danger { color: var(--color-destructive); }
+    .tag__icon--light-danger { color: var(--color-destructive-icon); }
     .tag__icon--bold-gray { color: var(--color-neutral-foreground); }
     .tag__icon--bold-primary { color: var(--color-primary-foreground); }
     .tag__icon--bold-success { color: var(--color-success-foreground); }
@@ -3462,7 +3465,7 @@ var jt = Object.defineProperty, O = (r, e, t, o) => {
     (l = r[n]) && (i = l(e, t, i) || i);
   return i && jt(e, t, i), i;
 };
-const Ut = "anduin-toggle-group:change", Gt = "anduin-toggle-group-item:change", Kt = "anduin-toggle-group-item:select", Wt = "anduin-toggle-group-item:deselect", g5 = "anduin-toggle-group-item:item-click", Me = class Me extends h {
+const Ut = "anduin-toggle-group:change", Gt = "anduin-toggle-group-item:change", Kt = "anduin-toggle-group-item:select", Wt = "anduin-toggle-group-item:deselect", g5 = "anduin-toggle-group-item:item-click", we = class we extends h {
   constructor() {
     super(...arguments), this.mode = "single", this.defaultValue = "", this.value = null, this.size = "medium", this.variant = "gray", this.gap = !1, this.internalValue = [], this.userInteracted = !1, this.onItemClick = (e) => {
       var c;
@@ -3515,7 +3518,7 @@ const Ut = "anduin-toggle-group:change", Gt = "anduin-toggle-group-item:change",
     `;
   }
 };
-Me.styles = g`
+we.styles = g`
     :host { display: inline-flex; font-family: var(--font-sans); }
     .toggle-group { display: inline-flex; align-items: center; }
     .toggle-group--small {
@@ -3549,7 +3552,7 @@ Me.styles = g`
     /* Gapped pills stand alone, so each keeps all four borders. */
     .toggle-group--gap ::slotted(anduin-toggle-group-item) { --toggle-group-item-radius: 4px; --toggle-group-item-border-left: 1px; }
   `;
-let X = Me;
+let X = we;
 O([
   s()
 ], X.prototype, "mode");
@@ -3571,7 +3574,7 @@ O([
 O([
   b()
 ], X.prototype, "internalValue");
-const we = class we extends h {
+const Me = class Me extends h {
   constructor() {
     super(...arguments), this.value = "", this.startIcon = "", this.disabled = !1, this.selected = !1, this.groupSize = "medium", this.groupVariant = "gray", this.groupMode = "single";
   }
@@ -3621,7 +3624,7 @@ const we = class we extends h {
     `;
   }
 };
-we.styles = g`
+Me.styles = g`
     :host { display: inline-block; font-family: var(--font-sans); }
     .toggle-item {
       position: relative; z-index: 0; box-sizing: border-box;
@@ -3655,9 +3658,9 @@ we.styles = g`
     .toggle-item__icon { display: flex; color: var(--color-subtle-foreground); }
     .toggle-item:hover .toggle-item__icon { color: var(--color-muted-foreground); }
     .toggle-item--selected .toggle-item__icon { color: var(--color-muted-foreground); }
-    .toggle-item--variant-primary.toggle-item--selected .toggle-item__icon { color: var(--color-primary); }
+    .toggle-item--variant-primary.toggle-item--selected .toggle-item__icon { color: var(--color-primary-icon); }
   `;
-let J = we;
+let J = Me;
 O([
   s({ reflect: !0 })
 ], J.prototype, "value");
@@ -3768,17 +3771,20 @@ Ze.styles = g`
     .well--warning {
       background-color: var(--color-warning-subtle);
     }
+    /* Same split as the toast's icons: primary and danger read -icon (light
+       unchanged, step 3 in dark); success and warning keep step 4, which already
+       clears 3:1 on their dark tint and which -icon would move in light. */
     .well__icon--gray {
       color: var(--color-muted-foreground);
     }
     .well__icon--primary {
-      color: var(--color-primary);
+      color: var(--color-primary-icon);
     }
     .well__icon--success {
       color: var(--color-success);
     }
     .well__icon--danger {
-      color: var(--color-destructive);
+      color: var(--color-destructive-icon);
     }
     .well__icon--warning {
       color: var(--color-warning-active);
@@ -3889,7 +3895,7 @@ const v5 = "anduin-popover:close", b5 = "anduin-popover:open-change", Re = class
     t.style.transform = i;
     const l = t.getBoundingClientRect(), d = 4, c = window.innerWidth, C = window.innerHeight, p = 8;
     let f = 0, H = 0, m = "bottom";
-    const V = !this.placement.startsWith("top"), y = C - o.bottom - d, v = o.top - d, x = y >= l.height, M = v >= l.height, D = V ? x || y >= v : !M && x;
+    const V = !this.placement.startsWith("top"), y = C - o.bottom - d, v = o.top - d, x = y >= l.height, w = v >= l.height, D = V ? x || y >= v : !w && x;
     m = D ? "bottom" : "top", H = D ? o.bottom + d : o.top - l.height - d;
     const K = this.placement.endsWith("end") ? "end" : this.placement.endsWith("start") ? "start" : "center";
     K === "start" ? f = o.left : K === "end" ? f = o.right - l.width : f = o.left + o.width / 2 - l.width / 2, f = Math.max(p, Math.min(f, c - l.width - p)), H = Math.max(p, Math.min(H, C - l.height - p)), t.style.transform = `translate(${Math.round(f - n.left)}px, ${Math.round(H - n.top)}px)`, t.dataset.side = m;
@@ -4172,7 +4178,7 @@ ze.styles = g`
     .menu-item:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
     .menu-item__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     anduin-icon { color: var(--color-muted-foreground); }
-    .menu-item--danger anduin-icon { color: var(--color-destructive); }
+    .menu-item--danger anduin-icon { color: var(--color-destructive-icon); }
   `;
 let G1 = ze;
 z1([
@@ -4192,12 +4198,12 @@ var e7 = Object.defineProperty, S1 = (r, e, t, o) => {
   return i && e7(e, t, i), i;
 };
 const r2 = "anduin-close", t5 = "anduin-after-close", i5 = 300, o5 = 200, T4 = 250;
-let d2 = 0, w3 = "";
+let d2 = 0, M3 = "";
 function t7() {
-  typeof document > "u" || (d2 === 0 && (w3 = document.body.style.overflow, document.body.style.overflow = "hidden"), d2++);
+  typeof document > "u" || (d2 === 0 && (M3 = document.body.style.overflow, document.body.style.overflow = "hidden"), d2++);
 }
 function N4() {
-  typeof document > "u" || d2 !== 0 && (d2--, d2 === 0 && (document.body.style.overflow = w3));
+  typeof document > "u" || d2 !== 0 && (d2--, d2 === 0 && (document.body.style.overflow = M3));
 }
 var g1;
 const L1 = (g1 = class extends h {
@@ -5271,12 +5277,16 @@ Be.styles = g`
       padding: 12px;
       border-radius: 8px;
     }
+    /* Primary and danger read -icon (step 4 in light, as before; step 3 in dark,
+       where step 4 on its own tint was under 3:1). Success and warning keep step 4:
+       -icon would change their light colour, and step 4 already clears 3:1 on
+       gray-9 and on its dark tint (success 3.4:1, warning 4.7:1). */
     .toast__icon--gray {
       color: var(--color-subtle-foreground);
       background: var(--color-secondary);
     }
     .toast__icon--primary {
-      color: var(--color-primary);
+      color: var(--color-primary-icon);
       background: var(--color-primary-subtle);
     }
     .toast__icon--success {
@@ -5288,7 +5298,7 @@ Be.styles = g`
       background: var(--color-warning-subtle);
     }
     .toast__icon--danger {
-      color: var(--color-destructive);
+      color: var(--color-destructive-icon);
       background: var(--color-destructive-subtle);
     }
 
@@ -5579,14 +5589,14 @@ Ie.styles = g`
       line-height: 20px;
     }
   `;
-let M2 = Ie;
+let w2 = Ie;
 k3([
   s({ type: Boolean })
-], M2.prototype, "checked");
+], w2.prototype, "checked");
 k3([
   s({ type: Boolean })
-], M2.prototype, "disabled");
-customElements.get("anduin-switcher") || customElements.define("anduin-switcher", M2);
+], w2.prototype, "disabled");
+customElements.get("anduin-switcher") || customElements.define("anduin-switcher", w2);
 var y7 = 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);
@@ -5807,7 +5817,7 @@ Oe.styles = g`
     .trigger--outlined.trigger--gray0   { border-color: var(--color-gray-7);    color: var(--color-gray-4);    background-color: transparent; }
     .trigger--outlined.trigger--gray0:hover  { background-color: var(--color-gray-7); }
     .trigger--outlined.trigger--gray0:active { background-color: var(--color-gray-3); }
-    .trigger--outlined.trigger--primary { border-color: var(--color-primary-border); color: var(--color-primary); background-color: transparent; }
+    .trigger--outlined.trigger--primary { border-color: var(--color-primary-border); color: var(--color-primary-text); background-color: transparent; }
     .trigger--outlined.trigger--primary:hover  { background-color: var(--color-primary-subtle); }
     .trigger--outlined.trigger--primary:active { background-color: var(--color-primary-subtle-active); }
     .trigger--outlined.trigger--danger  { border-color: var(--color-destructive-border);  color: var(--color-destructive-subtle-foreground);  background-color: transparent; }
@@ -5827,7 +5837,7 @@ Oe.styles = g`
     .trigger--plain.trigger--gray0   { border-color: transparent; color: var(--color-gray-4);    background-color: transparent; }
     .trigger--plain.trigger--gray0:hover  { background-color: var(--color-gray-7); }
     .trigger--plain.trigger--gray0:active { background-color: var(--color-gray-8); }
-    .trigger--plain.trigger--primary { border-color: transparent; color: var(--color-primary); background-color: transparent; }
+    .trigger--plain.trigger--primary { border-color: transparent; color: var(--color-primary-text); background-color: transparent; }
     .trigger--plain.trigger--primary:hover  { background-color: var(--color-primary-subtle); }
     .trigger--plain.trigger--primary:active { background-color: var(--color-primary-subtle-active); }
     .trigger--plain.trigger--danger  { border-color: transparent; color: var(--color-destructive-subtle-foreground);  background-color: transparent; }
@@ -5998,62 +6008,62 @@ Oe.styles = g`
       text-align: center;
     }
   `;
-let w = Oe;
+let M = Oe;
 E([
   s()
-], w.prototype, "value");
+], M.prototype, "value");
 E([
   s()
-], w.prototype, "placeholder");
+], M.prototype, "placeholder");
 E([
   s({ attribute: !1 })
-], w.prototype, "options");
+], M.prototype, "options");
 E([
   s()
-], w.prototype, "icon");
+], M.prototype, "icon");
 E([
   s({ type: Boolean })
-], w.prototype, "searchable");
+], M.prototype, "searchable");
 E([
   s({ type: Boolean })
-], w.prototype, "disabled");
+], M.prototype, "disabled");
 E([
   s()
-], w.prototype, "placement");
+], M.prototype, "placement");
 E([
   s()
-], w.prototype, "appearance");
+], M.prototype, "appearance");
 E([
   s()
-], w.prototype, "variant");
+], M.prototype, "variant");
 E([
   s()
-], w.prototype, "size");
+], M.prototype, "size");
 E([
   s({ type: Boolean, attribute: "full-width", reflect: !0 })
-], w.prototype, "fullWidth");
+], M.prototype, "fullWidth");
 E([
   s({ converter: (r) => r !== "false" })
-], w.prototype, "clearable");
+], M.prototype, "clearable");
 E([
   b()
-], w.prototype, "_open");
+], M.prototype, "_open");
 E([
   b()
-], w.prototype, "_query");
+], M.prototype, "_query");
 E([
   b()
-], w.prototype, "_activeIndex");
+], M.prototype, "_activeIndex");
 E([
   k(".trigger")
-], w.prototype, "_triggerEl");
+], M.prototype, "_triggerEl");
 E([
   k(".panel")
-], w.prototype, "_panelEl");
+], M.prototype, "_panelEl");
 E([
   k("anduin-input")
-], w.prototype, "_searchEl");
-customElements.get("anduin-dropdown") || customElements.define("anduin-dropdown", w);
+], M.prototype, "_searchEl");
+customElements.get("anduin-dropdown") || customElements.define("anduin-dropdown", M);
 var L7 = Object.defineProperty, c1 = (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);
@@ -6347,7 +6357,7 @@ c1([
   b()
 ], G.prototype, "_width");
 customElements.get("anduin-drawer") || customElements.define("anduin-drawer", G);
-class M7 extends HTMLElement {
+class w7 extends HTMLElement {
   constructor() {
     super(...arguments), this._onClick = () => {
       this.dispatchEvent(
@@ -6362,11 +6372,11 @@ class M7 extends HTMLElement {
     this.removeEventListener("click", this._onClick);
   }
 }
-customElements.get("anduin-drawer-close") || customElements.define("anduin-drawer-close", M7);
-var w7 = Object.defineProperty, z = (r, e, t, o) => {
+customElements.get("anduin-drawer-close") || customElements.define("anduin-drawer-close", w7);
+var M7 = Object.defineProperty, z = (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 && w7(e, t, i), i;
+  return i && M7(e, t, i), i;
 };
 const l5 = "anduin-suggestion:change", Z7 = "anduin-suggestion:select", k7 = "anduin-suggestion:clear", Ne = class Ne extends h {
   constructor() {
@@ -6456,8 +6466,8 @@ const l5 = "anduin-suggestion:change", Z7 = "anduin-suggestion:select", k7 = "an
     this.value = "", this._inputEl && (this._inputEl.value = ""), this._activeIndex = -1, this.dispatchEvent(new CustomEvent(l5, { detail: "", bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent(k7, { bubbles: !0, composed: !0 })), (e = this._inputEl) == null || e.focus();
   }
   _updatePosition() {
-    var M;
-    const e = (M = this.shadowRoot) == null ? void 0 : M.querySelector(".input-wrapper"), t = this._panelEl;
+    var w;
+    const e = (w = this.shadowRoot) == null ? void 0 : w.querySelector(".input-wrapper"), t = this._panelEl;
     if (!e || !t) return;
     const o = e.getBoundingClientRect(), i = t.style.transform;
     t.style.transform = "none";
@@ -7419,16 +7429,16 @@ const qe = class qe extends h {
 qe.styles = g`
     :host { display: inline-flex; }
   `;
-let w2 = qe;
+let M2 = qe;
 X1([
   s({ type: Boolean })
-], w2.prototype, "disabled");
-class D7 extends w2 {
+], M2.prototype, "disabled");
+class D7 extends M2 {
   constructor() {
     super(...arguments), this.icon = "chevronVerticalLeft", this.label = "Go to first page", this.target = "first";
   }
 }
-class P7 extends w2 {
+class P7 extends M2 {
   constructor() {
     super(...arguments), this.icon = "chevronVerticalRight", this.label = "Go to last page", this.target = "last";
   }
@@ -7455,7 +7465,7 @@ Xe.styles = g`
       flex-direction: column;
     }
   `;
-let M5 = Xe;
+let w5 = Xe;
 const Je = class Je extends h {
   render() {
     return a`
@@ -7556,7 +7566,7 @@ Je.styles = g`
       padding-bottom: 0;
     }
   `;
-let w5 = Je;
+let M5 = Je;
 const Qe = class Qe extends h {
   render() {
     return a`<div class="date"><slot></slot></div>`;
@@ -7676,8 +7686,8 @@ i4.styles = g`
     }
   `;
 let $5 = i4;
-customElements.get("anduin-timeline") || customElements.define("anduin-timeline", M5);
-customElements.get("anduin-timeline-item") || customElements.define("anduin-timeline-item", w5);
+customElements.get("anduin-timeline") || customElements.define("anduin-timeline", w5);
+customElements.get("anduin-timeline-item") || customElements.define("anduin-timeline-item", M5);
 customElements.get("anduin-timeline-date") || customElements.define("anduin-timeline-date", Z5);
 customElements.get("anduin-timeline-title") || customElements.define("anduin-timeline-title", k5);
 customElements.get("anduin-timeline-group") || customElements.define("anduin-timeline-group", R5);
@@ -7933,7 +7943,7 @@ c4.styles = g`
       color: var(--color-primary-subtle-foreground);
     }
     .sidebar-menu-item-wrapper--selected .sidebar-menu-item__icon {
-      color: var(--color-primary);
+      color: var(--color-primary-icon);
     }
 
     .sidebar-menu-item {
@@ -8353,7 +8363,7 @@ const h4 = class h4 extends h {
               <tr>
                 ${y.map((v) => {
       if (v === null) return a`<td class="calendar__day-cell"></td>`;
-      const x = new Date(this._viewYear, this._viewMonth, v), M = x1(x), D = x.getTime(), K = this._isDisabled(x), Q1 = !!o && D === o.getTime(), o1 = !!i && D === i.getTime(), H4 = !!o && !!i && D > o.getTime() && D < i.getTime(), _4 = !n && !!t && D === t.getTime(), E3 = [
+      const x = new Date(this._viewYear, this._viewMonth, v), w = x1(x), D = x.getTime(), K = this._isDisabled(x), Q1 = !!o && D === o.getTime(), o1 = !!i && D === i.getTime(), H4 = !!o && !!i && D > o.getTime() && D < i.getTime(), _4 = !n && !!t && D === t.getTime(), E3 = [
         "calendar__day-cell",
         H4 ? "calendar__day-cell--in-range" : "",
         // Only tint the edge cell when it actually opens a span —
@@ -8362,7 +8372,7 @@ const h4 = class h4 extends h {
         o1 && o ? "calendar__day-cell--range-end" : ""
       ].filter(Boolean).join(" "), z3 = [
         "calendar__day-button",
-        M === e ? "calendar__day-button--today" : "",
+        w === e ? "calendar__day-button--today" : "",
         _4 ? "calendar__day-button--selected" : "",
         Q1 ? "calendar__day-button--range-start" : "",
         o1 ? "calendar__day-button--range-end" : "",
@@ -8381,12 +8391,12 @@ const h4 = class h4 extends h {
                         part="day"
                         aria-disabled="${K}"
                         aria-label="${J4[x.getDay()]}, ${X4[x.getMonth()]} ${N7(v)}, ${x.getFullYear()}"
-                        tabindex="${M === l ? 0 : -1}"
+                        tabindex="${w === l ? 0 : -1}"
                         @click=${() => {
         K || this._pick(x);
       }}
                         @mouseenter=${() => {
-        K || this._emitHover(M);
+        K || this._emitHover(w);
       }}
                       >${v}</button>
                     </td>
@@ -9633,9 +9643,9 @@ const t0 = "anduin-table:sort", i0 = "anduin-table:column-click", o0 = "anduin-t
           ></span>
         ` : u;
     if (n1(e)) {
-      const v = this.renderSelectableRows, x = this.renderSelectedKeys, M = v.filter((o1) => x.has(o1.key)).length, D = v.length > 0 && M === v.length, K = M > 0 && !D, Q1 = e.renderHeader ? e.renderHeader({
+      const v = this.renderSelectableRows, x = this.renderSelectedKeys, w = v.filter((o1) => x.has(o1.key)).length, D = v.length > 0 && w === v.length, K = w > 0 && !D, Q1 = e.renderHeader ? e.renderHeader({
         areAllRowsSelected: D,
-        hasSelectedRow: M > 0,
+        hasSelectedRow: w > 0,
         onChange: (o1) => this.toggleAllRows(o1)
       }) : a`
             <anduin-checkbox
@@ -9691,13 +9701,13 @@ const t0 = "anduin-table:sort", i0 = "anduin-table:column-click", o0 = "anduin-t
       this.sizingClass(o, i)
     ].filter(Boolean).join(" "), C = this.cellStyle(o, i);
     if (n1(o)) {
-      const V = this.renderSelectedKeys.has(e.key), y = this.rowIsDisabled(e.data), v = (M) => this.setRowSelected(e, M), x = o.renderCell ? o.renderCell({ data: e.data, isChecked: V, isDisabled: y, onChange: v }) : a`
+      const V = this.renderSelectedKeys.has(e.key), y = this.rowIsDisabled(e.data), v = (w) => this.setRowSelected(e, w), x = o.renderCell ? o.renderCell({ data: e.data, isChecked: V, isDisabled: y, onChange: v }) : a`
             <anduin-checkbox
               .checked=${V}
               .disabled=${y}
               aria-label="${V ? "Deselect row" : "Select row"}"
-              @anduin-checkbox:change=${(M) => {
-        M.stopPropagation(), v(!V);
+              @anduin-checkbox:change=${(w) => {
+        w.stopPropagation(), v(!V);
       }}
             ></anduin-checkbox>
           `;
@@ -9707,7 +9717,7 @@ const t0 = "anduin-table:sort", i0 = "anduin-table:column-click", o0 = "anduin-t
           part="cell"
           data-col="${i}"
           style="${C}"
-          @click=${(M) => M.stopPropagation()}
+          @click=${(w) => w.stopPropagation()}
         >${x}</td>
       `;
     }
@@ -9945,7 +9955,10 @@ m4.styles = g`
       height: 36px;
       padding: 0 12px;
       border-bottom: 1px solid var(--color-border);
-      background-color: var(--color-muted);
+      /* table-header, not muted: both are gray-1 in light, but in dark muted is the
+         sunken canvas (darker than the rows) while anduin.design lifts the header to
+         gray-8, a step lighter than the gray-9 rows. */
+      background-color: var(--color-table-header);
       color: var(--color-muted-foreground);
       font-size: var(--text-12, 12px);
       font-weight: 600;
@@ -9986,7 +9999,7 @@ m4.styles = g`
       color: var(--color-placeholder);
     }
     .table__sort-icon--active {
-      color: var(--color-primary);
+      color: var(--color-primary-icon);
     }
 
     /* The divider between headers is the resize affordance: a hairline at rest,
@@ -10169,7 +10182,8 @@ m4.styles = g`
       height: 32px;
       padding: 0;
       border-bottom: 1px solid var(--color-border-subtle);
-      background-color: var(--color-muted);
+      /* A group's header row reads as a header: table-header, as above */
+      background-color: var(--color-table-header);
     }
     .table__group-toggle {
       display: flex;
@@ -10365,7 +10379,7 @@ export {
   g2 as a5,
   h2 as a6,
   Z as a7,
-  M2 as a8,
+  w2 as a8,
   L2 as a9,
   T5 as aA,
   X7 as aB,
@@ -10380,7 +10394,7 @@ export {
   At as aK,
   zt as aL,
   B4 as aM,
-  wt as aN,
+  Mt as aN,
   H5 as aO,
   t5 as aP,
   r2 as aQ,
@@ -10401,10 +10415,10 @@ export {
   U1 as ae,
   h5 as af,
   W as ag,
-  M5 as ah,
+  w5 as ah,
   Z5 as ai,
   R5 as aj,
-  w5 as ak,
+  M5 as ak,
   $5 as al,
   k5 as am,
   b1 as an,
@@ -10434,7 +10448,7 @@ export {
   n0 as ba,
   t0 as bb,
   Ft as bc,
-  M3 as bd,
+  w3 as bd,
   W2 as be,
   Ot as bf,
   Pt as bg,
@@ -10472,8 +10486,8 @@ export {
   b2 as o,
   D2 as p,
   G as q,
-  M7 as r,
-  w as s,
+  w7 as r,
+  M as s,
   B2 as t,
   a5 as u,
   d5 as v,