@onereach/ui-components 26.4.1-beta.5879.0 → 26.4.1-beta.5881.0

package/dist/esm/{OrDataGrid-D8ZLdtGb.mjs → OrDataGrid-DnLT39dk.mjs}

@@ -1,23 +1,23 @@
-import { O as te } from "./OrCheckbox-WPBzlvaV.mjs";
-import { O as ne } from "./OrPagination-BXzDa-Su.mjs";
-import { O as le } from "./OrSearch-CRFuNmg2.mjs";
-import { O as se } from "./OrSkeletonArea.vue_vue_type_script_lang-jgRhbZ0X.mjs";
-import { defineComponent as M, ref as D, computed as n, openBlock as r, createElementBlock as h, normalizeClass as f, renderSlot as d, createCommentVNode as p, resolveComponent as m, normalizeStyle as K, Fragment as q, createBlock as y, watch as ae, createElementVNode as ie, withModifiers as ee, createVNode as z, mergeProps as de, withCtx as b, onMounted as ue, createSlots as Y, normalizeProps as ce, guardReactiveProps as me, renderList as Q, createTextVNode as Z, toDisplayString as _ } from "vue";
+import { O as ne } from "./OrCheckbox-WPBzlvaV.mjs";
+import { O as ce } from "./OrPagination-BXzDa-Su.mjs";
+import { O as ue } from "./OrSearch-CRFuNmg2.mjs";
+import { O as me } from "./OrSkeletonArea.vue_vue_type_script_lang-jgRhbZ0X.mjs";
+import { defineComponent as M, ref as D, computed as o, openBlock as r, createElementBlock as p, normalizeClass as c, renderSlot as d, createCommentVNode as h, resolveComponent as f, normalizeStyle as A, createBlock as y, watch as se, createElementVNode as fe, withModifiers as oe, createVNode as W, mergeProps as ge, withCtx as k, onMounted as he, createSlots as Z, normalizeProps as pe, guardReactiveProps as ve, Fragment as Q, renderList as Y, createTextVNode as _, toDisplayString as x } from "vue";
 import { _ as R } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
-import { O as fe } from "./OrDatePicker-D-Do0tSf.mjs";
-import { O as ge } from "./OrDateTimePicker-myqJkQxy.mjs";
+import { O as ke } from "./OrDatePicker-D-Do0tSf.mjs";
+import { O as ye } from "./OrDateTimePicker-myqJkQxy.mjs";
 import "./OrDateTimePicker.vue_vue_type_script_lang-xnGNoSUB.mjs";
 import "@onereach/ui-components-common/types";
-import { O as pe } from "./OrInput-nExtCSw8.mjs";
-import { O as he } from "./OrRating-CAwz23JA.mjs";
-import { O as ve } from "./OrSelect-BeL73iXu.mjs";
-import { O as be } from "./OrSwitch-BtoXDsZx.mjs";
-import { O as ye } from "./OrTagInput-B2U22gXE.mjs";
-import { O as ke } from "./OrTimePicker-QPUb8olp.mjs";
-import { O as Oe } from "./OrIcon-k8cyvh-D.mjs";
-import { useElementSize as $e } from "@vueuse/core";
-import { O as we } from "./OrNotification-BkjmRseb.mjs";
-const De = [
+import { O as be } from "./OrInput-nExtCSw8.mjs";
+import { O as Oe } from "./OrRating-CAwz23JA.mjs";
+import { O as $e } from "./OrSelect-BeL73iXu.mjs";
+import { O as we } from "./OrSwitch-BtoXDsZx.mjs";
+import { O as De } from "./OrTagInput-B2U22gXE.mjs";
+import { O as Se } from "./OrTimePicker-QPUb8olp.mjs";
+import { O as Te } from "./OrIcon-k8cyvh-D.mjs";
+import { useElementSize as Ge } from "@vueuse/core";
+import { O as Ce } from "./OrNotification-BkjmRseb.mjs";
+const Ve = [
   // Layout
   "layout-row",
   // Interactivity
@@ -31,98 +31,98 @@ const De = [
   // Theme
   "theme-border-disabled border-t-1",
   "dark:theme-border-disabled-dark"
-], Se = [
+], Me = [
   // Typography
   "typography-body-2-semibold"
-], Te = M({
+], Re = M({
   name: "OrDataGridFooter",
   expose: [
     "root"
   ],
   setup() {
-    const e = D(), t = n(() => [
+    const e = D(), t = o(() => [
       "or-data-grid-footer-v3",
-      ...De
-    ]), l = n(() => [
-      ...Se
+      ...Ve
+    ]), n = o(() => [
+      ...Me
     ]);
     return {
       root: e,
       rootStyles: t,
-      statusStyles: l
+      statusStyles: n
     };
   }
-}), Ge = {
+}), Ie = {
   key: 1,
-  class: /* @__PURE__ */ f(["grow"])
+  class: /* @__PURE__ */ c(["grow"])
 };
-function Ce(e, t, l, v, g, u) {
-  return r(), h("div", {
+function ze(e, t, n, v, g, u) {
+  return r(), p("div", {
     ref: "root",
-    class: f(e.rootStyles)
+    class: c(e.rootStyles)
   }, [
-    e.$slots.status ? (r(), h("div", {
+    e.$slots.status ? (r(), p("div", {
       key: 0,
-      class: f(e.statusStyles)
+      class: c(e.statusStyles)
     }, [
       d(e.$slots, "status")
-    ], 2)) : p("", !0),
+    ], 2)) : h("", !0),
     d(e.$slots, "actions"),
-    e.$slots.paging ? (r(), h("div", Ge)) : p("", !0),
+    e.$slots.paging ? (r(), p("div", Ie)) : h("", !0),
     d(e.$slots, "paging")
   ], 2);
 }
-const Ve = /* @__PURE__ */ R(Te, [["render", Ce]]), Me = [
+const He = /* @__PURE__ */ R(Re, [["render", ze]]), Ee = [
   // Layout
   "layout-row items-start gap-md",
   // Interactivity
   "interactivity-default",
   // Box
   "h-3xl"
-], Re = [
+], Fe = [
   // Typography
   "typography-headline-2"
-], Ie = M({
+], We = M({
   name: "OrDataGridHeader",
   expose: [
     "root"
   ],
   setup() {
-    const e = D(), t = n(() => [
+    const e = D(), t = o(() => [
       "or-data-grid-header-v3",
-      ...Me
-    ]), l = n(() => [
-      ...Re
+      ...Ee
+    ]), n = o(() => [
+      ...Fe
     ]);
     return {
       root: e,
       rootStyles: t,
-      titleStyles: l
+      titleStyles: n
     };
   }
-}), ze = {
+}), Pe = {
   key: 1,
-  class: /* @__PURE__ */ f(["grow"])
+  class: /* @__PURE__ */ c(["grow"])
 };
-function He(e, t, l, v, g, u) {
-  return r(), h("div", {
+function Ne(e, t, n, v, g, u) {
+  return r(), p("div", {
     ref: "root",
-    class: f(e.rootStyles)
+    class: c(e.rootStyles)
   }, [
-    e.$slots.title ? (r(), h("div", {
+    e.$slots.title ? (r(), p("div", {
       key: 0,
-      class: f(e.titleStyles)
+      class: c(e.titleStyles)
     }, [
       d(e.$slots, "title")
-    ], 2)) : p("", !0),
-    e.$slots.searching || e.$slots.extraActions ? (r(), h("div", ze)) : p("", !0),
+    ], 2)) : h("", !0),
+    e.$slots.searching || e.$slots.extraActions ? (r(), p("div", Pe)) : h("", !0),
     d(e.$slots, "searching"),
-    e.$slots.extraActions ? d(e.$slots, "extraActions", { key: 2 }) : p("", !0)
+    e.$slots.extraActions ? d(e.$slots, "extraActions", { key: 2 }) : h("", !0)
   ], 2);
 }
-const Fe = /* @__PURE__ */ R(Ie, [["render", He]]);
-var k = /* @__PURE__ */ ((e) => (e.Standard = "standard", e.Comfortable = "comfortable", e.Compact = "compact", e.Dynamic = "dynamic", e))(k || {});
-const B = "52px", We = [
+const je = /* @__PURE__ */ R(We, [["render", Ne]]);
+var b = /* @__PURE__ */ ((e) => (e.Standard = "standard", e.Comfortable = "comfortable", e.Compact = "compact", e.Dynamic = "dynamic", e))(b || {});
+const K = "52px", Ue = [
   // Layout
   "layout-row items-center",
   // Spacing
@@ -139,6 +139,8 @@ const B = "52px", We = [
   "dark:focus-within:theme-border-primary-dark",
   "focus-within:theme-outline-primary",
   "dark:focus-within:theme-outline-primary-dark",
+  // Theme (Stacking)
+  "relative",
   // Theme (.sticky-start)
   "[&.sticky-start]:theme-background-default [&.sticky-start]:border-e-disabled [&.sticky-start]:border-solid",
   "dark:[&.sticky-start]:theme-background-default-dark dark:[&.sticky-start]:border-e-disabled-dark",
@@ -154,23 +156,23 @@ const B = "52px", We = [
   // Theme (.resizable)
   "[&.resizable]:border-e-disabled [&.resizable]:border-solid",
   "dark:[&.resizable]:border-e-disabled-dark"
-], Pe = [
+], Le = [
   // interactivity
   "interactivity-select",
   // Typography
   "truncate"
-], Ee = M({
+], Ae = M({
   name: "OrDataGridTableContentCell",
   components: {
-    OrCheckbox: te,
-    OrDatePicker: fe,
-    OrDateTimePicker: ge,
-    OrInput: pe,
-    OrRating: he,
-    OrSelect: ve,
-    OrSwitch: be,
-    OrTagInput: ye,
-    OrTimePicker: ke
+    OrCheckbox: ne,
+    OrDatePicker: ke,
+    OrDateTimePicker: ye,
+    OrInput: be,
+    OrRating: Oe,
+    OrSelect: $e,
+    OrSwitch: we,
+    OrTagInput: De,
+    OrTimePicker: Se
   },
   model: {
     prop: "modelValue",
@@ -192,11 +194,15 @@ const B = "52px", We = [
     },
     variant: {
       type: String,
-      default: k.Standard
+      default: b.Standard
     },
     override: {
       type: Boolean,
       default: !1
+    },
+    stickyOffset: {
+      type: Number,
+      default: 0
     }
   },
   emits: [
@@ -206,28 +212,30 @@ const B = "52px", We = [
     "root"
   ],
   setup(e, t) {
-    const l = D(), v = n(() => {
-      var O, T, C, V;
+    const n = D(), v = o(() => {
+      var O, G, I, C;
       return [
         "or-data-grid-table-content-cell-v3",
-        ...We,
-        ...(O = e.column) != null && O.stickiness ? [`sticky-${e.column.stickiness}`] : [],
-        ...(T = e.features) != null && T.resizing && ((C = e.column) != null && C.name) && ((V = e.column) == null ? void 0 : V.resizing) !== !1 ? ["resizable"] : []
+        ...Ue,
+        ...(O = e.column) != null && O.stickiness ? [`sticky-${e.column.stickiness}`, "overflow-hidden"] : [],
+        ...(G = e.features) != null && G.resizing && ((I = e.column) != null && I.name) && ((C = e.column) == null ? void 0 : C.resizing) !== !1 ? ["resizable"] : []
       ];
-    }), g = n(() => {
+    }), g = o(() => {
       if (e.column)
         switch (e.column.stickiness) {
           case "start":
             return {
               position: "sticky",
-              insetInlineStart: "0",
+              insetInlineStart: `${e.stickyOffset}px`,
+              zIndex: "30",
               flexDirection: e.column.alignment === "end" ? "row-reverse" : void 0,
               justifyContent: e.column.alignment
             };
           case "end":
             return {
               position: "sticky",
-              insetInlineEnd: "0",
+              insetInlineEnd: `${e.stickyOffset}px`,
+              zIndex: "30",
               flexDirection: e.column.alignment === "end" ? "row-reverse" : void 0,
               justifyContent: e.column.alignment
             };
@@ -240,64 +248,70 @@ const B = "52px", We = [
       return {
         justifyContent: "center"
       };
-    }), u = n(() => {
-      var T, C;
-      const O = ((T = e.column) == null ? void 0 : T.wrapping) ?? (e.variant === k.Dynamic && !((C = e.column) != null && C.control));
+    }), u = o(() => {
+      var C, i, w, s, E;
+      const O = ((C = e.column) == null ? void 0 : C.wrapping) ?? (e.variant === b.Dynamic && !((i = e.column) != null && i.control)), G = !!((w = e.column) != null && w.stickiness), I = ((E = (s = e.column) == null ? void 0 : s.control) == null ? void 0 : E.type) === "tags";
       return [
-        ...Pe.filter((V) => V !== "truncate"),
+        "layout-row items-center w-full min-w-0",
+        ...G || I ? ["overflow-hidden"] : [],
+        ...Le.filter((P) => P !== "truncate"),
         ...O ? ["whitespace-pre-wrap break-words"] : ["truncate"]
       ];
-    }), G = n(() => ({
-      minWidth: e.column && e.column.minWidth || B,
+    }), T = o(() => ({
+      minWidth: e.column && e.column.minWidth || K,
       maxWidth: e.column && e.column.maxWidth
-    })), I = n({
+    })), H = o({
       get: () => e.modelValue,
       set: (O) => {
         t.emit("input", O);
       }
-    }), S = n(() => {
+    }), S = o(() => {
       var O;
       return (O = e.column) == null ? void 0 : O.control;
     });
     return {
-      root: l,
+      root: n,
       rootStyles: v,
       rootInlineStyles: g,
       contentStyles: u,
-      contentInlineStyles: G,
-      model: I,
+      contentInlineStyles: T,
+      model: H,
       control: S,
-      DATA_GRID_DEFAULT_MIN_WIDTH: B
+      DATA_GRID_DEFAULT_MIN_WIDTH: K
     };
   }
 });
-function je(e, t, l, v, g, u) {
-  const G = m("OrInput"), I = m("OrRating"), S = m("OrSelect"), O = m("OrCheckbox"), T = m("OrSwitch"), C = m("OrDatePicker"), V = m("OrTimePicker"), o = m("OrDateTimePicker"), c = m("OrTagInput");
-  return r(), h("div", {
+function qe(e, t, n, v, g, u) {
+  const T = f("OrInput"), H = f("OrRating"), S = f("OrSelect"), O = f("OrCheckbox"), G = f("OrSwitch"), I = f("OrDatePicker"), C = f("OrTimePicker"), i = f("OrDateTimePicker"), w = f("OrTagInput");
+  return r(), p("div", {
     ref: "root",
-    class: f(e.rootStyles),
-    style: K(e.rootInlineStyles)
+    class: c(e.rootStyles),
+    style: A(e.rootInlineStyles)
   }, [
-    e.override ? d(e.$slots, "default", { key: 0 }) : e.control ? (r(), h(q, { key: 1 }, [
-      e.control.type === "text" ? (r(), y(G, {
+    e.override ? d(e.$slots, "default", { key: 0 }) : e.control ? (r(), p("div", {
+      key: 1,
+      class: c(e.contentStyles),
+      style: A(e.contentInlineStyles)
+    }, [
+      e.control.type === "text" ? (r(), y(T, {
         key: 0,
         modelValue: e.model,
         "onUpdate:modelValue": t[0] || (t[0] = (s) => e.model = s),
         type: "text",
         variant: "embedded"
-      }, null, 8, ["modelValue"])) : p("", !0),
-      e.control.type === "number" ? (r(), y(G, {
+      }, null, 8, ["modelValue"])) : h("", !0),
+      e.control.type === "number" ? (r(), y(T, {
         key: 1,
         modelValue: e.model,
         "onUpdate:modelValue": t[1] || (t[1] = (s) => e.model = s),
         type: "number",
         variant: "embedded"
-      }, null, 8, ["modelValue"])) : p("", !0),
-      e.control.type === "rating" ? (r(), y(I, {
+      }, null, 8, ["modelValue"])) : h("", !0),
+      e.control.type === "rating" ? (r(), y(H, {
         key: 2,
         modelValue: e.model,
         "onUpdate:modelValue": t[2] || (t[2] = (s) => e.model = s)
-      }, null, 8, ["modelValue"])) : p("", !0),
+      }, null, 8, ["modelValue"])) : h("", !0),
       e.control.type === "select" ? (r(), y(S, {
         key: 3,
         modelValue: e.model,
@@ -305,56 +319,59 @@ function je(e, t, l, v, g, u) {
         options: e.control.options,
         variant: "embedded",
         anchor: e.root
-      }, null, 8, ["modelValue", "options", "anchor"])) : p("", !0),
+      }, null, 8, ["modelValue", "options", "anchor"])) : h("", !0),
       e.control.type === "checkbox" ? (r(), y(O, {
         key: 4,
         modelValue: e.model,
         "onUpdate:modelValue": t[4] || (t[4] = (s) => e.model = s)
-      }, null, 8, ["modelValue"])) : p("", !0),
-      e.control.type === "switch" ? (r(), y(T, {
+      }, null, 8, ["modelValue"])) : h("", !0),
+      e.control.type === "switch" ? (r(), y(G, {
         key: 5,
         modelValue: e.model,
         "onUpdate:modelValue": t[5] || (t[5] = (s) => e.model = s)
-      }, null, 8, ["modelValue"])) : p("", !0),
-      e.control.type === "date" ? (r(), y(C, {
+      }, null, 8, ["modelValue"])) : h("", !0),
+      e.control.type === "date" ? (r(), y(I, {
         key: 6,
         modelValue: e.model,
         "onUpdate:modelValue": t[6] || (t[6] = (s) => e.model = s),
         variant: "embedded",
         anchor: e.root
-      }, null, 8, ["modelValue", "anchor"])) : p("", !0),
-      e.control.type === "time" ? (r(), y(V, {
+      }, null, 8, ["modelValue", "anchor"])) : h("", !0),
+      e.control.type === "time" ? (r(), y(C, {
         key: 7,
         modelValue: e.model,
         "onUpdate:modelValue": t[7] || (t[7] = (s) => e.model = s),
         variant: "embedded",
         anchor: e.root
-      }, null, 8, ["modelValue", "anchor"])) : p("", !0),
-      e.control.type === "datetime" ? (r(), y(o, {
+      }, null, 8, ["modelValue", "anchor"])) : h("", !0),
+      e.control.type === "datetime" ? (r(), y(i, {
         key: 8,
         modelValue: e.model,
         "onUpdate:modelValue": t[8] || (t[8] = (s) => e.model = s),
         variant: "embedded",
         anchor: e.root
-      }, null, 8, ["modelValue", "anchor"])) : p("", !0),
-      e.control.type === "tags" ? (r(), y(c, {
+      }, null, 8, ["modelValue", "anchor"])) : h("", !0),
+      e.control.type === "tags" ? (r(), y(w, {
         key: 9,
         modelValue: e.model,
         "onUpdate:modelValue": t[9] || (t[9] = (s) => e.model = s),
-        variant: "embedded"
-      }, null, 8, ["modelValue"])) : p("", !0)
-    ], 64)) : (r(), h("div", {
+        variant: "embedded",
+        class: c(["grow min-w-0"])
+      }, null, 8, ["modelValue"])) : h("", !0)
+    ], 6)) : (r(), p("div", {
       key: 2,
-      class: f(e.contentStyles),
-      style: K(e.contentInlineStyles)
+      class: c(e.contentStyles),
+      style: A(e.contentInlineStyles)
     }, [
       d(e.$slots, "default")
     ], 6))
   ], 6);
 }
-const Ne = /* @__PURE__ */ R(Ee, [["render", je]]), Ue = [
+const Be = /* @__PURE__ */ R(Ae, [["render", qe]]), Ke = [
   // Layout
   "grid grid-cols-[subgrid] col-span-full",
+  // Stacking context
+  "relative z-[1]",
   // Typography
   "typography-body-2-regular",
   // Theme
@@ -374,24 +391,24 @@ const Ne = /* @__PURE__ */ R(Ee, [["render", je]]), Ue = [
   // Theme (selected + hover / children)
   "children:hover:selected:theme-background-surface-3",
   "dark:children:hover:selected:theme-background-surface-3-dark"
-], Le = {
-  [k.Standard]: [
+], Xe = {
+  [b.Standard]: [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ],
-  [k.Comfortable]: [
+  [b.Comfortable]: [
     // Box
     "min-h-[calc(theme(spacing.3xl)+theme(spacing.xs))]"
   ],
-  [k.Compact]: [
+  [b.Compact]: [
     // Box
     "min-h-[calc(theme(spacing.xl)+theme(spacing.xs))]"
   ],
-  [k.Dynamic]: [
+  [b.Dynamic]: [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ]
-}, Ae = M({
+}, Je = M({
   name: "OrDataGridTableContentRow",
   props: {
     variant: {
@@ -411,39 +428,39 @@ const Ne = /* @__PURE__ */ R(Ee, [["render", je]]), Ue = [
     "root"
   ],
   setup(e) {
-    const t = D(), l = n(() => [
+    const t = D(), n = o(() => [
       "or-data-grid-table-content-row-v3",
-      ...Ue,
-      ...Le[e.variant],
+      ...Ke,
+      ...Xe[e.variant],
       ...e.interactive ? ["cursor-pointer"] : []
     ]);
     return {
       root: t,
-      rootStyles: l
+      rootStyles: n
     };
   }
-}), qe = ["selected"];
-function Be(e, t, l, v, g, u) {
-  return r(), h("div", {
+}), Qe = ["selected"];
+function Ye(e, t, n, v, g, u) {
+  return r(), p("div", {
     ref: "root",
-    class: f(e.rootStyles),
+    class: c(e.rootStyles),
     selected: e.selected
   }, [
     d(e.$slots, "default")
-  ], 10, qe);
+  ], 10, Qe);
 }
-const Ke = /* @__PURE__ */ R(Ae, [["render", Be]]), Xe = [
+const Ze = /* @__PURE__ */ R(Je, [["render", Ye]]), _e = [
   // Layout
   "contents"
-], Je = M({
+], xe = M({
   name: "OrDataGridTableContent",
   expose: [
     "root"
   ],
   setup() {
-    const e = D(), t = n(() => [
+    const e = D(), t = o(() => [
       "or-data-grid-table-content-v3",
-      ...Xe
+      ..._e
     ]);
     return {
       root: e,
@@ -451,15 +468,15 @@ const Ke = /* @__PURE__ */ R(Ae, [["render", Be]]), Xe = [
     };
   }
 });
-function Qe(e, t, l, v, g, u) {
-  return r(), h("div", {
+function et(e, t, n, v, g, u) {
+  return r(), p("div", {
     ref: "root",
-    class: f(e.rootStyles)
+    class: c(e.rootStyles)
   }, [
     d(e.$slots, "default")
   ], 2);
 }
-const Ye = /* @__PURE__ */ R(Je, [["render", Qe]]), Ze = [
+const tt = /* @__PURE__ */ R(xe, [["render", et]]), at = [
   // Layout
   "layout-row",
   // Spacing
@@ -469,15 +486,15 @@ const Ye = /* @__PURE__ */ R(Je, [["render", Qe]]), Ze = [
   // Theme
   "theme-border-transparent border-1",
   "dark:theme-border-transparent-dark"
-], _e = M({
+], rt = M({
   name: "OrDataGridTableFooterCell",
   expose: [
     "root"
   ],
   setup() {
-    const e = D(), t = n(() => [
+    const e = D(), t = o(() => [
       "or-data-grid-table-footer-cell-v3",
-      ...Ze
+      ...at
     ]);
     return {
       root: e,
@@ -485,15 +502,15 @@ const Ye = /* @__PURE__ */ R(Je, [["render", Qe]]), Ze = [
     };
   }
 });
-function xe(e, t, l, v, g, u) {
-  return r(), h("div", {
+function ot(e, t, n, v, g, u) {
+  return r(), p("div", {
     ref: "root",
-    class: f(e.rootStyles)
+    class: c(e.rootStyles)
   }, [
     d(e.$slots, "default")
   ], 2);
 }
-const et = /* @__PURE__ */ R(_e, [["render", xe]]), tt = [
+const nt = /* @__PURE__ */ R(rt, [["render", ot]]), st = [
   // Layout
   "grid grid-cols-1",
   // Typography
@@ -506,24 +523,24 @@ const et = /* @__PURE__ */ R(_e, [["render", xe]]), tt = [
   "dark:children:theme-foreground-default-dark",
   "children:theme-background-default",
   "dark:children:theme-background-default-dark"
-], at = {
-  [k.Standard]: [
+], lt = {
+  [b.Standard]: [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ],
-  [k.Comfortable]: [
+  [b.Comfortable]: [
     // Box
     "min-h-[calc(theme(spacing.3xl)+theme(spacing.xs))]"
   ],
-  [k.Compact]: [
+  [b.Compact]: [
     // Box
     "min-h-[calc(theme(spacing.xl)+theme(spacing.xs))]"
   ],
-  [k.Dynamic]: [
+  [b.Dynamic]: [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ]
-}, rt = M({
+}, it = M({
   name: "OrDataGridTableFooterRow",
   props: {
     variant: {
@@ -535,37 +552,37 @@ const et = /* @__PURE__ */ R(_e, [["render", xe]]), tt = [
     "root"
   ],
   setup(e) {
-    const t = D(), l = n(() => [
+    const t = D(), n = o(() => [
       "or-data-grid-table-footer-row-v3",
-      ...tt,
-      ...at[e.variant]
+      ...st,
+      ...lt[e.variant]
     ]);
     return {
       root: t,
-      rootStyles: l
+      rootStyles: n
     };
   }
 });
-function ot(e, t, l, v, g, u) {
-  return r(), h("div", {
+function dt(e, t, n, v, g, u) {
+  return r(), p("div", {
     ref: "root",
-    class: f(e.rootStyles)
+    class: c(e.rootStyles)
   }, [
     d(e.$slots, "default")
   ], 2);
 }
-const nt = /* @__PURE__ */ R(rt, [["render", ot]]), lt = [
+const ct = /* @__PURE__ */ R(it, [["render", dt]]), ut = [
   // Layout
   "contents"
-], st = M({
+], mt = M({
   name: "OrDataGridTableFooter",
   expose: [
     "root"
   ],
   setup() {
-    const e = D(), t = n(() => [
+    const e = D(), t = o(() => [
       "or-data-grid-table-footer-v3",
-      ...lt
+      ...ut
     ]);
     return {
       root: e,
@@ -573,15 +590,15 @@ const nt = /* @__PURE__ */ R(rt, [["render", ot]]), lt = [
     };
   }
 });
-function it(e, t, l, v, g, u) {
-  return r(), h("div", {
+function ft(e, t, n, v, g, u) {
+  return r(), p("div", {
     ref: "root",
-    class: f(e.rootStyles)
+    class: c(e.rootStyles)
   }, [
     d(e.$slots, "default")
   ], 2);
 }
-const dt = /* @__PURE__ */ R(st, [["render", it]]), ut = [
+const gt = /* @__PURE__ */ R(mt, [["render", ft]]), ht = [
   // Layout
   "layout-row items-center",
   // Spacing
@@ -594,17 +611,17 @@ const dt = /* @__PURE__ */ R(st, [["render", it]]), ut = [
   "theme-outline-transparent outline-2 -outline-offset-1",
   "dark:theme-outline-transparent-dark",
   // Theme (Stacking)
-  "relative z-1 hover:z-2",
+  "relative hover:z-[2]",
   // Theme (.sticky-start)
-  "[&.sticky-start]:theme-background-surface-variant-1 [&.sticky-start]:border-e-disabled [&.sticky-start]:border-solid z-20 hover:z-30",
+  "[&.sticky-start]:theme-background-surface-variant-1 [&.sticky-start]:border-e-disabled [&.sticky-start]:border-solid",
   "dark:[&.sticky-start]:theme-background-surface-variant-1-dark dark:[&.sticky-start]:border-e-disabled-dark",
   // Theme (.sticky-end)
-  "[&.sticky-end]:theme-background-surface-variant-1 [&.sticky-end]:border-s-disabled [&.sticky-end]:border-solid z-20 hover:z-30",
+  "[&.sticky-end]:theme-background-surface-variant-1 [&.sticky-end]:border-s-disabled [&.sticky-end]:border-solid",
   "dark:[&.sticky-end]:theme-background-surface-variant-1-dark dark:[&.sticky-end]:border-s-disabled-dark",
   // Theme (.resizable)
   "[&.resizable]:border-e-disabled [&.resizable]:border-solid",
   "dark:[&.resizable]:border-e-disabled-dark"
-], ct = [
+], pt = [
   // Position
   "absolute top-0 bottom-0 end-0 z-50",
   // Box
@@ -615,10 +632,10 @@ const dt = /* @__PURE__ */ R(st, [["render", it]]), ut = [
   "dark:hover:theme-background-primary-dark",
   "active:theme-background-primary",
   "dark:active:theme-background-primary-dark"
-], mt = M({
+], vt = M({
   name: "OrDataGridTableHeaderCell",
   components: {
-    OrIcon: Oe
+    OrIcon: Te
   },
   model: {
     prop: "modelValue",
@@ -636,6 +653,10 @@ const dt = /* @__PURE__ */ R(st, [["render", it]]), ut = [
     features: {
       type: Object,
       default: void 0
+    },
+    stickyOffset: {
+      type: Number,
+      default: 0
     }
   },
   emits: [
@@ -648,45 +669,47 @@ const dt = /* @__PURE__ */ R(st, [["render", it]]), ut = [
     "root"
   ],
   setup(e, t) {
-    const l = D(), v = n(() => {
-      var o, c, s;
-      return !!((o = e.features) != null && o.sorting) && !!((c = e.column) != null && c.name) && ((s = e.column) == null ? void 0 : s.sorting) !== !1;
-    }), g = n(() => {
-      var o, c, s;
-      return !!((o = e.features) != null && o.resizing) && !!((c = e.column) != null && c.name) && ((s = e.column) == null ? void 0 : s.resizing) !== !1;
-    }), u = n(() => {
-      var o;
+    const n = D(), v = o(() => {
+      var i, w, s;
+      return !!((i = e.features) != null && i.sorting) && !!((w = e.column) != null && w.name) && ((s = e.column) == null ? void 0 : s.sorting) !== !1;
+    }), g = o(() => {
+      var i, w, s;
+      return !!((i = e.features) != null && i.resizing) && !!((w = e.column) != null && w.name) && ((s = e.column) == null ? void 0 : s.resizing) !== !1;
+    }), u = o(() => {
+      var i;
       return [
         "or-data-grid-table-header-cell-v3",
         "relative",
-        ...ut,
-        ...(o = e.column) != null && o.stickiness ? [`sticky-${e.column.stickiness}`] : [],
+        ...ht,
+        ...(i = e.column) != null && i.stickiness ? [`sticky-${e.column.stickiness}`, "overflow-hidden"] : [],
         ...g.value ? ["resizable"] : [],
         ...v.value ? ["interactivity-click"] : []
       ];
-    }), G = n(() => [
+    }), T = o(() => [
       "or-data-grid-table-header-cell-resize-handle-v3",
-      ...ct
-    ]), I = n(() => {
-      var o, c;
+      ...pt
+    ]), H = o(() => {
+      var i, w;
       return {
-        minWidth: ((o = e.column) == null ? void 0 : o.minWidth) || B,
-        maxWidth: (c = e.column) == null ? void 0 : c.maxWidth
+        minWidth: ((i = e.column) == null ? void 0 : i.minWidth) || K,
+        maxWidth: (w = e.column) == null ? void 0 : w.maxWidth
       };
-    }), S = n(() => {
+    }), S = o(() => {
       if (e.column)
         switch (e.column.stickiness) {
           case "start":
             return {
               position: "sticky",
-              insetInlineStart: "0",
+              insetInlineStart: `${e.stickyOffset}px`,
+              zIndex: "120",
               flexDirection: e.column.alignment === "end" ? "row-reverse" : void 0,
               justifyContent: e.column.alignment
             };
           case "end":
             return {
               position: "sticky",
-              insetInlineEnd: "0",
+              insetInlineEnd: `${e.stickyOffset}px`,
+              zIndex: "120",
               flexDirection: e.column.alignment === "end" ? "row-reverse" : void 0,
               justifyContent: e.column.alignment
             };
@@ -699,18 +722,18 @@ const dt = /* @__PURE__ */ R(st, [["render", it]]), ut = [
       return {
         justifyContent: "center"
       };
-    }), O = n({
+    }), O = o({
       get: () => {
-        var o, c;
+        var i, w;
         if (v.value)
-          return ((o = e.modelValue) == null ? void 0 : o.column) === ((c = e.column) == null ? void 0 : c.name) ? e.modelValue : void 0;
+          return ((i = e.modelValue) == null ? void 0 : i.column) === ((w = e.column) == null ? void 0 : w.name) ? e.modelValue : void 0;
       },
-      set: (o) => {
-        t.emit("update:modelValue", o);
+      set: (i) => {
+        t.emit("update:modelValue", i);
       }
     });
-    function T() {
-      var o;
+    function G() {
+      var i;
       if (v.value)
         if (O.value)
           O.value = {
@@ -721,92 +744,92 @@ const dt = /* @__PURE__ */ R(st, [["render", it]]), ut = [
           if (!e.column)
             throw new Error("[OrDataGridTableHeaderCell]: `column` must be specified.");
           O.value = {
-            column: ((o = e.column) == null ? void 0 : o.name) || "_check",
+            column: ((i = e.column) == null ? void 0 : i.name) || "_check",
             direction: "asc"
           };
         }
     }
-    function C(o) {
-      var H;
-      const c = o.pageX, s = ((H = l.value) == null ? void 0 : H.offsetWidth) || 0, F = (U) => {
-        var L, A;
-        const X = U.pageX - c;
-        let W = Math.max(0, s + X);
-        const P = ((L = e.column) == null ? void 0 : L.minWidth) || B;
-        if (P && (P.endsWith("px") || !isNaN(Number(P)))) {
-          const j = parseInt(P, 10);
-          W = Math.max(W, j);
+    function I(i) {
+      var V;
+      const w = i.pageX, s = ((V = n.value) == null ? void 0 : V.offsetWidth) || 0, E = (F) => {
+        var q, B;
+        const X = F.pageX - w;
+        let j = Math.max(0, s + X);
+        const U = ((q = e.column) == null ? void 0 : q.minWidth) || K;
+        if (U && (U.endsWith("px") || !isNaN(Number(U)))) {
+          const L = parseInt(U, 10);
+          j = Math.max(j, L);
         }
-        if ((A = e.column) != null && A.maxWidth && (e.column.maxWidth.endsWith("px") || !isNaN(Number(e.column.maxWidth)))) {
-          const j = parseInt(e.column.maxWidth, 10);
-          W = Math.min(W, j);
+        if ((B = e.column) != null && B.maxWidth && (e.column.maxWidth.endsWith("px") || !isNaN(Number(e.column.maxWidth)))) {
+          const L = parseInt(e.column.maxWidth, 10);
+          j = Math.min(j, L);
         }
-        t.emit("update:column-width", W);
-      }, E = () => {
-        document.removeEventListener("mousemove", F), document.removeEventListener("mouseup", E);
+        t.emit("update:column-width", j);
+      }, P = () => {
+        document.removeEventListener("mousemove", E), document.removeEventListener("mouseup", P);
       };
-      document.addEventListener("mousemove", F), document.addEventListener("mouseup", E);
+      document.addEventListener("mousemove", E), document.addEventListener("mouseup", P);
     }
-    const { width: V } = $e(l, void 0, { box: "border-box" });
-    return ae([
-      l,
-      V,
+    const { width: C } = Ge(n, void 0, { box: "border-box" });
+    return se([
+      n,
+      C,
       () => {
-        var o;
-        return (o = e.column) == null ? void 0 : o.stickiness;
+        var i;
+        return (i = e.column) == null ? void 0 : i.stickiness;
       }
     ], ([
-      o,
-      c
+      i,
+      w
     ], [
       s
     ]) => {
-      s && s !== o && t.emit("remove:scrollOffset", s), t.emit("update:scrollOffset", o, c, e.column);
+      s && s !== i && t.emit("remove:scrollOffset", s), t.emit("update:scrollOffset", i, w, e.column);
     }), {
-      root: l,
+      root: n,
       rootStyles: u,
       rootInlineStyles: S,
-      wrapInlineStyle: I,
-      resizeHandleStyles: G,
+      wrapInlineStyle: H,
+      resizeHandleStyles: T,
       isSortable: v,
       isResizable: g,
       model: O,
-      toggleSorting: T,
-      onResizeStart: C,
-      DATA_GRID_DEFAULT_MIN_WIDTH: B
+      toggleSorting: G,
+      onResizeStart: I,
+      DATA_GRID_DEFAULT_MIN_WIDTH: K
     };
   }
 });
-function ft(e, t, l, v, g, u) {
-  const G = m("OrIcon");
-  return r(), h("div", {
+function kt(e, t, n, v, g, u) {
+  const T = f("OrIcon");
+  return r(), p("div", {
     ref: "root",
-    class: f(e.rootStyles),
-    style: K(e.rootInlineStyles),
-    onClick: t[2] || (t[2] = (I) => e.toggleSorting())
+    class: c(e.rootStyles),
+    style: A(e.rootInlineStyles),
+    onClick: t[2] || (t[2] = (H) => e.toggleSorting())
   }, [
-    ie("div", {
-      class: f(["truncate"]),
-      style: K(e.wrapInlineStyle)
+    fe("div", {
+      class: c(["truncate"]),
+      style: A(e.wrapInlineStyle)
     }, [
       d(e.$slots, "default")
     ], 4),
-    e.model ? (r(), y(G, {
+    e.model ? (r(), y(T, {
       key: 0,
       icon: e.model.direction === "asc" ? "arrow_upward" : "arrow_downward"
-    }, null, 8, ["icon"])) : p("", !0),
-    e.isResizable ? (r(), h("div", {
+    }, null, 8, ["icon"])) : h("", !0),
+    e.isResizable ? (r(), p("div", {
       key: 1,
-      class: f(e.resizeHandleStyles),
-      onMousedown: t[0] || (t[0] = ee((...I) => e.onResizeStart && e.onResizeStart(...I), ["stop", "prevent"])),
-      onClick: t[1] || (t[1] = ee(() => {
+      class: c(e.resizeHandleStyles),
+      onMousedown: t[0] || (t[0] = oe((...H) => e.onResizeStart && e.onResizeStart(...H), ["stop", "prevent"])),
+      onClick: t[1] || (t[1] = oe(() => {
       }, ["stop"]))
-    }, null, 34)) : p("", !0)
+    }, null, 34)) : h("", !0)
   ], 6);
 }
-const gt = /* @__PURE__ */ R(mt, [["render", ft]]), pt = [
+const yt = /* @__PURE__ */ R(vt, [["render", kt]]), bt = [
   // Position
-  "sticky top-0 z-10",
+  "sticky top-0 z-[110]",
   // Layout
   "grid grid-cols-[subgrid] col-span-full",
   // Typography
@@ -816,24 +839,24 @@ const gt = /* @__PURE__ */ R(mt, [["render", ft]]), pt = [
   "dark:children:theme-foreground-default-dark",
   "children:theme-background-surface-variant-1",
   "dark:children:theme-background-surface-variant-1-dark"
-], ht = {
-  [k.Standard]: [
+], Ot = {
+  [b.Standard]: [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ],
-  [k.Comfortable]: [
+  [b.Comfortable]: [
     // Box
     "min-h-[calc(theme(spacing.3xl)+theme(spacing.xs))]"
   ],
-  [k.Compact]: [
+  [b.Compact]: [
     // Box
     "min-h-[calc(theme(spacing.xl)+theme(spacing.xs))]"
   ],
-  [k.Dynamic]: [
+  [b.Dynamic]: [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ]
-}, vt = M({
+}, $t = M({
   name: "OrDataGridTableHeaderRow",
   props: {
     variant: {
@@ -845,37 +868,37 @@ const gt = /* @__PURE__ */ R(mt, [["render", ft]]), pt = [
     "root"
   ],
   setup(e) {
-    const t = D(), l = n(() => [
+    const t = D(), n = o(() => [
       "or-data-grid-table-header-row-v3",
-      ...pt,
-      ...ht[e.variant]
+      ...bt,
+      ...Ot[e.variant]
     ]);
     return {
       root: t,
-      rootStyles: l
+      rootStyles: n
     };
   }
 });
-function bt(e, t, l, v, g, u) {
-  return r(), h("div", {
+function wt(e, t, n, v, g, u) {
+  return r(), p("div", {
     ref: "root",
-    class: f(e.rootStyles)
+    class: c(e.rootStyles)
   }, [
     d(e.$slots, "default")
   ], 2);
 }
-const yt = /* @__PURE__ */ R(vt, [["render", bt]]), kt = [
+const Dt = /* @__PURE__ */ R($t, [["render", wt]]), St = [
   // Layout
   "contents"
-], Ot = M({
+], Tt = M({
   name: "OrDataGridTableHeader",
   expose: [
     "root"
   ],
   setup() {
-    const e = D(), t = n(() => [
+    const e = D(), t = o(() => [
       "or-data-grid-table-header-v3",
-      ...kt
+      ...St
     ]);
     return {
       root: e,
@@ -883,15 +906,15 @@ const yt = /* @__PURE__ */ R(vt, [["render", bt]]), kt = [
     };
   }
 });
-function $t(e, t, l, v, g, u) {
-  return r(), h("div", {
+function Gt(e, t, n, v, g, u) {
+  return r(), p("div", {
     ref: "root",
-    class: f(e.rootStyles)
+    class: c(e.rootStyles)
   }, [
     d(e.$slots, "default")
   ], 2);
 }
-const wt = /* @__PURE__ */ R(Ot, [["render", $t]]), Dt = [
+const Ct = /* @__PURE__ */ R(Tt, [["render", Gt]]), Vt = [
   // Layout
   "layout-row justify-center items-center",
   // Spacing
@@ -905,24 +928,24 @@ const wt = /* @__PURE__ */ R(Ot, [["render", $t]]), Dt = [
   "dark:theme-foreground-default-dark",
   "theme-background-default",
   "dark:theme-background-default-dark"
-], St = {
-  [k.Standard]: [
+], Mt = {
+  [b.Standard]: [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ],
-  [k.Comfortable]: [
+  [b.Comfortable]: [
     // Box
     "min-h-[calc(theme(spacing.3xl)+theme(spacing.xs))]"
   ],
-  [k.Compact]: [
+  [b.Compact]: [
     // Box
     "min-h-[calc(theme(spacing.xl)+theme(spacing.xs))]"
   ],
-  [k.Dynamic]: [
+  [b.Dynamic]: [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ]
-}, Tt = M({
+}, Rt = M({
   name: "OrDataGridTablePlaceholder",
   props: {
     variant: {
@@ -934,26 +957,26 @@ const wt = /* @__PURE__ */ R(Ot, [["render", $t]]), Dt = [
     "root"
   ],
   setup(e) {
-    const t = D(), l = n(() => [
+    const t = D(), n = o(() => [
       "or-data-grid-table-placeholder-v3",
-      ...Dt,
-      ...St[e.variant]
+      ...Vt,
+      ...Mt[e.variant]
     ]);
     return {
       root: t,
-      rootStyles: l
+      rootStyles: n
     };
   }
 });
-function Gt(e, t, l, v, g, u) {
-  return r(), h("div", {
+function It(e, t, n, v, g, u) {
+  return r(), p("div", {
     ref: "root",
-    class: f(e.rootStyles)
+    class: c(e.rootStyles)
   }, [
     d(e.$slots, "default")
   ], 2);
 }
-const Ct = /* @__PURE__ */ R(Tt, [["render", Gt]]), Vt = [
+const zt = /* @__PURE__ */ R(Rt, [["render", It]]), Ht = [
   // Layout
   "grid content-start",
   "w-full min-w-0",
@@ -961,7 +984,7 @@ const Ct = /* @__PURE__ */ R(Tt, [["render", Gt]]), Vt = [
   "overflow-auto",
   // Interactivity
   "interactivity-default"
-], Mt = M({
+], Et = M({
   name: "OrDataGridTable",
   props: {
     columns: {
@@ -977,51 +1000,51 @@ const Ct = /* @__PURE__ */ R(Tt, [["render", Gt]]), Vt = [
     "root"
   ],
   setup(e) {
-    const t = D(), l = n(() => [
+    const t = D(), n = o(() => [
       "or-data-grid-table-v3",
-      ...Vt
-    ]), v = n(() => {
+      ...Ht
+    ]), v = o(() => {
       const g = e.columns.map((u) => {
         if (u.width && (u.width.includes("minmax") || u.width.includes("calc")))
           return u.width;
-        const G = u.width ?? "1fr", I = u.minWidth || (u.width ? B : "120px");
-        let S = u.maxWidth || G;
-        return G.endsWith("px") ? G : `minmax(${I}, ${S})`;
+        const T = u.width ?? "1fr", H = u.minWidth || (u.width ? K : "120px");
+        let S = u.maxWidth || T;
+        return T.endsWith("px") ? T : `minmax(${H}, ${S})`;
       });
       return e.features.selecting ? { gridTemplateColumns: `min-content ${g.join(" ")}` } : { gridTemplateColumns: g.join(" ") };
     });
     return {
       root: t,
-      rootStyles: l,
+      rootStyles: n,
       rootInlineStyles: v
     };
   }
 });
-function Rt(e, t, l, v, g, u) {
-  return r(), h("div", {
+function Ft(e, t, n, v, g, u) {
+  return r(), p("div", {
     ref: "root",
-    class: f(e.rootStyles),
-    style: K(e.rootInlineStyles)
+    class: c(e.rootStyles),
+    style: A(e.rootInlineStyles)
   }, [
     d(e.$slots, "default")
   ], 6);
 }
-const It = /* @__PURE__ */ R(Mt, [["render", Rt]]), zt = [
+const Wt = /* @__PURE__ */ R(Et, [["render", Ft]]), Pt = [
   // Layout
   "layout-row",
   // Box
   "h-2xl",
   // Spacing
   "gap-xl"
-], Ht = M({
+], Nt = M({
   name: "OrDataGridToolbar",
   expose: [
     "root"
   ],
   setup() {
-    const e = D(), t = n(() => [
+    const e = D(), t = o(() => [
       "or-data-grid-toolbar-v3",
-      ...zt
+      ...Pt
     ]);
     return {
       root: e,
@@ -1029,39 +1052,39 @@ const It = /* @__PURE__ */ R(Mt, [["render", Rt]]), zt = [
     };
   }
 });
-function Ft(e, t, l, v, g, u) {
-  return r(), h("div", {
+function jt(e, t, n, v, g, u) {
+  return r(), p("div", {
     ref: "root",
-    class: f(e.rootStyles)
+    class: c(e.rootStyles)
   }, [
     d(e.$slots, "default")
   ], 2);
 }
-const Wt = /* @__PURE__ */ R(Ht, [["render", Ft]]), Pt = [
+const Ut = /* @__PURE__ */ R(Nt, [["render", jt]]), Lt = [
   // Position
   "grid sticky z-10",
   // Layout
   "col-span-full"
-], Et = {
-  [k.Standard]: [
+], At = {
+  [b.Standard]: [
     // Position
     "top-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ],
-  [k.Comfortable]: [
+  [b.Comfortable]: [
     // Position
     "top-[calc(theme(spacing.3xl)+theme(spacing.xs))]"
   ],
-  [k.Compact]: [
+  [b.Compact]: [
     // Position
     "top-[calc(theme(spacing.xl)+theme(spacing.xs))]"
   ],
-  [k.Dynamic]: [
+  [b.Dynamic]: [
     // Position
     "top-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ]
-}, jt = M({
+}, qt = M({
   components: {
-    OrNotification: we
+    OrNotification: Ce
   },
   props: {
     notification: {
@@ -1078,31 +1101,31 @@ const Wt = /* @__PURE__ */ R(Ht, [["render", Ft]]), Pt = [
   ],
   setup(e) {
     return {
-      rootStyles: n(() => [
+      rootStyles: o(() => [
         "or-data-grid-notification-v3",
-        ...Pt,
-        ...Et[e.variant]
+        ...Lt,
+        ...At[e.variant]
       ])
     };
   }
 });
-function Nt(e, t, l, v, g, u) {
-  const G = m("OrNotification");
-  return r(), h("div", {
-    class: f(e.rootStyles)
+function Bt(e, t, n, v, g, u) {
+  const T = f("OrNotification");
+  return r(), p("div", {
+    class: c(e.rootStyles)
   }, [
-    z(G, de(e.notification, {
+    W(T, ge(e.notification, {
       class: "rounded-0 shadow-none",
-      onClose: t[0] || (t[0] = (I) => e.$emit("close-notification"))
+      onClose: t[0] || (t[0] = (H) => e.$emit("close-notification"))
     }), {
-      default: b(() => [
-        e.$slots.notification ? d(e.$slots, "notification", { key: 0 }) : p("", !0)
+      default: k(() => [
+        e.$slots.notification ? d(e.$slots, "notification", { key: 0 }) : h("", !0)
       ]),
       _: 3
     }, 16)
   ], 2);
 }
-const Ut = /* @__PURE__ */ R(jt, [["render", Nt]]), Lt = [
+const Kt = /* @__PURE__ */ R(qt, [["render", Bt]]), Xt = [
   // Layout
   "grid col-span-full grid-cols-[subgrid]",
   // Typography
@@ -1115,24 +1138,24 @@ const Ut = /* @__PURE__ */ R(jt, [["render", Nt]]), Lt = [
   "dark:children:theme-foreground-default-dark",
   "children:theme-background-default",
   "dark:children:theme-background-default-dark"
-], At = {
-  [k.Standard]: [
+], Jt = {
+  [b.Standard]: [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ],
-  [k.Comfortable]: [
+  [b.Comfortable]: [
     // Box
     "min-h-[calc(theme(spacing.3xl)+theme(spacing.xs))]"
   ],
-  [k.Compact]: [
+  [b.Compact]: [
     // Box
     "min-h-[calc(theme(spacing.xl)+theme(spacing.xs))]"
   ],
-  [k.Dynamic]: [
+  [b.Dynamic]: [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ]
-}, qt = M({
+}, Qt = M({
   name: "OrDataGridTableExtraRow",
   props: {
     variant: {
@@ -1144,51 +1167,51 @@ const Ut = /* @__PURE__ */ R(jt, [["render", Nt]]), Lt = [
     "root"
   ],
   setup(e) {
-    const t = D(), l = n(() => [
+    const t = D(), n = o(() => [
       "or-data-grid-table-extra-row-v3",
-      ...Lt,
-      ...At[e.variant]
+      ...Xt,
+      ...Jt[e.variant]
     ]);
     return {
       root: t,
-      rootStyles: l
+      rootStyles: n
     };
   }
 });
-function Bt(e, t, l, v, g, u) {
-  return r(), h("div", {
+function Yt(e, t, n, v, g, u) {
+  return r(), p("div", {
     ref: "root",
-    class: f(e.rootStyles)
+    class: c(e.rootStyles)
   }, [
     d(e.$slots, "default")
   ], 2);
 }
-const Kt = /* @__PURE__ */ R(qt, [["render", Bt]]), Xt = [
+const Zt = /* @__PURE__ */ R(Qt, [["render", Yt]]), _t = [
   // Layout
   "layout-column"
-], Jt = M({
+], xt = M({
   name: "OrDataGrid",
   components: {
-    OrCheckbox: te,
-    OrDataGridFooter: Ve,
-    OrDataGridHeader: Fe,
-    OrDataGridTable: It,
-    OrDataGridTableContent: Ye,
-    OrDataGridTableContentCell: Ne,
-    OrDataGridTableContentRow: Ke,
-    OrDataGridTableFooter: dt,
-    OrDataGridTableFooterCell: et,
-    OrDataGridTableFooterRow: nt,
-    OrDataGridTableExtraRow: Kt,
-    OrDataGridTableHeader: wt,
-    OrDataGridTableHeaderCell: gt,
-    OrDataGridTableHeaderRow: yt,
-    OrDataGridTablePlaceholder: Ct,
-    OrDataGridToolbar: Wt,
-    OrDataGridNotification: Ut,
-    OrPagination: ne,
-    OrSearch: le,
-    OrSkeletonText: se
+    OrCheckbox: ne,
+    OrDataGridFooter: He,
+    OrDataGridHeader: je,
+    OrDataGridTable: Wt,
+    OrDataGridTableContent: tt,
+    OrDataGridTableContentCell: Be,
+    OrDataGridTableContentRow: Ze,
+    OrDataGridTableFooter: gt,
+    OrDataGridTableFooterCell: nt,
+    OrDataGridTableFooterRow: ct,
+    OrDataGridTableExtraRow: Zt,
+    OrDataGridTableHeader: Ct,
+    OrDataGridTableHeaderCell: yt,
+    OrDataGridTableHeaderRow: Dt,
+    OrDataGridTablePlaceholder: zt,
+    OrDataGridToolbar: Ut,
+    OrDataGridNotification: Kt,
+    OrPagination: ce,
+    OrSearch: ue,
+    OrSkeletonText: me
   },
   model: {
     prop: "modelValue",
@@ -1209,7 +1232,7 @@ const Kt = /* @__PURE__ */ R(qt, [["render", Bt]]), Xt = [
     },
     variant: {
       type: String,
-      default: () => k.Standard
+      default: () => b.Standard
     },
     features: {
       type: Object,
@@ -1242,23 +1265,23 @@ const Kt = /* @__PURE__ */ R(qt, [["render", Bt]]), Xt = [
     "root"
   ],
   setup(e, t) {
-    const l = D(), v = D(), g = D(), u = n(() => [
+    const n = D(), v = D(), g = D(), u = o(() => [
       "or-data-grid-v3",
-      ...Xt
-    ]), G = n(() => ({
-      scrollPaddingInlineStart: `${[...o.value.values()].reduce((a, w) => a + w, 0)}px`,
-      scrollPaddingInlineEnd: `${[...c.value.values()].reduce((a, w) => a + w, 0)}px`
-    })), I = n({
+      ..._t
+    ]), T = o(() => ({
+      scrollPaddingInlineStart: `${[...V.value.values()].reduce((a, $) => a + $, 0)}px`,
+      scrollPaddingInlineEnd: `${[...F.value.values()].reduce((a, $) => a + $, 0)}px`
+    })), H = o({
       get: () => !!e.items.length && e.items.every((a) => S.value.includes(a.id)),
       set: (a) => {
         a ? S.value = [
           .../* @__PURE__ */ new Set([
             ...S.value,
-            ...e.items.map((w) => w.id)
+            ...e.items.map(($) => $.id)
           ])
         ] : S.value = [];
       }
-    }), S = n({
+    }), S = o({
       get: () => {
         var a;
         return ((a = e.modelValue) == null ? void 0 : a.selecting) ?? [];
@@ -1267,12 +1290,12 @@ const Kt = /* @__PURE__ */ R(qt, [["render", Bt]]), Xt = [
         t.emit("update:modelValue", {
           selecting: a,
           filtering: O.value,
-          searching: T.value,
-          sorting: C.value,
-          paging: V.value
+          searching: G.value,
+          sorting: I.value,
+          paging: C.value
         });
       }
-    }), O = n({
+    }), O = o({
       get: () => {
         var a;
         return (a = e.modelValue) == null ? void 0 : a.filtering;
@@ -1281,15 +1304,15 @@ const Kt = /* @__PURE__ */ R(qt, [["render", Bt]]), Xt = [
         t.emit("update:modelValue", {
           selecting: S.value,
           filtering: a,
-          searching: T.value,
-          sorting: C.value,
+          searching: G.value,
+          sorting: I.value,
           paging: {
-            ...V.value,
+            ...C.value,
             offset: 0
           }
         });
       }
-    }), T = n({
+    }), G = o({
       get: () => {
         var a;
         return (a = e.modelValue) == null ? void 0 : a.searching;
@@ -1299,14 +1322,14 @@ const Kt = /* @__PURE__ */ R(qt, [["render", Bt]]), Xt = [
           selecting: S.value,
           filtering: O.value,
           searching: a,
-          sorting: C.value,
+          sorting: I.value,
           paging: {
-            ...V.value,
+            ...C.value,
             offset: 0
           }
         });
       }
-    }), C = n({
+    }), I = o({
       get: () => {
         var a;
         return (a = e.modelValue) == null ? void 0 : a.sorting;
@@ -1315,15 +1338,15 @@ const Kt = /* @__PURE__ */ R(qt, [["render", Bt]]), Xt = [
         t.emit("update:modelValue", {
           selecting: S.value,
           filtering: O.value,
-          searching: T.value,
+          searching: G.value,
           sorting: a,
           paging: {
-            ...V.value,
+            ...C.value,
             offset: 0
           }
         });
       }
-    }), V = n({
+    }), C = o({
       get: () => {
         var a;
         return (a = e.modelValue) == null ? void 0 : a.paging;
@@ -1332,15 +1355,15 @@ const Kt = /* @__PURE__ */ R(qt, [["render", Bt]]), Xt = [
         t.emit("update:modelValue", {
           selecting: S.value,
           filtering: O.value,
-          searching: T.value,
-          sorting: C.value,
+          searching: G.value,
+          sorting: I.value,
           paging: a
         });
       }
     });
-    ae(() => {
+    se(() => {
       var a;
-      return (a = V.value) == null ? void 0 : a.offset;
+      return (a = C.value) == null ? void 0 : a.offset;
     }, () => {
       var a;
       (a = g.value) != null && a.root && g.value.root.scrollTo({
@@ -1348,110 +1371,130 @@ const Kt = /* @__PURE__ */ R(qt, [["render", Bt]]), Xt = [
         behavior: "smooth"
       });
     });
-    const o = D(/* @__PURE__ */ new Map()), c = D(/* @__PURE__ */ new Map()), s = n(() => e.features.selecting && (typeof e.features.selecting == "object" ? e.features.selecting.showCounter !== !1 : !0)), F = n(() => e.items.length === 0 || e.loading || typeof e.features.selecting == "object" && e.features.selecting.disabled), E = n(() => {
+    const i = o(() => e.features.selecting && (typeof e.features.selecting == "object" ? e.features.selecting.showCounter !== !1 : !0)), w = o(() => e.items.length === 0 || e.loading || typeof e.features.selecting == "object" && e.features.selecting.disabled), s = o(() => {
       var a;
       return ((a = v.value) == null ? void 0 : a.currentLimit) || 10;
-    }), H = D({}), U = n(() => e.columns.map((a) => ({
+    }), E = D({}), P = o(() => e.columns.map((a) => ({
       ...a,
-      width: H.value[a.name] || a.width
-    })));
-    function X(a) {
-      T.value = a;
+      width: E.value[a.name] || a.width
+    }))), V = D(/* @__PURE__ */ new Map()), F = D(/* @__PURE__ */ new Map()), X = o(() => {
+      const a = /* @__PURE__ */ new Map(), $ = /* @__PURE__ */ new Map(), z = [], te = [];
+      e.features.selecting && z.push({
+        name: "_check",
+        stickiness: "start"
+      }), P.value.forEach((N) => {
+        N.stickiness === "start" ? z.push(N) : N.stickiness === "end" && te.push(N);
+      });
+      let ae = 0;
+      z.forEach((N) => {
+        a.set(N.name, ae), ae += V.value.get(N.name) || 0;
+      });
+      let re = 0;
+      return [...te].reverse().forEach((N) => {
+        $.set(N.name, re), re += F.value.get(N.name) || 0;
+      }), {
+        start: a,
+        end: $
+      };
+    });
+    function j(a) {
+      G.value = a;
     }
-    function W(a, w, N) {
-      switch (N.stickiness) {
+    function U(a, $, z) {
+      switch (z.stickiness) {
         case "start":
-          o.value.set(a, w), o.value = new Map(o.value), c.value.delete(a), c.value = new Map(c.value);
+          V.value.set(z.name, $), V.value = new Map(V.value), F.value.delete(z.name), F.value = new Map(F.value);
           break;
         case "end":
-          o.value.delete(a), o.value = new Map(o.value), c.value.set(a, w), c.value = new Map(c.value);
+          V.value.delete(z.name), V.value = new Map(V.value), F.value.set(z.name, $), F.value = new Map(F.value);
           break;
         default:
-          x(a);
+          ee(z.name);
           break;
       }
     }
-    function P(a) {
+    function q(a) {
       e.interactiveRows && t.emit("hover:row", a);
     }
-    function L(a) {
+    function B(a) {
       e.interactiveRows && t.emit("blur:row", a);
     }
-    function A(a, w, N) {
+    function L(a, $, z) {
       e.interactiveRows && t.emit("hover:cell", {
         item: a,
-        columnName: w,
-        value: N
+        columnName: $,
+        value: z
       });
     }
-    function j(a, w, N) {
+    function l(a, $, z) {
       e.interactiveRows && t.emit("blur:cell", {
         item: a,
-        columnName: w,
-        value: N
+        columnName: $,
+        value: z
       });
     }
-    function i(a) {
+    function m(a) {
       e.interactiveRows && t.emit("click:row", a);
     }
-    function $(a, w) {
-      H.value = {
-        ...H.value,
-        [a.name]: `${w}px`
-      }, e.features.storageKey && J();
+    function J(a, $) {
+      E.value = {
+        ...E.value,
+        [a.name]: `${$}px`
+      }, e.features.storageKey && le();
     }
-    function J() {
+    function le() {
       if (typeof window > "u" || !e.features.storageKey) return;
       const a = {};
-      U.value.forEach((w) => {
-        w.name && w.width && (a[w.name] = w.width);
+      P.value.forEach(($) => {
+        $.name && $.width && (a[$.name] = $.width);
       }), localStorage.setItem(`or-data-grid-v3-widths-${e.features.storageKey}`, JSON.stringify(a));
     }
-    function re() {
+    function ie() {
       if (!(typeof window > "u" || !e.features.storageKey))
         try {
           const a = localStorage.getItem(`or-data-grid-v3-widths-${e.features.storageKey}`);
           if (a) {
-            const w = JSON.parse(a);
-            H.value = w;
+            const $ = JSON.parse(a);
+            E.value = $;
           }
         } catch (a) {
           console.error("[OrDataGrid]: Failed to load column widths from localStorage", a);
         }
     }
-    ue(() => {
-      re();
+    he(() => {
+      ie();
     });
-    function x(a) {
-      o.value.delete(a), o.value = new Map(o.value), c.value.delete(a), c.value = new Map(c.value);
+    function ee(a) {
+      V.value.delete(a), V.value = new Map(V.value), F.value.delete(a), F.value = new Map(F.value);
     }
-    function oe(a) {
+    function de(a) {
       a.currentTarget.scrollIntoView({ block: "nearest" });
     }
     return {
-      root: l,
+      root: n,
       rootStyles: u,
       pagination: v,
-      tableInlineStyles: G,
-      selectingIndicator: I,
-      showSelectingCouter: s,
-      selectingDisabled: F,
-      skeletonsLength: E,
-      actualColumns: U,
-      handleMouseEnterRow: P,
-      handleMouseLeaveRow: L,
-      handleMouseEnterCell: A,
-      handleMouseLeaveCell: j,
-      handleRowClick: i,
-      updateColumnWidth: $,
+      tableInlineStyles: T,
+      selectingIndicator: H,
+      showSelectingCouter: i,
+      selectingDisabled: w,
+      skeletonsLength: s,
+      actualColumns: P,
+      handleMouseEnterRow: q,
+      handleMouseLeaveRow: B,
+      handleMouseEnterCell: L,
+      handleMouseLeaveCell: l,
+      handleRowClick: m,
+      updateColumnWidth: J,
       selectingModel: S,
       filteringModel: O,
-      searchingModel: T,
-      sortingModel: C,
-      pagingModel: V,
-      updateScrollOffset: W,
-      removeScrollOffset: x,
-      updateSearchingModel: X,
+      searchingModel: G,
+      sortingModel: I,
+      pagingModel: C,
+      stickyOffsets: X,
+      updateScrollOffset: U,
+      removeScrollOffset: ee,
+      updateSearchingModel: j,
       scrollToTop: () => {
         var a;
         (a = g.value) != null && a.root && g.value.root.scrollTo({
@@ -1459,37 +1502,37 @@ const Kt = /* @__PURE__ */ R(qt, [["render", Bt]]), Xt = [
           behavior: "smooth"
         });
       },
-      scrollTo: oe,
-      onInput: (a, w, N) => {
-        a[w] = N, t.emit("update:item", a);
+      scrollTo: de,
+      onInput: (a, $, z) => {
+        a[$] = z, t.emit("update:item", a);
       }
     };
   }
 });
-function Qt(e, t, l, v, g, u) {
-  const G = m("OrSearch"), I = m("OrDataGridHeader"), S = m("OrDataGridToolbar"), O = m("OrCheckbox"), T = m("OrDataGridTableHeaderCell"), C = m("OrDataGridTableHeaderRow"), V = m("OrDataGridTableHeader"), o = m("OrDataGridNotification"), c = m("OrDataGridTableExtraRow"), s = m("OrSkeletonText"), F = m("OrDataGridTableContentCell"), E = m("OrDataGridTableContentRow"), H = m("OrDataGridTablePlaceholder"), U = m("OrDataGridTableContent"), X = m("OrDataGridTable"), W = m("OrDataGridTableFooterCell"), P = m("OrDataGridTableFooterRow"), L = m("OrDataGridTableFooter"), A = m("OrPagination"), j = m("OrDataGridFooter");
-  return r(), h("div", {
+function ea(e, t, n, v, g, u) {
+  const T = f("OrSearch"), H = f("OrDataGridHeader"), S = f("OrDataGridToolbar"), O = f("OrCheckbox"), G = f("OrDataGridTableHeaderCell"), I = f("OrDataGridTableHeaderRow"), C = f("OrDataGridTableHeader"), i = f("OrDataGridNotification"), w = f("OrDataGridTableExtraRow"), s = f("OrSkeletonText"), E = f("OrDataGridTableContentCell"), P = f("OrDataGridTableContentRow"), V = f("OrDataGridTablePlaceholder"), F = f("OrDataGridTableContent"), X = f("OrDataGridTable"), j = f("OrDataGridTableFooterCell"), U = f("OrDataGridTableFooterRow"), q = f("OrDataGridTableFooter"), B = f("OrPagination"), L = f("OrDataGridFooter");
+  return r(), p("div", {
     ref: "root",
-    class: f(e.rootStyles)
+    class: c(e.rootStyles)
   }, [
-    e.$slots.title || e.features.searching || e.$slots.search || e.$slots.extraActions ? (r(), y(I, {
+    e.$slots.title || e.features.searching || e.$slots.search || e.$slots.extraActions ? (r(), y(H, {
       key: 0,
-      class: f(["shrink-0"])
-    }, Y({ _: 2 }, [
+      class: c(["shrink-0"])
+    }, Z({ _: 2 }, [
       e.$slots.title ? {
         name: "title",
-        fn: b(() => [
+        fn: k(() => [
           d(e.$slots, "title")
         ]),
         key: "0"
       } : void 0,
       e.features.searching ? {
         name: "searching",
-        fn: b(() => [
-          d(e.$slots, "search", ce(me({ updateSearchingModel: e.updateSearchingModel, searchingModel: e.searchingModel })), () => [
-            z(G, {
+        fn: k(() => [
+          d(e.$slots, "search", pe(ve({ updateSearchingModel: e.updateSearchingModel, searchingModel: e.searchingModel })), () => [
+            W(T, {
               modelValue: e.searchingModel,
-              "onUpdate:modelValue": t[0] || (t[0] = (i) => e.searchingModel = i)
+              "onUpdate:modelValue": t[0] || (t[0] = (l) => e.searchingModel = l)
             }, null, 8, ["modelValue"])
           ])
         ]),
@@ -1497,229 +1540,235 @@ function Qt(e, t, l, v, g, u) {
       } : void 0,
       e.$slots.extraActions ? {
         name: "extraActions",
-        fn: b(() => [
+        fn: k(() => [
           d(e.$slots, "extraActions")
         ]),
         key: "2"
       } : void 0
-    ]), 1024)) : p("", !0),
+    ]), 1024)) : h("", !0),
     e.$slots.toolbar ? (r(), y(S, {
       key: 1,
-      class: f(["shrink-0"])
+      class: c(["shrink-0"])
     }, {
-      default: b(() => [
+      default: k(() => [
         d(e.$slots, "toolbar")
       ]),
       _: 3
-    })) : p("", !0),
-    z(X, {
+    })) : h("", !0),
+    W(X, {
       ref: "table",
-      class: f(["grow", { "grid-rows-[auto_1fr]": e.items.length === 0 }]),
-      style: K(e.tableInlineStyles),
+      class: c(["grow", { "grid-rows-[auto_1fr]": e.items.length === 0 }]),
+      style: A(e.tableInlineStyles),
       columns: e.actualColumns,
       features: e.features
     }, {
-      default: b(() => [
-        z(V, null, {
-          default: b(() => [
-            z(C, { variant: e.variant }, {
-              default: b(() => [
-                e.features.selecting ? (r(), y(T, {
+      default: k(() => [
+        W(C, null, {
+          default: k(() => [
+            W(I, { variant: e.variant }, {
+              default: k(() => [
+                e.features.selecting ? (r(), y(G, {
                   key: 0,
-                  column: { stickiness: "start" },
+                  column: { name: "_check", stickiness: "start" },
+                  "sticky-offset": e.stickyOffsets.start.get("_check"),
                   class: "md:!py-none",
                   "onUpdate:scrollOffset": e.updateScrollOffset,
                   "onRemove:scrollOffset": e.removeScrollOffset
                 }, {
-                  default: b(() => [
-                    z(O, {
+                  default: k(() => [
+                    W(O, {
                       modelValue: e.selectingIndicator,
-                      "onUpdate:modelValue": t[1] || (t[1] = (i) => e.selectingIndicator = i),
+                      "onUpdate:modelValue": t[1] || (t[1] = (l) => e.selectingIndicator = l),
                       indeterminate: !e.selectingIndicator && e.selectingModel.length > 0,
                       disabled: e.selectingDisabled
                     }, null, 8, ["modelValue", "indeterminate", "disabled"])
                   ]),
                   _: 1
-                }, 8, ["onUpdate:scrollOffset", "onRemove:scrollOffset"])) : p("", !0),
-                (r(!0), h(q, null, Q(e.actualColumns, (i) => (r(), y(T, {
-                  key: i.name,
+                }, 8, ["sticky-offset", "onUpdate:scrollOffset", "onRemove:scrollOffset"])) : h("", !0),
+                (r(!0), p(Q, null, Y(e.actualColumns, (l) => (r(), y(G, {
+                  key: l.name,
                   modelValue: e.sortingModel,
-                  "onUpdate:modelValue": t[2] || (t[2] = ($) => e.sortingModel = $),
-                  column: i,
+                  "onUpdate:modelValue": t[2] || (t[2] = (m) => e.sortingModel = m),
+                  column: l,
                   features: e.features,
+                  "sticky-offset": l.stickiness === "start" ? e.stickyOffsets.start.get(l.name) : l.stickiness === "end" ? e.stickyOffsets.end.get(l.name) : void 0,
                   "onUpdate:scrollOffset": e.updateScrollOffset,
                   "onRemove:scrollOffset": e.removeScrollOffset,
-                  "onUpdate:columnWidth": ($) => e.updateColumnWidth(i, $)
+                  "onUpdate:columnWidth": (m) => e.updateColumnWidth(l, m)
                 }, {
-                  default: b(() => [
-                    Z(_(i.label), 1)
+                  default: k(() => [
+                    _(x(l.label), 1)
                   ]),
                   _: 2
-                }, 1032, ["modelValue", "column", "features", "onUpdate:scrollOffset", "onRemove:scrollOffset", "onUpdate:columnWidth"]))), 128))
+                }, 1032, ["modelValue", "column", "features", "sticky-offset", "onUpdate:scrollOffset", "onRemove:scrollOffset", "onUpdate:columnWidth"]))), 128))
               ]),
               _: 1
             }, 8, ["variant"])
           ]),
           _: 1
         }),
-        e.notification ? (r(), y(o, {
+        e.notification ? (r(), y(i, {
           key: 0,
           notification: e.notification,
           variant: e.variant,
-          onCloseNotification: t[3] || (t[3] = (i) => e.$emit("close-notification"))
-        }, Y({ _: 2 }, [
+          onCloseNotification: t[3] || (t[3] = (l) => e.$emit("close-notification"))
+        }, Z({ _: 2 }, [
           e.$slots.notification ? {
             name: "notification",
-            fn: b(() => [
+            fn: k(() => [
               d(e.$slots, "notification")
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["notification", "variant"])) : p("", !0),
-        z(U, null, {
-          default: b(() => [
-            e.$slots["before-rows"] ? (r(), y(c, {
+        ]), 1032, ["notification", "variant"])) : h("", !0),
+        W(F, null, {
+          default: k(() => [
+            e.$slots["before-rows"] ? (r(), y(w, {
               key: 0,
               variant: e.variant,
               class: "border-b-1"
             }, {
-              default: b(() => [
+              default: k(() => [
                 d(e.$slots, "before-rows")
               ]),
               _: 3
-            }, 8, ["variant"])) : p("", !0),
-            e.loading ? (r(!0), h(q, { key: 1 }, Q(e.skeletonsLength, (i) => (r(), y(E, {
-              key: i,
+            }, 8, ["variant"])) : h("", !0),
+            e.loading ? (r(!0), p(Q, { key: 1 }, Y(e.skeletonsLength, (l) => (r(), y(P, {
+              key: l,
               variant: e.variant,
               interactive: e.interactiveRows
             }, {
-              default: b(() => [
-                e.features.selecting ? (r(), y(F, {
+              default: k(() => [
+                e.features.selecting ? (r(), y(E, {
                   key: 0,
-                  column: { stickiness: "start" },
+                  column: { name: "_check", stickiness: "start" },
+                  "sticky-offset": e.stickyOffsets.start.get("_check"),
                   variant: e.variant,
                   override: !0
                 }, {
-                  default: b(() => [
-                    z(s)
+                  default: k(() => [
+                    W(s)
                   ]),
                   _: 1
-                }, 8, ["variant"])) : p("", !0),
-                (r(!0), h(q, null, Q(e.actualColumns, ($) => (r(), y(F, {
-                  key: $.name,
-                  column: $,
+                }, 8, ["sticky-offset", "variant"])) : h("", !0),
+                (r(!0), p(Q, null, Y(e.actualColumns, (m) => (r(), y(E, {
+                  key: m.name,
+                  column: m,
                   features: e.features,
+                  "sticky-offset": m.stickiness === "start" ? e.stickyOffsets.start.get(m.name) : m.stickiness === "end" ? e.stickyOffsets.end.get(m.name) : void 0,
                   variant: e.variant,
                   override: !0
                 }, {
-                  default: b(() => [
-                    d(e.$slots, "column-loading", { column: $ }, () => [
-                      z(s)
+                  default: k(() => [
+                    d(e.$slots, "column-loading", { column: m }, () => [
+                      W(s)
                     ])
                   ]),
                   _: 2
-                }, 1032, ["column", "features", "variant"]))), 128))
+                }, 1032, ["column", "features", "sticky-offset", "variant"]))), 128))
               ]),
               _: 2
-            }, 1032, ["variant", "interactive"]))), 128)) : e.items.length > 0 ? (r(!0), h(q, { key: 2 }, Q(e.items, (i) => (r(), y(E, {
-              key: i.id,
+            }, 1032, ["variant", "interactive"]))), 128)) : e.items.length > 0 ? (r(!0), p(Q, { key: 2 }, Y(e.items, (l) => (r(), y(P, {
+              key: l.id,
               variant: e.variant,
-              selected: e.selectingModel.includes(i.id),
+              selected: e.selectingModel.includes(l.id),
               interactive: e.interactiveRows,
-              onMouseenter: () => e.handleMouseEnterRow(i),
-              onMouseleave: () => e.handleMouseLeaveRow(i),
-              onClick: () => e.handleRowClick(i)
+              onMouseenter: () => e.handleMouseEnterRow(l),
+              onMouseleave: () => e.handleMouseLeaveRow(l),
+              onClick: () => e.handleRowClick(l)
             }, {
-              default: b(() => [
-                e.features.selecting ? (r(), y(F, {
+              default: k(() => [
+                e.features.selecting ? (r(), y(E, {
                   key: 0,
-                  column: { stickiness: "start" },
+                  column: { name: "_check", stickiness: "start" },
+                  "sticky-offset": e.stickyOffsets.start.get("_check"),
                   variant: e.variant,
                   override: !0,
                   "force-state": "none",
                   class: "md:!py-none",
-                  onMouseenter: () => e.handleMouseEnterCell(i, "selecting", e.selectingModel.includes(i.id)),
-                  onMouseleave: () => e.handleMouseLeaveCell(i, "selecting", e.selectingModel.includes(i.id))
+                  onMouseenter: () => e.handleMouseEnterCell(l, "selecting", e.selectingModel.includes(l.id)),
+                  onMouseleave: () => e.handleMouseLeaveCell(l, "selecting", e.selectingModel.includes(l.id))
                 }, {
-                  default: b(() => [
-                    z(O, {
+                  default: k(() => [
+                    W(O, {
                       modelValue: e.selectingModel,
-                      "onUpdate:modelValue": t[4] || (t[4] = ($) => e.selectingModel = $),
-                      value: i.id,
+                      "onUpdate:modelValue": t[4] || (t[4] = (m) => e.selectingModel = m),
+                      value: l.id,
                       disabled: e.selectingDisabled
                     }, null, 8, ["modelValue", "value", "disabled"])
                   ]),
                   _: 2
-                }, 1032, ["variant", "onMouseenter", "onMouseleave"])) : p("", !0),
-                (r(!0), h(q, null, Q(e.actualColumns, ($) => (r(), y(F, {
-                  key: $.name,
-                  "model-value": i[$.name],
-                  column: $,
+                }, 1032, ["sticky-offset", "variant", "onMouseenter", "onMouseleave"])) : h("", !0),
+                (r(!0), p(Q, null, Y(e.actualColumns, (m) => (r(), y(E, {
+                  key: m.name,
+                  "model-value": l[m.name],
+                  column: m,
                   features: e.features,
+                  "sticky-offset": m.stickiness === "start" ? e.stickyOffsets.start.get(m.name) : m.stickiness === "end" ? e.stickyOffsets.end.get(m.name) : void 0,
                   variant: e.variant,
-                  onInput: (J) => e.onInput(i, $.name, J),
+                  onInput: (J) => e.onInput(l, m.name, J),
                   onFocusin: t[5] || (t[5] = (J) => e.scrollTo(J)),
-                  onMouseenter: () => e.handleMouseEnterCell(i, $.name, i[$.name]),
-                  onMouseleave: () => e.handleMouseLeaveCell(i, $.name, i[$.name])
+                  onMouseenter: () => e.handleMouseEnterCell(l, m.name, l[m.name]),
+                  onMouseleave: () => e.handleMouseLeaveCell(l, m.name, l[m.name])
                 }, {
-                  default: b(() => [
-                    d(e.$slots, $.name, {
-                      column: $,
-                      item: i
+                  default: k(() => [
+                    d(e.$slots, m.name, {
+                      column: m,
+                      item: l
                     }, () => [
-                      Z(_(i[$.name]), 1)
+                      _(x(l[m.name]), 1)
                     ])
                   ]),
                   _: 2
-                }, 1032, ["model-value", "column", "features", "variant", "onInput", "onMouseenter", "onMouseleave"]))), 128))
+                }, 1032, ["model-value", "column", "features", "sticky-offset", "variant", "onInput", "onMouseenter", "onMouseleave"]))), 128))
               ]),
               _: 2
-            }, 1032, ["variant", "selected", "interactive", "onMouseenter", "onMouseleave", "onClick"]))), 128)) : e.$slots.noSearchResults && (e.features.filtering && e.filteringModel || e.features.searching && e.searchingModel) ? (r(), y(H, {
+            }, 1032, ["variant", "selected", "interactive", "onMouseenter", "onMouseleave", "onClick"]))), 128)) : e.$slots.noSearchResults && (e.features.filtering && e.filteringModel || e.features.searching && e.searchingModel) ? (r(), y(V, {
               key: 3,
-              class: f(["col-span-full"]),
+              class: c(["col-span-full"]),
               variant: e.variant
             }, {
-              default: b(() => [
+              default: k(() => [
                 d(e.$slots, "noSearchResults", {
                   filter: e.filteringModel,
                   search: e.searchingModel
                 })
               ]),
               _: 3
-            }, 8, ["variant"])) : e.$slots.empty ? (r(), y(H, {
+            }, 8, ["variant"])) : e.$slots.empty ? (r(), y(V, {
               key: 4,
-              class: f(["col-span-full"]),
+              class: c(["col-span-full"]),
               variant: e.variant
             }, {
-              default: b(() => [
+              default: k(() => [
                 d(e.$slots, "empty")
               ]),
               _: 3
-            }, 8, ["variant"])) : p("", !0),
-            e.$slots["after-rows"] ? (r(), y(c, {
+            }, 8, ["variant"])) : h("", !0),
+            e.$slots["after-rows"] ? (r(), y(w, {
               key: 5,
               variant: e.variant
             }, {
-              default: b(() => [
+              default: k(() => [
                 d(e.$slots, "after-rows")
               ]),
               _: 3
-            }, 8, ["variant"])) : p("", !0)
+            }, 8, ["variant"])) : h("", !0)
           ]),
           _: 3
         })
       ]),
       _: 3
     }, 8, ["class", "style", "columns", "features"]),
-    e.$slots["extra-row"] ? (r(), y(L, { key: 2 }, {
-      default: b(() => [
-        z(P, {
-          class: f(["shrink-0"]),
+    e.$slots["extra-row"] ? (r(), y(q, { key: 2 }, {
+      default: k(() => [
+        W(U, {
+          class: c(["shrink-0"]),
           variant: e.variant
         }, {
-          default: b(() => [
-            z(W, null, {
-              default: b(() => [
+          default: k(() => [
+            W(j, null, {
+              default: k(() => [
                 d(e.$slots, "extra-row")
               ]),
               _: 3
@@ -1729,61 +1778,61 @@ function Qt(e, t, l, v, g, u) {
         }, 8, ["variant"])
       ]),
       _: 3
-    })) : p("", !0),
-    e.$slots.actions || e.showSelectingCouter || e.features.paging ? (r(), y(j, {
+    })) : h("", !0),
+    e.$slots.actions || e.showSelectingCouter || e.features.paging ? (r(), y(L, {
       key: 3,
-      class: f(["shrink-0"])
-    }, Y({ _: 2 }, [
+      class: c(["shrink-0"])
+    }, Z({ _: 2 }, [
       e.features.selecting && e.selectingModel.length > 0 ? {
         name: "status",
-        fn: b(() => [
-          Z(_(e.selectingModel.length) + " row(s) selected ", 1)
+        fn: k(() => [
+          _(x(e.selectingModel.length) + " row(s) selected ", 1)
         ]),
         key: "0"
       } : void 0,
       e.$slots.actions ? {
         name: "actions",
-        fn: b(() => [
+        fn: k(() => [
           d(e.$slots, "actions")
         ]),
         key: "1"
       } : void 0,
       e.features.paging ? {
         name: "paging",
-        fn: b(() => [
-          z(A, {
+        fn: k(() => [
+          W(B, {
             ref: "pagination",
             modelValue: e.pagingModel,
-            "onUpdate:modelValue": t[6] || (t[6] = (i) => e.pagingModel = i),
+            "onUpdate:modelValue": t[6] || (t[6] = (l) => e.pagingModel = l),
             length: e.features.paging.length,
             options: e.features.paging.options
           }, null, 8, ["modelValue", "length", "options"])
         ]),
         key: "2"
       } : void 0
-    ]), 1024)) : p("", !0)
+    ]), 1024)) : h("", !0)
   ], 2);
 }
-const pa = /* @__PURE__ */ R(Jt, [["render", Qt]]);
+const ba = /* @__PURE__ */ R(xt, [["render", ea]]);
 export {
-  k as D,
-  pa as O,
-  B as a,
-  Ve as b,
-  Fe as c,
-  Ne as d,
-  Ke as e,
-  Ye as f,
-  et as g,
-  nt as h,
-  dt as i,
-  gt as j,
-  yt as k,
-  wt as l,
-  Ct as m,
-  It as n,
-  Wt as o,
-  Ut as p,
-  Kt as q
+  b as D,
+  ba as O,
+  K as a,
+  He as b,
+  je as c,
+  Be as d,
+  Ze as e,
+  tt as f,
+  nt as g,
+  ct as h,
+  gt as i,
+  yt as j,
+  Dt as k,
+  Ct as l,
+  zt as m,
+  Wt as n,
+  Ut as o,
+  Kt as p,
+  Zt as q
 };
-//# sourceMappingURL=OrDataGrid-D8ZLdtGb.mjs.map
+//# sourceMappingURL=OrDataGrid-DnLT39dk.mjs.map