@epilot/volt-ui-experimental-griffel 0.2.3 → 0.3.1

package/dist/components/list/list.js

@@ -1,13 +1,13 @@
-import { jsx as t, jsxs as W } from "react/jsx-runtime";
-import * as s from "react";
-import { useSensors as Y, useSensor as K, DndContext as tt, closestCenter as et, DragOverlay as rt, KeyboardSensor as ot, PointerSensor as nt } from "../../vendor/@dnd-kit/core/dist/core.esm.js";
+import { jsx as t, jsxs as D } from "react/jsx-runtime";
+import * as i from "react";
+import { useSensors as J, useSensor as V, DndContext as tt, closestCenter as et, DragOverlay as ot, KeyboardSensor as rt, PointerSensor as nt } from "../../vendor/@dnd-kit/core/dist/core.esm.js";
 import { SortableContext as it, verticalListSortingStrategy as st, arrayMove as at, useSortable as lt } from "../../vendor/@dnd-kit/sortable/dist/sortable.esm.js";
 import { shorthands as m } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
-import { SLOT_ATTR as h } from "../../packages/volt-runtime/dist/renderer/contract.js";
-import { mergeClasses as g } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { SLOT_ATTR as g } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { mergeClasses as f } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
 import { makeVoltStyles as ct } from "../../styles/make-styles.js";
-import { spacingElement3 as z, grayA5 as dt, spacingElement1 as B, spacingElement2 as y, radiusMd as P, semSuccessLight as mt, semWarningLight as pt, semErrorLight as ut, spacingGroup2 as _, grayA12 as q, fontWeightSemibold as gt, leadingSm as V, textSm as j, grayA10 as ft, fontWeightMedium as ht, semAccentSolid as xt, accentA8 as vt, grayA11 as F, grayA8 as yt, leadingXs as bt, textXs as wt, grayA2 as Q, semSuccessSoftHover as St, semWarningSoftHover as It, semErrorSoftHover as Ct, semAccentSoft as Lt, semSuccessDefault as kt, semSuccessSoft as Dt, semWarningDefault as Tt, semWarningSoft as Wt, semErrorDefault as Et, semErrorSoft as Nt } from "../../tokens/index.js";
-const At = (l) => /* @__PURE__ */ W(
+import { spacingElement3 as dt, grayA5 as ut, spacingElement1 as mt, spacingElement2 as pt, listItemPaddingY as G, listItemPaddingX as j, listItemGap as gt, radiusMd as B, semSuccessLight as ft, semWarningLight as ht, semErrorLight as xt, spacingGroup2 as F, grayA12 as X, fontWeightSemibold as vt, leadingSm as $, textSm as K, grayA10 as yt, fontWeightMedium as bt, semAccentSolid as wt, accentA8 as It, grayA11 as P, grayA8 as St, leadingXs as Lt, textXs as kt, listIndexPaddingX as _, listIndexMinWidth as Ct, grayA2 as q, semSuccessSoftHover as Dt, semWarningSoftHover as Tt, semErrorSoftHover as Wt, semAccentSoft as Et, semSuccessDefault as Nt, semSuccessSoft as At, semWarningDefault as Ot, semWarningSoft as Gt, semErrorDefault as Bt, semErrorSoft as Pt, listItemMinHeight as Rt } from "../../tokens/index.js";
+const Ht = (n) => /* @__PURE__ */ D(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -16,7 +16,7 @@ const At = (l) => /* @__PURE__ */ W(
     viewBox: "0 0 24 24",
     fill: "currentColor",
     "aria-hidden": "true",
-    ...l,
+    ...n,
     children: [
       /* @__PURE__ */ t("circle", { cx: "9", cy: "5", r: "1.5" }),
       /* @__PURE__ */ t("circle", { cx: "15", cy: "5", r: "1.5" }),
@@ -26,7 +26,7 @@ const At = (l) => /* @__PURE__ */ W(
       /* @__PURE__ */ t("circle", { cx: "15", cy: "19", r: "1.5" })
     ]
   }
-), U = (l) => /* @__PURE__ */ W(
+), Q = (n) => /* @__PURE__ */ D(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -37,14 +37,14 @@ const At = (l) => /* @__PURE__ */ W(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    ...l,
+    ...n,
     children: [
       /* @__PURE__ */ t("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z" }),
       /* @__PURE__ */ t("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
       /* @__PURE__ */ t("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
     ]
   }
-), Ot = (l) => /* @__PURE__ */ W(
+), zt = (n) => /* @__PURE__ */ D(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -55,13 +55,13 @@ const At = (l) => /* @__PURE__ */ W(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    ...l,
+    ...n,
     children: [
       /* @__PURE__ */ t("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
       /* @__PURE__ */ t("polyline", { points: "22 4 12 14.01 9 11.01" })
     ]
   }
-), Rt = (l) => /* @__PURE__ */ t(
+), Mt = (n) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -72,10 +72,10 @@ const At = (l) => /* @__PURE__ */ W(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    ...l,
+    ...n,
     children: /* @__PURE__ */ t("polyline", { points: "9 18 15 12 9 6" })
   }
-), b = ct({
+), y = ct({
   list: {
     display: "flex",
     width: "100%",
@@ -85,41 +85,29 @@ const At = (l) => /* @__PURE__ */ W(
     ...m.padding(0),
     ...m.margin(0)
   },
-  // ListItem base
+  // ListItem base — density-bound (DENSITY-SPEC.md §2.2, WP9B2A-ACCEPTANCE-LIST). One style, not
+  // a compact/relaxed pair: the three CSS tiers are resolved by [data-density] inheritance, so
+  // there is no longer a JS branch to pick between "compact" and "everything else" — normal
+  // resolves to the same values `itemRelaxed` used to hardcode, and an explicit `relaxed` is
+  // normalized to the DOM's canonical `data-density="normal"` before it ever reaches this class,
+  // so it resolves through the identical selector. Typography is unchanged across every tier.
   item: {
     position: "relative",
     display: "flex",
     width: "100%",
     alignItems: "center",
-    ...m.borderRadius(P),
-    color: q,
+    ...m.borderRadius(B),
+    color: X,
     transitionProperty: "color, background-color, border-color, text-decoration-color, fill, stroke",
     transitionDuration: "150ms",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+    minHeight: Rt,
+    ...m.gap(gt),
+    ...m.padding(G, j),
+    fontSize: K,
+    lineHeight: $,
     "& > svg": {
-      flexShrink: 0
-    }
-  },
-  // Density variants
-  itemCompact: {
-    minHeight: "2rem",
-    ...m.gap(y),
-    ...m.padding(B, y),
-    fontSize: j,
-    lineHeight: V,
-    "& > svg": {
-      width: "1rem",
-      height: "1rem"
-    }
-  },
-  itemRelaxed: {
-    minHeight: "2.5rem",
-    // v1 gap-3 is 0.75rem.
-    ...m.gap(z),
-    ...m.padding(y, z),
-    fontSize: j,
-    lineHeight: V,
-    "& > svg": {
+      flexShrink: 0,
       width: "1rem",
       height: "1rem"
     }
@@ -127,42 +115,42 @@ const At = (l) => /* @__PURE__ */ W(
   // Status variants
   statusDefault: {},
   statusError: {
-    backgroundColor: Nt,
-    color: Et
+    backgroundColor: Pt,
+    color: Bt
   },
   statusWarning: {
-    backgroundColor: Wt,
-    color: Tt
+    backgroundColor: Gt,
+    color: Ot
   },
   statusSuccess: {
-    backgroundColor: Dt,
-    color: kt
+    backgroundColor: At,
+    color: Nt
   },
   // Striped variant (only neutral rows)
   stripedEven: {
     "&:nth-child(even)": {
-      backgroundColor: Q
+      backgroundColor: q
     }
   },
   // Interactive hovers
   interactiveDefault: {
     ":hover": {
-      backgroundColor: Lt
+      backgroundColor: Et
     }
   },
   interactiveError: {
     ":hover": {
-      backgroundColor: Ct
+      backgroundColor: Wt
     }
   },
   interactiveWarning: {
     ":hover": {
-      backgroundColor: It
+      backgroundColor: Tt
     }
   },
   interactiveSuccess: {
     ":hover": {
-      backgroundColor: St
+      backgroundColor: Dt
     }
   },
   // Sortable modifiers
@@ -176,7 +164,12 @@ const At = (l) => /* @__PURE__ */ W(
   itemDragging: {
     opacity: 0.4
   },
-  // Index gutter
+  // Index gutter — density-bound. The negative margins cancel the ITEM's own (now density-bound)
+  // padding to keep the index flush to the row edge at every tier; `calc(-1 * var(...))`
+  // (WP9B2A-ACCEPTANCE-LIST: "negative token expressions for that existing cancellation are
+  // authorized") tracks whichever tier is active without a separate JS branch, same reasoning as
+  // `item` above. `index-padding-x` is the one matrix completion this slice adds (DENSITY-SPEC.md
+  // §2.2): 6/8/8px — comfortable reuses the normal inset, no separate source value exists for it.
   indexBase: {
     display: "flex",
     flexShrink: 0,
@@ -184,28 +177,18 @@ const At = (l) => /* @__PURE__ */ W(
     alignItems: "center",
     justifyContent: "center",
     alignSelf: "stretch",
-    borderTopLeftRadius: P,
-    borderBottomLeftRadius: P,
-    backgroundColor: Q,
+    borderTopLeftRadius: B,
+    borderBottomLeftRadius: B,
+    backgroundColor: q,
     textAlign: "center",
-    color: F,
-    fontVariantNumeric: "tabular-nums"
-  },
-  indexCompact: {
-    marginTop: `-${B}`,
-    marginBottom: `-${B}`,
-    marginLeft: `-${y}`,
-    minWidth: "1.5rem",
-    paddingLeft: "0.375rem",
-    paddingRight: "0.375rem"
-  },
-  indexRelaxed: {
-    marginTop: `-${y}`,
-    marginBottom: `-${y}`,
-    marginLeft: "-0.75rem",
-    minWidth: "1.75rem",
-    paddingLeft: y,
-    paddingRight: y
+    color: P,
+    fontVariantNumeric: "tabular-nums",
+    minWidth: Ct,
+    marginTop: `calc(-1 * ${G})`,
+    marginBottom: `calc(-1 * ${G})`,
+    marginLeft: `calc(-1 * ${j})`,
+    paddingLeft: _,
+    paddingRight: _
   },
   // Content
   content: {
@@ -215,7 +198,7 @@ const At = (l) => /* @__PURE__ */ W(
     flexShrink: 1,
     flexBasis: "0%",
     alignItems: "center",
-    ...m.gap(y),
+    ...m.gap(pt),
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
@@ -232,7 +215,7 @@ const At = (l) => /* @__PURE__ */ W(
     display: "flex",
     flexShrink: 0,
     alignItems: "center",
-    ...m.gap(B)
+    ...m.gap(mt)
   },
   // Text
   text: {
@@ -249,9 +232,9 @@ const At = (l) => /* @__PURE__ */ W(
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
-    fontSize: wt,
-    lineHeight: bt,
-    color: F
+    fontSize: kt,
+    lineHeight: Lt,
+    color: P
   },
   // Drag handle button
   dragHandle: {
@@ -261,12 +244,12 @@ const At = (l) => /* @__PURE__ */ W(
     flexShrink: 0,
     cursor: "grab",
     alignItems: "center",
-    color: yt,
+    color: St,
     backgroundColor: "transparent",
     ...m.border("0"),
     ...m.padding(0),
     ":hover": {
-      color: F
+      color: P
     },
     ":active": {
       cursor: "grabbing"
@@ -275,7 +258,7 @@ const At = (l) => /* @__PURE__ */ W(
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: vt
+      outlineColor: It
     },
     "& svg": {
       width: "1rem",
@@ -292,7 +275,7 @@ const At = (l) => /* @__PURE__ */ W(
     height: "0.125rem",
     transformOrigin: "center",
     ...m.borderRadius("9999px"),
-    backgroundColor: xt,
+    backgroundColor: wt,
     animationName: {
       from: {
         transform: "scaleX(0)",
@@ -317,7 +300,7 @@ const At = (l) => /* @__PURE__ */ W(
     transformOrigin: "center",
     transform: "scale(0.95)",
     cursor: "grabbing",
-    ...m.border("1px", "solid", dt),
+    ...m.border("1px", "solid", ut),
     backgroundColor: "rgb(255 255 255 / 55%)",
     boxShadow: "0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a",
     backdropFilter: "blur(12px)",
@@ -338,7 +321,7 @@ const At = (l) => /* @__PURE__ */ W(
   groupTrigger: {
     cursor: "pointer",
     textAlign: "left",
-    fontWeight: ht,
+    fontWeight: bt,
     backgroundColor: "transparent",
     ...m.border("0")
   },
@@ -346,7 +329,7 @@ const At = (l) => /* @__PURE__ */ W(
     width: "1rem",
     height: "1rem",
     flexShrink: 0,
-    color: ft,
+    color: yt,
     transitionProperty: "transform",
     transitionDuration: "150ms",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
@@ -364,20 +347,20 @@ const At = (l) => /* @__PURE__ */ W(
     whiteSpace: "nowrap"
   },
   standaloneGroupLabel: {
-    marginTop: _,
+    marginTop: F,
     display: "block",
     listStyleType: "none",
-    ...m.padding("0.375rem", z),
-    fontSize: j,
-    lineHeight: V,
-    fontWeight: gt,
-    color: q,
+    ...m.padding("0.375rem", dt),
+    fontSize: K,
+    lineHeight: $,
+    fontWeight: vt,
+    color: X,
     "&:first-child": {
       marginTop: 0
     }
   },
   groupContentList: {
-    paddingLeft: _
+    paddingLeft: F
   },
   collapseWrapper: {
     display: "grid",
@@ -401,201 +384,197 @@ const At = (l) => /* @__PURE__ */ W(
     width: "1rem",
     height: "1rem",
     flexShrink: 0,
-    color: ut
+    color: xt
   },
   statusIconWarning: {
     width: "1rem",
     height: "1rem",
     flexShrink: 0,
-    color: pt
+    color: ht
   },
   statusIconSuccess: {
     width: "1rem",
     height: "1rem",
     flexShrink: 0,
-    color: mt
+    color: ft
   }
-}), Bt = ({ status: l }) => {
-  const r = b();
-  return l === "error" ? /* @__PURE__ */ t(U, { className: r.statusIconError }) : l === "warning" ? /* @__PURE__ */ t(U, { className: r.statusIconWarning }) : l === "success" ? /* @__PURE__ */ t(Ot, { className: r.statusIconSuccess }) : null;
-}, J = s.createContext({
-  density: "relaxed",
+}), Vt = ({ status: n }) => {
+  const o = y();
+  return n === "error" ? /* @__PURE__ */ t(Q, { className: o.statusIconError }) : n === "warning" ? /* @__PURE__ */ t(Q, { className: o.statusIconWarning }) : n === "success" ? /* @__PURE__ */ t(zt, { className: o.statusIconSuccess }) : null;
+}, Y = i.createContext({
   striped: !1,
   showIndex: !1,
   sortable: !1
-}), $ = () => s.useContext(J), Kt = s.forwardRef(function({
-  className: r,
-  density: a = "relaxed",
+}), Z = () => i.useContext(Y), jt = (n) => n === void 0 ? void 0 : n === "relaxed" ? "normal" : n, Jt = i.forwardRef(function({
+  className: o,
+  density: l,
   striped: e = !1,
   showIndex: c = !1,
-  sortable: n = !1,
-  onReorder: i,
-  children: f,
-  ...x
+  sortable: s = !1,
+  onReorder: r,
+  children: x,
+  ...b
 }, w) {
-  const v = b(), p = s.Children.toArray(f).filter(
-    s.isValidElement
-  ), I = p.map(
-    (d, T) => d.type === Z ? s.cloneElement(d, { index: T }) : d
-  ), C = p.filter((d) => d.type === Z), u = C.map((d) => d.props.value).filter((d) => typeof d == "string"), [o, L] = s.useState(null), G = o ? u.indexOf(o) : -1, k = o != null ? C.find((d) => d.props.value === o) : void 0, D = Y(
-    K(nt, { activationConstraint: { distance: 3 } }),
-    K(ot)
-  ), H = (d) => {
-    L(d.active.id);
-  }, A = (d) => {
-    L(null);
-    const { active: T, over: N } = d;
-    if (!N || T.id === N.id) return;
-    const O = u.indexOf(T.id), R = u.indexOf(N.id);
-    O === -1 || R === -1 || i == null || i(at(u, O, R));
-  }, E = /* @__PURE__ */ t(
+  const v = y(), u = jt(l), I = i.Children.toArray(x).filter(
+    i.isValidElement
+  ), T = I.map(
+    (d, C) => d.type === U ? i.cloneElement(d, { index: C }) : d
+  ), h = I.filter((d) => d.type === U), a = h.map((d) => d.props.value).filter((d) => typeof d == "string"), [S, W] = i.useState(null), L = S ? a.indexOf(S) : -1, k = S != null ? h.find((d) => d.props.value === S) : void 0, E = J(
+    V(nt, { activationConstraint: { distance: 3 } }),
+    V(rt)
+  ), N = (d) => {
+    W(d.active.id);
+  }, O = (d) => {
+    W(null);
+    const { active: C, over: p } = d;
+    if (!p || C.id === p.id) return;
+    const z = a.indexOf(C.id), M = a.indexOf(p.id);
+    z === -1 || M === -1 || r == null || r(at(a, z, M));
+  }, A = /* @__PURE__ */ t(
     "ol",
     {
       ref: w,
       "data-slot": "list",
-      [h]: "list",
-      "data-density": a,
-      className: g(v.list, r),
-      ...x,
-      children: I
+      [g]: "list",
+      ...u !== void 0 ? { "data-density": u } : {},
+      className: f(v.list, o),
+      ...b,
+      children: T
     }
   );
-  return /* @__PURE__ */ t(J.Provider, { value: { density: a, striped: e, showIndex: c, sortable: n }, children: n ? /* @__PURE__ */ W(
+  return /* @__PURE__ */ t(Y.Provider, { value: { striped: e, showIndex: c, sortable: s }, children: s ? /* @__PURE__ */ D(
     tt,
     {
-      sensors: D,
+      sensors: E,
       collisionDetection: et,
-      onDragStart: H,
-      onDragEnd: A,
-      onDragCancel: () => L(null),
+      onDragStart: N,
+      onDragEnd: O,
+      onDragCancel: () => W(null),
       children: [
         /* @__PURE__ */ t(
           it,
           {
-            items: u,
+            items: a,
             strategy: st,
-            children: E
+            children: A
           }
         ),
-        /* @__PURE__ */ t(rt, { children: k ? /* @__PURE__ */ t(
-          M,
+        /* @__PURE__ */ t(ot, { children: k ? /* @__PURE__ */ t(
+          R,
           {
             value: k.props.value,
             status: k.props.status,
-            index: G,
+            index: L,
             className: v.dragOverlayItem,
+            ...u !== void 0 ? { "data-density": u } : {},
             children: k.props.children
           }
         ) : null })
       ]
     }
-  ) : E });
-}), Gt = s.forwardRef(function({ className: r, children: a, ...e }, c) {
-  const n = b();
+  ) : A });
+}), Ft = i.forwardRef(function({ className: o, children: l, ...e }, c) {
+  const s = y();
   return /* @__PURE__ */ t(
     "span",
     {
       ref: c,
       "data-slot": "list-item-actions",
-      [h]: "list-item-actions",
-      onPointerDown: (i) => i.stopPropagation(),
-      className: g(n.actions, r),
+      [g]: "list-item-actions",
+      onPointerDown: (r) => r.stopPropagation(),
+      className: f(s.actions, o),
       ...e,
-      children: a
+      children: l
     }
   );
-}), _t = s.forwardRef(function({ className: r, ...a }, e) {
-  const c = b();
+}), te = i.forwardRef(function({ className: o, ...l }, e) {
+  const c = y();
   return /* @__PURE__ */ t(
     "span",
     {
       ref: e,
       "data-slot": "list-item-text",
-      [h]: "list-item-text",
-      className: g(c.text, r),
-      ...a
+      [g]: "list-item-text",
+      className: f(c.text, o),
+      ...l
     }
   );
-}), qt = s.forwardRef(function({ className: r, ...a }, e) {
-  const c = b();
+}), ee = i.forwardRef(function({ className: o, ...l }, e) {
+  const c = y();
   return /* @__PURE__ */ t(
     "span",
     {
       ref: e,
       "data-slot": "list-item-description",
-      [h]: "list-item-description",
-      className: g(c.description, r),
-      ...a
+      [g]: "list-item-description",
+      className: f(c.description, o),
+      ...l
     }
   );
-}), M = s.forwardRef(
+}), R = i.forwardRef(
   function({
-    className: r,
-    value: a,
+    className: o,
+    value: l,
     status: e = "default",
     index: c,
-    children: n,
-    setNodeRef: i,
-    setActivatorNodeRef: f,
-    style: x,
+    children: s,
+    setNodeRef: r,
+    setActivatorNodeRef: x,
+    style: b,
     isDragging: w,
     dropEdge: v,
-    listeners: p,
+    listeners: u,
     attributes: I,
-    ...C
-  }, u) {
-    const o = b(), { density: L, striped: G, showIndex: k, sortable: D } = $(), H = D && !w, A = s.Children.toArray(n), E = A.find(
-      (S) => s.isValidElement(S) && S.type === Gt
-    ), d = A.filter((S) => S !== E), T = s.useCallback(
-      (S) => {
-        i == null || i(S), typeof u == "function" ? u(S) : u && (u.current = S);
+    ...T
+  }, h) {
+    const a = y(), { striped: S, showIndex: W, sortable: L } = Z(), k = L && !w, E = i.Children.toArray(s), N = E.find(
+      (p) => i.isValidElement(p) && p.type === Ft
+    ), O = E.filter((p) => p !== N), A = i.useCallback(
+      (p) => {
+        r == null || r(p), typeof h == "function" ? h(p) : h && (h.current = p);
       },
-      [i, u]
-    ), N = e === "error" ? o.statusError : e === "warning" ? o.statusWarning : e === "success" ? o.statusSuccess : o.statusDefault, O = H ? e === "error" ? o.interactiveError : e === "warning" ? o.interactiveWarning : e === "success" ? o.interactiveSuccess : o.interactiveDefault : void 0, R = L === "compact" ? o.itemCompact : o.itemRelaxed;
-    return /* @__PURE__ */ W(
+      [r, h]
+    ), d = e === "error" ? a.statusError : e === "warning" ? a.statusWarning : e === "success" ? a.statusSuccess : a.statusDefault, C = k ? e === "error" ? a.interactiveError : e === "warning" ? a.interactiveWarning : e === "success" ? a.interactiveSuccess : a.interactiveDefault : void 0;
+    return /* @__PURE__ */ D(
       "li",
       {
-        ref: T,
-        style: x,
+        ref: A,
+        style: b,
         "data-slot": "list-item",
-        [h]: "list-item",
+        [g]: "list-item",
         "data-status": e,
-        "data-value": a,
-        onPointerDown: D ? p == null ? void 0 : p.onPointerDown : void 0,
-        className: g(
-          o.item,
-          R,
-          N,
-          G && e === "default" && o.stripedEven,
-          O,
-          D && o.sortableItem,
-          w && o.itemDragging,
-          r
+        "data-value": l,
+        onPointerDown: L ? u == null ? void 0 : u.onPointerDown : void 0,
+        className: f(
+          a.item,
+          d,
+          S && e === "default" && a.stripedEven,
+          C,
+          L && a.sortableItem,
+          w && a.itemDragging,
+          o
         ),
-        ...C,
+        ...T,
         children: [
           v && /* @__PURE__ */ t(
             "span",
             {
               "data-slot": "list-drop-indicator",
-              [h]: "list-drop-indicator",
+              [g]: "list-drop-indicator",
               "aria-hidden": "true",
-              className: g(
-                o.dropIndicator,
-                v === "top" ? o.dropIndicatorTop : o.dropIndicatorBottom
+              className: f(
+                a.dropIndicator,
+                v === "top" ? a.dropIndicatorTop : a.dropIndicatorBottom
               )
             }
           ),
-          k && /* @__PURE__ */ t(
+          W && /* @__PURE__ */ t(
             "span",
             {
               "data-slot": "list-item-index",
-              [h]: "list-item-index",
+              [g]: "list-item-index",
               "aria-hidden": "true",
-              className: g(
-                o.indexBase,
-                L === "compact" ? o.indexCompact : o.indexRelaxed
-              ),
+              className: a.indexBase,
               children: (c ?? 0) + 1
             }
           ),
@@ -603,172 +582,167 @@ const At = (l) => /* @__PURE__ */ W(
             "span",
             {
               "data-slot": "list-item-content",
-              [h]: "list-item-content",
-              className: o.content,
-              children: d
+              [g]: "list-item-content",
+              className: a.content,
+              children: O
             }
           ),
-          /* @__PURE__ */ t(Bt, { status: e }),
-          E,
-          D && /* @__PURE__ */ t(
+          /* @__PURE__ */ t(Vt, { status: e }),
+          N,
+          L && /* @__PURE__ */ t(
             "button",
             {
-              ref: f,
+              ref: x,
               type: "button",
-              "aria-label": `Drag to reorder ${a ?? "item"}`,
-              className: o.dragHandle,
+              "aria-label": `Drag to reorder ${l ?? "item"}`,
+              className: a.dragHandle,
               ...I,
-              onKeyDown: p == null ? void 0 : p.onKeyDown,
-              children: /* @__PURE__ */ t(At, {})
+              onKeyDown: u == null ? void 0 : u.onKeyDown,
+              children: /* @__PURE__ */ t(Ht, {})
             }
           )
         ]
       }
     );
   }
-), Ht = s.forwardRef(
-  function(r, a) {
-    const e = s.useId();
-    process.env.NODE_ENV !== "production" && r.value === void 0 && console.warn(
+), Xt = i.forwardRef(
+  function(o, l) {
+    const e = i.useId();
+    process.env.NODE_ENV !== "production" && o.value === void 0 && console.warn(
       "List: a sortable `ListItem` is missing a `value`. Give each sortable item a unique `value` so it can be reordered — items without one are excluded from `onReorder`."
     );
     const {
       attributes: c,
-      listeners: n,
-      setNodeRef: i,
-      setActivatorNodeRef: f,
-      isDragging: x,
+      listeners: s,
+      setNodeRef: r,
+      setActivatorNodeRef: x,
+      isDragging: b,
       isOver: w,
       activeIndex: v,
-      overIndex: p
+      overIndex: u
     } = lt({
-      id: r.value ?? e,
+      id: o.value ?? e,
       animateLayoutChanges: () => !1
-    }), I = w && !x && v !== -1 ? v < p ? "bottom" : "top" : null;
+    }), I = w && !b && v !== -1 ? v < u ? "bottom" : "top" : null;
     return /* @__PURE__ */ t(
-      M,
+      R,
       {
-        ref: a,
-        ...r,
-        setNodeRef: i,
-        setActivatorNodeRef: f,
-        isDragging: x,
+        ref: l,
+        ...o,
+        setNodeRef: r,
+        setActivatorNodeRef: x,
+        isDragging: b,
         dropEdge: I,
-        listeners: n,
+        listeners: s,
         attributes: c
       }
     );
   }
-), Z = s.forwardRef(
-  function(r, a) {
-    const { sortable: e } = $();
-    return e ? /* @__PURE__ */ t(Ht, { ref: a, ...r }) : /* @__PURE__ */ t(M, { ref: a, ...r });
+), U = i.forwardRef(
+  function(o, l) {
+    const { sortable: e } = Z();
+    return e ? /* @__PURE__ */ t(Xt, { ref: l, ...o }) : /* @__PURE__ */ t(R, { ref: l, ...o });
   }
-), X = s.createContext(null), Qt = s.forwardRef(
+), H = i.createContext(null), oe = i.forwardRef(
   function({
-    open: r,
-    defaultOpen: a = !1,
+    open: o,
+    defaultOpen: l = !1,
     onOpenChange: e,
     className: c,
-    children: n,
-    ...i
-  }, f) {
-    const x = b(), [w, v] = s.useState(a), p = r ?? w, I = s.useId(), C = (u) => {
-      r === void 0 && v(u), e == null || e(u);
+    children: s,
+    ...r
+  }, x) {
+    const b = y(), [w, v] = i.useState(l), u = o ?? w, I = i.useId(), T = (h) => {
+      o === void 0 && v(h), e == null || e(h);
     };
-    return /* @__PURE__ */ t(X.Provider, { value: { open: p, setOpen: C, contentId: I }, children: /* @__PURE__ */ t(
+    return /* @__PURE__ */ t(H.Provider, { value: { open: u, setOpen: T, contentId: I }, children: /* @__PURE__ */ t(
       "li",
       {
-        ref: f,
+        ref: x,
         "data-slot": "list-group",
-        [h]: "list-group",
-        "data-state": p ? "open" : "closed",
-        className: g(x.group, c),
-        ...i,
-        children: n
+        [g]: "list-group",
+        "data-state": u ? "open" : "closed",
+        className: f(b.group, c),
+        ...r,
+        children: s
       }
     ) });
   }
-), Ut = s.forwardRef(function({ className: r, children: a, ...e }, c) {
-  const n = b(), i = s.useContext(X), { density: f } = $();
-  if (i) {
-    const x = f === "compact" ? n.itemCompact : n.itemRelaxed;
-    return /* @__PURE__ */ W(
-      "button",
-      {
-        ref: c,
-        type: "button",
-        "data-slot": "list-group-trigger",
-        [h]: "list-group-trigger",
-        "aria-expanded": i.open,
-        "aria-controls": i.contentId,
-        onClick: () => i.setOpen(!i.open),
-        className: g(
-          n.item,
-          x,
-          n.interactiveDefault,
-          n.groupTrigger,
-          r
+), re = i.forwardRef(function({ className: o, children: l, ...e }, c) {
+  const s = y(), r = i.useContext(H);
+  return r ? /* @__PURE__ */ D(
+    "button",
+    {
+      ref: c,
+      type: "button",
+      "data-slot": "list-group-trigger",
+      [g]: "list-group-trigger",
+      "aria-expanded": r.open,
+      "aria-controls": r.contentId,
+      onClick: () => r.setOpen(!r.open),
+      className: f(
+        s.item,
+        s.interactiveDefault,
+        s.groupTrigger,
+        o
+      ),
+      ...e,
+      children: [
+        /* @__PURE__ */ t(
+          Mt,
+          {
+            className: f(
+              s.groupChevron,
+              r.open && s.groupChevronOpen
+            )
+          }
         ),
-        ...e,
-        children: [
-          /* @__PURE__ */ t(
-            Rt,
-            {
-              className: g(
-                n.groupChevron,
-                i.open && n.groupChevronOpen
-              )
-            }
-          ),
-          /* @__PURE__ */ t("span", { className: n.groupTriggerText, children: a })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ t(
+        /* @__PURE__ */ t("span", { className: s.groupTriggerText, children: l })
+      ]
+    }
+  ) : /* @__PURE__ */ t(
     "li",
     {
       ref: c,
       "data-slot": "list-group-label",
-      [h]: "list-group-label",
-      className: g(n.standaloneGroupLabel, r),
-      children: a
+      [g]: "list-group-label",
+      className: f(s.standaloneGroupLabel, o),
+      children: l
     }
   );
-}), Zt = s.forwardRef(function({ className: r, children: a, ...e }, c) {
-  const n = b(), i = s.useContext(X), f = /* @__PURE__ */ t(
+}), ne = i.forwardRef(function({ className: o, children: l, ...e }, c) {
+  const s = y(), r = i.useContext(H), x = /* @__PURE__ */ t(
     "ul",
     {
       ref: c,
       "data-slot": "list-group-content",
-      [h]: "list-group-content",
-      className: g(n.list, n.groupContentList, r),
+      [g]: "list-group-content",
+      className: f(s.list, s.groupContentList, o),
       ...e,
-      children: a
+      children: l
     }
   );
-  return i ? /* @__PURE__ */ t(
+  return r ? /* @__PURE__ */ t(
     "div",
     {
-      id: i.contentId,
-      "data-state": i.open ? "open" : "closed",
-      className: g(
-        n.collapseWrapper,
-        i.open && n.collapseWrapperOpen
+      id: r.contentId,
+      "data-state": r.open ? "open" : "closed",
+      className: f(
+        s.collapseWrapper,
+        r.open && s.collapseWrapperOpen
       ),
-      children: /* @__PURE__ */ t("div", { className: n.collapseInner, children: f })
+      children: /* @__PURE__ */ t("div", { className: s.collapseInner, children: x })
     }
-  ) : f;
+  ) : x;
 });
 export {
-  Kt as List,
-  Qt as ListGroup,
-  Zt as ListGroupContent,
-  Ut as ListGroupLabel,
-  Z as ListItem,
-  Gt as ListItemActions,
-  qt as ListItemDescription,
-  _t as ListItemText
+  Jt as List,
+  oe as ListGroup,
+  ne as ListGroupContent,
+  re as ListGroupLabel,
+  U as ListItem,
+  Ft as ListItemActions,
+  ee as ListItemDescription,
+  te as ListItemText
 };
 //# sourceMappingURL=list.js.map