@vss-software/ui 0.1.0

package/dist/lumen-ui.js

@@ -0,0 +1,3965 @@
+import { computed as b, openBlock as n, createElementBlock as a, normalizeClass as w, toDisplayString as y, createCommentVNode as c, createElementVNode as l, renderSlot as B, useAttrs as Ae, useModel as G, ref as E, useId as q, mergeProps as be, createTextVNode as M, withDirectives as ee, vModelDynamic as _e, mergeModels as te, vModelText as ge, Fragment as z, renderList as j, withKeys as Q, withModifiers as U, normalizeStyle as H, watch as ie, createBlock as P, resolveDynamicComponent as Be, reactive as Ee, Teleport as ye, createVNode as A, TransitionGroup as Ie, withCtx as T, unref as R, onMounted as ve, onBeforeUnmount as me, nextTick as pe, createStaticVNode as ze, provide as Te, inject as he, onUnmounted as Me, resolveComponent as xe, Transition as Z, vShow as je, createSlots as Oe } from "vue";
+import { format as se, startOfMonth as J, endOfMonth as De, startOfWeek as Ve, endOfWeek as Pe, eachDayOfInterval as Re, parseISO as Ne, subMonths as Fe, addMonths as qe, isSameDay as Ke, isSameMonth as Ue, isToday as He, isWithinInterval as Ze } from "date-fns";
+import { de as We } from "date-fns/locale";
+import { AlertCircle as Ge, X as Xe, TrendingUp as Je, TrendingDown as Ye } from "lucide-vue-next";
+import { useRoute as Qe } from "vue-router";
+import { Line as et, Bar as tt, Doughnut as nt } from "vue-chartjs";
+import { Chart as ue, CategoryScale as we, LinearScale as ke, PointElement as at, LineElement as rt, Tooltip as de, Legend as ce, Filler as st, BarElement as lt, ArcElement as ot, Title as it } from "chart.js";
+const ut = ["type", "disabled", "aria-busy", "aria-disabled"], dt = {
+  key: 0,
+  class: "sr-only",
+  "aria-live": "polite"
+}, K = /* @__PURE__ */ Object.assign({ name: "LuButton" }, {
+  __name: "LuButton",
+  props: {
+    /**
+     * Visual style variant.
+     * @type {'primary' | 'secondary' | 'danger' | 'ghost' | 'icon'}
+     */
+    variant: {
+      type: String,
+      default: "primary",
+      validator: (e) => ["primary", "secondary", "danger", "ghost", "icon"].includes(e)
+    },
+    /**
+     * Button size. sm=32px, md=40px, lg=48px height.
+     * @type {'sm' | 'md' | 'lg'}
+     */
+    size: {
+      type: String,
+      default: "md",
+      validator: (e) => ["sm", "md", "lg"].includes(e)
+    },
+    /**
+     * Whether the button is disabled.
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Whether to show a loading spinner and disable interaction.
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * HTML button type attribute.
+     * @type {'button' | 'submit' | 'reset'}
+     */
+    type: {
+      type: String,
+      default: "button",
+      validator: (e) => ["button", "submit", "reset"].includes(e)
+    },
+    /**
+     * Accessible loading announcement text for screen readers.
+     * Override for i18n support.
+     * @type {string}
+     */
+    loadingText: {
+      type: String,
+      default: "Wird geladen…"
+    }
+  },
+  setup(e) {
+    const r = e, t = {
+      primary: "bg-teal-500 text-white hover:bg-teal-700 active:bg-teal-700 focus-visible:ring-teal-500",
+      secondary: "bg-white text-gray-900 border border-lu-border hover:bg-gray-50 active:bg-gray-100 focus-visible:ring-teal-500",
+      danger: "bg-red-500 text-white hover:bg-red-600 active:bg-red-700 focus-visible:ring-red-500",
+      ghost: "bg-transparent text-teal-500 hover:bg-teal-500/10 active:bg-teal-500/20 focus-visible:ring-teal-500",
+      icon: "bg-gray-100 text-gray-600 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring-teal-500 px-0!"
+    }, o = {
+      sm: "h-8 px-3 text-xs gap-1",
+      md: "h-10 px-4 text-sm gap-2",
+      lg: "h-12 px-6 text-base gap-2"
+    }, s = {
+      sm: "w-8 h-8",
+      md: "w-10 h-10",
+      lg: "w-12 h-12"
+    }, i = {
+      sm: "h-3 w-3",
+      md: "h-4 w-4",
+      lg: "h-5 w-5"
+    }, u = b(() => [
+      "inline-flex items-center justify-center font-medium transition-colors duration-150",
+      "rounded-input",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+      "disabled:opacity-50",
+      r.loading ? "cursor-wait" : "disabled:cursor-not-allowed",
+      t[r.variant],
+      r.variant === "icon" ? s[r.size] : o[r.size]
+    ]), g = b(() => ["animate-spin shrink-0", i[r.size]]);
+    return (d, v) => (n(), a("button", {
+      type: e.type,
+      disabled: e.disabled || e.loading,
+      class: w(u.value),
+      "aria-busy": e.loading || void 0,
+      "aria-disabled": e.disabled || e.loading || void 0
+    }, [
+      e.loading ? (n(), a("span", dt, y(e.loadingText), 1)) : c("", !0),
+      e.loading ? (n(), a("svg", {
+        key: 1,
+        class: w(g.value),
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "aria-hidden": "true"
+      }, [...v[0] || (v[0] = [
+        l("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }, null, -1)
+      ])], 2)) : c("", !0),
+      e.loading ? c("", !0) : B(d.$slots, "icon-left", { key: 2 }),
+      B(d.$slots, "default"),
+      e.loading ? c("", !0) : B(d.$slots, "icon-right", { key: 3 })
+    ], 10, ut));
+  }
+}), ct = {
+  key: 0,
+  class: "text-red-500 ml-0.5"
+}, ft = {
+  key: 0,
+  class: "pl-3 text-sm text-gray-500 select-none shrink-0"
+}, bt = ["type", "placeholder", "disabled", "readonly", "required", "aria-invalid", "aria-describedby"], gt = {
+  key: 1,
+  class: "pr-3 text-sm text-gray-500 select-none shrink-0"
+}, yt = ["aria-label", "disabled"], vt = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-5 w-5",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  "aria-hidden": "true"
+}, mt = {
+  key: 1,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-5 w-5",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  "aria-hidden": "true"
+}, pt = ["id"], ht = ["id"], xt = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+  __name: "LuInput",
+  props: /* @__PURE__ */ te({
+    /**
+     * Input type attribute.
+     * @type {'text' | 'password' | 'number' | 'email' | 'search'}
+     */
+    type: {
+      type: String,
+      default: "text",
+      validator: (e) => ["text", "password", "number", "email", "search"].includes(e)
+    },
+    /**
+     * Label text displayed above the input.
+     */
+    label: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Placeholder text displayed when the input is empty.
+     */
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Error message displayed below the input. Triggers red border styling.
+     */
+    error: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Hint text displayed below the input in gray.
+     */
+    hint: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Prefix text displayed inside the input on the left (e.g. 'EUR').
+     */
+    prefix: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Suffix text displayed inside the input on the right.
+     */
+    suffix: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Whether the input is disabled.
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Whether the input is read-only.
+     */
+    readonly: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Whether the input is required.
+     */
+    required: {
+      type: Boolean,
+      default: !1
+    }
+  }, {
+    modelValue: { type: [String, Number], default: "" },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e, { expose: r }) {
+    const t = Ae(), o = b(
+      () => Object.fromEntries(Object.entries(t).filter(([h]) => h !== "class" && h !== "style"))
+    ), s = b(
+      () => Object.fromEntries(Object.entries(t).filter(([h]) => h === "class" || h === "style"))
+    ), i = G(e, "modelValue"), u = e, g = E(null), d = E(!1), v = b(() => u.type === "password" && d.value ? "text" : u.type), m = b(() => u.type === "password"), f = `lu-input-${q()}`, p = b(() => [
+      "flex items-center w-full rounded-input border bg-white transition-colors",
+      "duration-150",
+      "focus-within:ring-2 focus-within:ring-offset-[2px]",
+      u.error ? "border-red-500 focus-within:ring-red-500" : "border-lu-border focus-within:ring-teal-500 focus-within:border-teal-500",
+      u.disabled ? "opacity-50 cursor-not-allowed bg-gray-50" : ""
+    ]), x = b(() => [
+      "w-full bg-transparent text-sm text-gray-900 placeholder-gray-400",
+      "outline-none py-2",
+      "disabled:cursor-not-allowed",
+      u.prefix ? "pl-1" : "pl-3",
+      u.suffix || m.value ? "pr-1" : "pr-3"
+    ]);
+    function S() {
+      d.value = !d.value;
+    }
+    function k() {
+      var h;
+      (h = g.value) == null || h.focus();
+    }
+    return r({ focus: k }), (h, I) => (n(), a("div", be({ class: "flex flex-col gap-1" }, s.value), [
+      e.label ? (n(), a("label", {
+        key: 0,
+        for: f,
+        class: "text-sm font-medium text-gray-700"
+      }, [
+        M(y(e.label) + " ", 1),
+        e.required ? (n(), a("span", ct, "*")) : c("", !0)
+      ])) : c("", !0),
+      l("div", {
+        class: w(p.value)
+      }, [
+        e.prefix ? (n(), a("span", ft, y(e.prefix), 1)) : c("", !0),
+        ee(l("input", be({
+          ref_key: "inputRef",
+          ref: g,
+          id: f,
+          "onUpdate:modelValue": I[0] || (I[0] = (F) => i.value = F),
+          type: v.value,
+          placeholder: e.placeholder,
+          disabled: e.disabled,
+          readonly: e.readonly,
+          required: e.required,
+          class: x.value,
+          "aria-invalid": !!e.error || void 0,
+          "aria-describedby": e.error ? `${f}-error` : e.hint ? `${f}-hint` : void 0
+        }, o.value), null, 16, bt), [
+          [_e, i.value]
+        ]),
+        e.suffix && !m.value ? (n(), a("span", gt, y(e.suffix), 1)) : c("", !0),
+        m.value ? (n(), a("button", {
+          key: 2,
+          type: "button",
+          class: "pr-3 text-gray-400 hover:text-gray-600 transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-[2px] rounded shrink-0",
+          "aria-label": d.value ? "Passwort verbergen" : "Passwort anzeigen",
+          disabled: e.disabled,
+          onClick: S
+        }, [
+          d.value ? (n(), a("svg", mt, [...I[2] || (I[2] = [
+            l("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" }, null, -1),
+            l("path", { d: "M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" }, null, -1),
+            l("path", { d: "M14.12 14.12a3 3 0 1 1-4.24-4.24" }, null, -1),
+            l("line", {
+              x1: "1",
+              y1: "1",
+              x2: "23",
+              y2: "23"
+            }, null, -1)
+          ])])) : (n(), a("svg", vt, [...I[1] || (I[1] = [
+            l("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }, null, -1),
+            l("circle", {
+              cx: "12",
+              cy: "12",
+              r: "3"
+            }, null, -1)
+          ])]))
+        ], 8, yt)) : c("", !0)
+      ], 2),
+      e.error ? (n(), a("p", {
+        key: 1,
+        id: `${f}-error`,
+        class: "text-xs text-red-500",
+        role: "alert"
+      }, y(e.error), 9, pt)) : e.hint ? (n(), a("p", {
+        key: 2,
+        id: `${f}-hint`,
+        class: "text-xs text-gray-400"
+      }, y(e.hint), 9, ht)) : c("", !0)
+    ], 16));
+  }
+}), wt = { class: "flex flex-col gap-1" }, kt = {
+  key: 0,
+  class: "text-red-500 ml-0.5"
+}, $t = ["placeholder", "disabled", "readonly", "required", "rows", "aria-invalid", "aria-describedby"], St = ["id"], Ct = ["id"], Lt = {
+  __name: "LuTextarea",
+  props: /* @__PURE__ */ te({
+    /**
+     * Label text displayed above the textarea.
+     */
+    label: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Placeholder text displayed when the textarea is empty.
+     */
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Error message displayed below the textarea. Triggers red border styling.
+     */
+    error: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Hint text displayed below the textarea in gray.
+     */
+    hint: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Whether the textarea is disabled.
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Whether the textarea is read-only.
+     */
+    readonly: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Whether the textarea is required.
+     */
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Number of visible text rows.
+     */
+    rows: {
+      type: [Number, String],
+      default: 3
+    },
+    /**
+     * CSS resize behaviour.
+     * @type {'none' | 'vertical' | 'both'}
+     */
+    resize: {
+      type: String,
+      default: "vertical",
+      validator: (e) => ["none", "vertical", "both"].includes(e)
+    }
+  }, {
+    modelValue: { type: String, default: "" },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const r = G(e, "modelValue"), t = e, o = `lu-textarea-${q()}`, s = {
+      none: "resize-none",
+      vertical: "resize-y",
+      both: "resize"
+    }, i = b(() => [
+      "w-full rounded-input border bg-white px-3 py-2 text-sm text-gray-900",
+      "placeholder-gray-400 outline-none transition-colors duration-150",
+      "focus:ring-2 focus:ring-offset-[2px]",
+      t.error ? "border-red-500 focus:ring-red-500" : "border-lu-border focus:ring-teal-500 focus:border-teal-500",
+      t.disabled ? "opacity-50 cursor-not-allowed bg-gray-50" : "",
+      s[t.resize]
+    ]);
+    return (u, g) => (n(), a("div", wt, [
+      e.label ? (n(), a("label", {
+        key: 0,
+        for: o,
+        class: "text-sm font-medium text-gray-700"
+      }, [
+        M(y(e.label) + " ", 1),
+        e.required ? (n(), a("span", kt, "*")) : c("", !0)
+      ])) : c("", !0),
+      ee(l("textarea", {
+        id: o,
+        "onUpdate:modelValue": g[0] || (g[0] = (d) => r.value = d),
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        readonly: e.readonly,
+        required: e.required,
+        rows: e.rows,
+        class: w(i.value),
+        "aria-invalid": !!e.error || void 0,
+        "aria-describedby": e.error ? `${o}-error` : e.hint ? `${o}-hint` : void 0
+      }, null, 10, $t), [
+        [ge, r.value]
+      ]),
+      e.error ? (n(), a("p", {
+        key: 1,
+        id: `${o}-error`,
+        class: "text-xs text-red-500",
+        role: "alert"
+      }, y(e.error), 9, St)) : e.hint ? (n(), a("p", {
+        key: 2,
+        id: `${o}-hint`,
+        class: "text-xs text-gray-400"
+      }, y(e.hint), 9, Ct)) : c("", !0)
+    ]));
+  }
+}, At = { class: "bg-lu-surface rounded-card shadow-card" }, _t = {
+  key: 0,
+  class: "p-6"
+}, Bt = { class: "text-sm font-medium text-gray-500 truncate" }, Et = { class: "mt-2 flex items-baseline gap-2" }, It = { class: "text-2xl font-semibold text-gray-900" }, zt = { class: "sr-only" }, Tt = {
+  key: 0,
+  class: "w-4 h-4",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  "aria-hidden": "true"
+}, Mt = {
+  key: 1,
+  class: "w-4 h-4",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  "aria-hidden": "true"
+}, jt = {
+  key: 2,
+  class: "w-4 h-4",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  "aria-hidden": "true"
+}, Ot = {
+  key: 0,
+  class: "px-6 py-4 border-b border-lu-border"
+}, Dt = { class: "p-6" }, Vt = {
+  key: 1,
+  class: "px-6 py-4 border-t border-lu-border"
+}, Pt = {
+  __name: "LuCard",
+  props: {
+    /**
+     * Card display variant.
+     * @type {'standard' | 'kpi'}
+     */
+    variant: {
+      type: String,
+      default: "standard",
+      validator: (e) => ["standard", "kpi"].includes(e)
+    },
+    /**
+     * KPI metric value (only used with variant="kpi").
+     * @type {string | number}
+     */
+    value: {
+      type: [String, Number],
+      default: void 0
+    },
+    /**
+     * KPI label text (only used with variant="kpi").
+     * @type {string}
+     */
+    label: {
+      type: String,
+      default: ""
+    },
+    /**
+     * KPI trend text, e.g. "+5%" or "-3%" (only used with variant="kpi").
+     * @type {string}
+     */
+    trend: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Direction of the trend indicator (only used with variant="kpi").
+     * Determines arrow direction and color: up = green, down = red, neutral = gray.
+     * @type {'up' | 'down' | 'neutral'}
+     */
+    trendDirection: {
+      type: String,
+      default: "neutral",
+      validator: (e) => ["up", "down", "neutral"].includes(e)
+    }
+  },
+  setup(e) {
+    const r = e, t = {
+      up: "text-green-600",
+      down: "text-red-500",
+      neutral: "text-gray-400"
+    }, o = b(
+      () => t[r.trendDirection] ?? t.neutral
+    );
+    return (s, i) => (n(), a("div", At, [
+      e.variant === "kpi" ? (n(), a("div", _t, [
+        l("p", Bt, y(e.label), 1),
+        l("div", Et, [
+          l("span", It, y(e.value), 1),
+          e.trend ? (n(), a("span", {
+            key: 0,
+            class: w(["inline-flex items-center gap-1 text-sm font-medium", o.value])
+          }, [
+            l("span", zt, y(e.trendDirection === "up" ? "Aufwaertstrend" : e.trendDirection === "down" ? "Abwaertstrend" : "Unveraendert"), 1),
+            e.trendDirection === "up" ? (n(), a("svg", Tt, [...i[0] || (i[0] = [
+              l("path", {
+                "fill-rule": "evenodd",
+                d: "M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z",
+                "clip-rule": "evenodd"
+              }, null, -1)
+            ])])) : c("", !0),
+            e.trendDirection === "down" ? (n(), a("svg", Mt, [...i[1] || (i[1] = [
+              l("path", {
+                "fill-rule": "evenodd",
+                d: "M10 3a.75.75 0 0 1 .75.75v10.638l3.96-4.158a.75.75 0 1 1 1.08 1.04l-5.25 5.5a.75.75 0 0 1-1.08 0l-5.25-5.5a.75.75 0 1 1 1.08-1.04l3.96 4.158V3.75A.75.75 0 0 1 10 3Z",
+                "clip-rule": "evenodd"
+              }, null, -1)
+            ])])) : c("", !0),
+            e.trendDirection === "neutral" ? (n(), a("svg", jt, [...i[2] || (i[2] = [
+              l("path", {
+                "fill-rule": "evenodd",
+                d: "M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z",
+                "clip-rule": "evenodd"
+              }, null, -1)
+            ])])) : c("", !0),
+            M(" " + y(e.trend), 1)
+          ], 2)) : c("", !0)
+        ])
+      ])) : (n(), a(z, { key: 1 }, [
+        s.$slots.header ? (n(), a("div", Ot, [
+          B(s.$slots, "header")
+        ])) : c("", !0),
+        l("div", Dt, [
+          B(s.$slots, "default")
+        ]),
+        s.$slots.footer ? (n(), a("div", Vt, [
+          B(s.$slots, "footer")
+        ])) : c("", !0)
+      ], 64))
+    ]));
+  }
+}, Rt = { class: "bg-lu-surface rounded-card shadow-card overflow-hidden" }, Nt = { class: "overflow-x-auto" }, Ft = {
+  class: "w-full text-left text-sm",
+  role: "table"
+}, qt = { class: "border-b border-lu-border" }, Kt = ["tabindex", "aria-sort", "onClick", "onKeydown"], Ut = {
+  key: 1,
+  class: "inline-flex items-center gap-1"
+}, Ht = {
+  key: 0,
+  class: "w-3.5 h-3.5 text-teal-500",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  "aria-hidden": "true"
+}, Zt = {
+  key: 1,
+  class: "w-3.5 h-3.5 text-teal-500",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  "aria-hidden": "true"
+}, Wt = { key: 0 }, Gt = { key: 1 }, Xt = ["colspan"], Jt = { key: 2 }, Yt = ["onClick"], Qt = {
+  __name: "LuTable",
+  props: {
+    /**
+     * Column definitions.
+     * @type {TableColumn[]}
+     */
+    columns: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * Row data array. Each item is an object whose keys correspond to column keys.
+     * Each row should have a unique identifier matching the `rowKey` prop for correct
+     * Vue reactivity when sorting or reordering rows.
+     * @type {Array<Record<string, unknown>>}
+     */
+    data: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Whether the table is in a loading state (shows skeleton rows).
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Currently active sort field (column key).
+     * @type {string}
+     */
+    sortField: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Sort direction for the active sort field.
+     * @type {'asc' | 'desc'}
+     */
+    sortDir: {
+      type: String,
+      default: "asc",
+      validator: (e) => ["asc", "desc"].includes(e)
+    },
+    /**
+     * Property name used as unique key for each row. Ensures stable DOM identity
+     * when rows are sorted or reordered, preventing Vue reactivity issues with
+     * slot state (inputs, toggles, tooltips). Falls back to row index if not found.
+     * @type {string}
+     */
+    rowKey: {
+      type: String,
+      default: "id"
+    },
+    /**
+     * Optional function to compute custom CSS classes for each data row.
+     * Receives (row, index) and should return a string or array of strings.
+     * When provided, overrides the default zebra-striping background.
+     * @type {((row: Record<string, unknown>, index: number) => string|string[]) | null}
+     */
+    rowClass: {
+      type: Function,
+      default: null
+    }
+  },
+  emits: ["sort", "row-click"],
+  setup(e, { emit: r }) {
+    const t = ["75%", "55%", "65%", "85%", "45%", "70%"], o = [0, 1, 2], s = e, i = r;
+    function u(v) {
+      i("sort", v);
+    }
+    function g(v, m) {
+      return v[s.rowKey] ?? v._id ?? m;
+    }
+    function d(v, m) {
+      return t[(v * 3 + m) % t.length];
+    }
+    return (v, m) => (n(), a("div", Rt, [
+      l("div", Nt, [
+        l("table", Ft, [
+          l("thead", null, [
+            l("tr", qt, [
+              (n(!0), a(z, null, j(e.columns, (f) => (n(), a("th", {
+                key: f.key,
+                scope: "col",
+                class: w([
+                  "px-6 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap",
+                  f.sortable ? "cursor-pointer select-none hover:text-gray-700 transition-colors duration-150" : "",
+                  f.hideOnMobile ? "hidden md:table-cell" : ""
+                ]),
+                style: H(f.width ? { width: f.width } : void 0),
+                tabindex: f.sortable ? 0 : void 0,
+                "aria-sort": f.sortable ? e.sortField === f.key ? e.sortDir === "asc" ? "ascending" : "descending" : "none" : void 0,
+                onClick: (p) => f.sortable && u(f.key),
+                onKeydown: [
+                  Q((p) => f.sortable && u(f.key), ["enter"]),
+                  Q(U((p) => f.sortable && u(f.key), ["prevent"]), ["space"])
+                ]
+              }, [
+                v.$slots[`header-${f.key}`] ? B(v.$slots, `header-${f.key}`, {
+                  key: 0,
+                  column: f
+                }) : (n(), a("span", Ut, [
+                  M(y(f.label) + " ", 1),
+                  f.sortable && e.sortField === f.key ? (n(), a(z, { key: 0 }, [
+                    e.sortDir === "asc" ? (n(), a("svg", Ht, [...m[0] || (m[0] = [
+                      l("path", {
+                        "fill-rule": "evenodd",
+                        d: "M9.47 6.47a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 1 1-1.06 1.06L10 8.06l-3.72 3.72a.75.75 0 0 1-1.06-1.06l4.25-4.25Z",
+                        "clip-rule": "evenodd"
+                      }, null, -1)
+                    ])])) : (n(), a("svg", Zt, [...m[1] || (m[1] = [
+                      l("path", {
+                        "fill-rule": "evenodd",
+                        d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0l-4.25-4.25a.75.75 0 0 1 0-1.06Z",
+                        "clip-rule": "evenodd"
+                      }, null, -1)
+                    ])]))
+                  ], 64)) : c("", !0)
+                ]))
+              ], 46, Kt))), 128))
+            ])
+          ]),
+          e.loading ? (n(), a("tbody", Wt, [
+            (n(), a(z, null, j(o, (f) => l("tr", {
+              key: "skeleton-" + f,
+              class: "border-b border-lu-border last:border-b-0"
+            }, [
+              (n(!0), a(z, null, j(e.columns, (p, x) => (n(), a("td", {
+                key: p.key,
+                class: w(["px-6 py-4", p.hideOnMobile ? "hidden md:table-cell" : ""])
+              }, [
+                l("div", {
+                  class: "h-4 bg-gray-200 rounded animate-pulse",
+                  style: H({ width: d(f, x) })
+                }, null, 4)
+              ], 2))), 128))
+            ])), 64))
+          ])) : !e.data || e.data.length === 0 ? (n(), a("tbody", Gt, [
+            l("tr", null, [
+              l("td", {
+                colspan: e.columns.length,
+                class: "px-6 py-12 text-center text-gray-400"
+              }, [
+                B(v.$slots, "empty", {}, () => [
+                  m[2] || (m[2] = M(" Keine Daten vorhanden ", -1))
+                ])
+              ], 8, Xt)
+            ])
+          ])) : (n(), a("tbody", Jt, [
+            (n(!0), a(z, null, j(e.data, (f, p) => (n(), a(z, {
+              key: g(f, p)
+            }, [
+              v.$slots.row ? B(v.$slots, "row", {
+                key: 1,
+                row: f,
+                index: p
+              }) : (n(), a("tr", {
+                key: 0,
+                class: w([
+                  "border-b border-lu-border last:border-b-0 transition-colors duration-150",
+                  s.rowClass ? s.rowClass(f, p) : p % 2 === 1 ? "bg-lu-bg" : "bg-lu-surface"
+                ]),
+                onClick: (x) => i("row-click", f, p)
+              }, [
+                (n(!0), a(z, null, j(e.columns, (x) => (n(), a("td", {
+                  key: x.key,
+                  class: w(["px-6 py-4 text-gray-700", x.hideOnMobile ? "hidden md:table-cell" : ""])
+                }, [
+                  B(v.$slots, "cell-" + x.key, {
+                    row: f,
+                    value: f[x.key]
+                  }, () => [
+                    M(y(f[x.key]), 1)
+                  ])
+                ], 2))), 128))
+              ], 10, Yt))
+            ], 64))), 128))
+          ]))
+        ])
+      ])
+    ]));
+  }
+}, en = {
+  __name: "LuBadge",
+  props: {
+    /**
+     * Semantic color variant.
+     * @type {'success' | 'warning' | 'error' | 'info' | 'neutral'}
+     */
+    variant: {
+      type: String,
+      default: "neutral",
+      validator: (e) => ["success", "warning", "error", "info", "neutral"].includes(e)
+    },
+    /**
+     * Badge size.
+     * @type {'sm' | 'md'}
+     */
+    size: {
+      type: String,
+      default: "md",
+      validator: (e) => ["sm", "md"].includes(e)
+    }
+  },
+  setup(e) {
+    const r = e, t = {
+      success: "bg-green-50 text-green-700",
+      warning: "bg-amber-50 text-amber-700",
+      error: "bg-red-50 text-red-700",
+      info: "bg-blue-50 text-blue-700",
+      neutral: "bg-gray-100 text-gray-700"
+    }, o = {
+      sm: "px-1.5 py-0.5 text-[11px]",
+      md: "px-2 py-0.5 text-xs"
+    }, s = b(() => [
+      "inline-flex items-center font-medium rounded-full whitespace-nowrap leading-tight",
+      t[r.variant],
+      o[r.size]
+    ]);
+    return (i, u) => (n(), a("span", {
+      class: w(s.value)
+    }, [
+      B(i.$slots, "default")
+    ], 2));
+  }
+}, O = {
+  __name: "LuIcon",
+  props: {
+    /**
+     * Lucide icon name in PascalCase (e.g. 'Clock', 'CircleCheck', 'User').
+     * @type {string}
+     */
+    name: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Icon size in pixels.
+     * @type {number | string}
+     */
+    size: {
+      type: [Number, String],
+      default: 20
+    },
+    /**
+     * Icon color. Accepts any CSS color value.
+     * @type {string}
+     */
+    color: {
+      type: String,
+      default: "currentColor"
+    },
+    /**
+     * SVG stroke width.
+     * @type {number | string}
+     */
+    strokeWidth: {
+      type: [Number, String],
+      default: 1.5
+    }
+  },
+  setup(e) {
+    const r = e, t = /* @__PURE__ */ new Map(), o = E(null);
+    async function s(u) {
+      if (t.has(u))
+        return t.get(u) ?? null;
+      try {
+        const d = (await import("lucide-vue-next"))[u];
+        return d ? (t.set(u, d), d) : (console.warn(`[LuIcon] Icon "${u}" not found in lucide-vue-next`), t.set(u, null), null);
+      } catch {
+        return console.warn(`[LuIcon] Failed to load icon "${u}"`), null;
+      }
+    }
+    async function i(u) {
+      if (!u) {
+        o.value = null;
+        return;
+      }
+      if (t.has(u)) {
+        o.value = t.get(u) ?? null;
+        return;
+      }
+      o.value = null, o.value = await s(u);
+    }
+    return i(r.name), ie(
+      () => r.name,
+      (u) => {
+        i(u);
+      }
+    ), (u, g) => o.value ? (n(), P(Be(o.value), {
+      key: 0,
+      size: e.size,
+      color: e.color,
+      "stroke-width": e.strokeWidth,
+      "aria-hidden": "true"
+    }, null, 8, ["size", "color", "stroke-width"])) : c("", !0);
+  }
+}, tn = ["aria-label"], nn = ["src", "alt"], an = {
+  key: 1,
+  "aria-hidden": "true"
+}, oe = {
+  __name: "LuAvatar",
+  props: {
+    /**
+     * Full name of the person. Used for initials and color computation.
+     * @type {string}
+     */
+    name: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Optional image URL. When set and successfully loaded, shows the image.
+     * @type {string}
+     */
+    src: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Avatar size. sm=32px, md=40px, lg=48px, xl=64px.
+     * @type {'sm' | 'md' | 'lg' | 'xl'}
+     */
+    size: {
+      type: String,
+      default: "md",
+      validator: (e) => ["sm", "md", "lg", "xl"].includes(e)
+    }
+  },
+  setup(e) {
+    const r = e, t = [
+      { bg: "bg-teal-100", text: "text-teal-700" },
+      { bg: "bg-blue-100", text: "text-blue-700" },
+      { bg: "bg-violet-100", text: "text-violet-700" },
+      { bg: "bg-amber-100", text: "text-amber-700" },
+      { bg: "bg-rose-100", text: "text-rose-700" },
+      { bg: "bg-emerald-100", text: "text-emerald-700" }
+    ], o = {
+      sm: "w-8 h-8 text-xs",
+      md: "w-10 h-10 text-sm",
+      lg: "w-12 h-12 text-base",
+      xl: "w-16 h-16 text-lg"
+    }, s = E(!1), i = E(!1);
+    function u(m) {
+      let f = 0;
+      for (let p = 0; p < m.length; p++)
+        f = (f << 5) - f + m.charCodeAt(p), f |= 0;
+      return Math.abs(f);
+    }
+    const g = b(() => {
+      const m = u(r.name) % t.length;
+      return t[m];
+    }), d = b(() => {
+      var f;
+      const m = r.name.trim().split(/\s+/);
+      return m.length >= 2 ? (m[0][0] + m[m.length - 1][0]).toUpperCase() : (((f = m[0]) == null ? void 0 : f[0]) || "?").toUpperCase();
+    }), v = b(() => !!r.src && s.value && !i.value);
+    return ie(
+      () => r.src,
+      (m) => {
+        if (s.value = !1, i.value = !1, m) {
+          const f = new Image();
+          f.onload = () => {
+            s.value = !0;
+          }, f.onerror = () => {
+            i.value = !0;
+          }, f.src = m;
+        }
+      },
+      { immediate: !0 }
+    ), (m, f) => (n(), a("div", {
+      class: w([
+        "inline-flex items-center justify-center rounded-full font-medium overflow-hidden shrink-0 select-none",
+        o[e.size],
+        v.value ? "" : [g.value.bg, g.value.text]
+      ]),
+      "aria-label": e.name,
+      role: "img"
+    }, [
+      v.value ? (n(), a("img", {
+        key: 0,
+        src: e.src,
+        alt: e.name,
+        class: "w-full h-full object-cover"
+      }, null, 8, nn)) : (n(), a("span", an, y(d.value), 1))
+    ], 10, tn));
+  }
+};
+let rn = 0;
+const Y = Ee(
+  /** @type {Toast[]} */
+  []
+);
+function sn() {
+  function e({ variant: t = "info", title: o = "", message: s, duration: i = 5e3 }) {
+    const u = ++rn;
+    return Y.push({ id: u, variant: t, title: o, message: s, duration: i }), i > 0 && setTimeout(() => r(u), i), u;
+  }
+  function r(t) {
+    const o = Y.findIndex((s) => s.id === t);
+    o > -1 && Y.splice(o, 1);
+  }
+  return { toasts: Y, addToast: e, removeToast: r };
+}
+const W = (e, r) => {
+  const t = e.__vccOpts || e;
+  for (const [o, s] of r)
+    t[o] = s;
+  return t;
+}, ln = {
+  class: "fixed bottom-6 right-6 z-toast flex flex-col gap-3 pointer-events-none",
+  "aria-live": "polite",
+  "aria-atomic": "false"
+}, on = { class: "flex-1 min-w-0" }, un = {
+  key: 0,
+  class: "text-sm font-semibold text-gray-900"
+}, dn = { class: "text-sm text-gray-600" }, cn = ["onClick"], fn = {
+  __name: "LuToast",
+  setup(e) {
+    const { toasts: r, removeToast: t } = sn(), o = {
+      success: "CircleCheck",
+      warning: "TriangleAlert",
+      error: "XCircle",
+      info: "Info"
+    }, s = {
+      success: "text-green-500",
+      warning: "text-amber-500",
+      error: "text-red-500",
+      info: "text-blue-500"
+    }, i = {
+      success: "border-green-200",
+      warning: "border-amber-200",
+      error: "border-red-200",
+      info: "border-blue-200"
+    };
+    return (u, g) => (n(), P(ye, { to: "body" }, [
+      l("div", ln, [
+        A(Ie, { name: "lu-toast" }, {
+          default: T(() => [
+            (n(!0), a(z, null, j(R(r), (d) => (n(), a("div", {
+              key: d.id,
+              class: w([
+                "pointer-events-auto flex items-start gap-3 p-4 rounded-card bg-white shadow-lg border max-w-sm",
+                i[d.variant]
+              ]),
+              role: "alert"
+            }, [
+              A(O, {
+                name: o[d.variant],
+                size: 20,
+                class: w(["shrink-0 mt-0.5", s[d.variant]])
+              }, null, 8, ["name", "class"]),
+              l("div", on, [
+                d.title ? (n(), a("p", un, y(d.title), 1)) : c("", !0),
+                l("p", dn, y(d.message), 1)
+              ]),
+              l("button", {
+                class: "shrink-0 p-1 text-gray-400 hover:text-gray-600 transition-colors duration-150 rounded-full hover:bg-gray-100",
+                "aria-label": "Schließen",
+                onClick: (v) => R(t)(d.id)
+              }, [
+                A(O, {
+                  name: "X",
+                  size: 16
+                })
+              ], 8, cn)
+            ], 2))), 128))
+          ]),
+          _: 1
+        })
+      ])
+    ]));
+  }
+}, bn = /* @__PURE__ */ W(fn, [["__scopeId", "data-v-d20ffd9e"]]), gn = { class: "flex-1 min-w-0" }, yn = {
+  key: 0,
+  class: "text-sm font-semibold"
+}, vn = {
+  __name: "LuAlert",
+  props: {
+    /**
+     * Semantic color variant.
+     * @type {'info' | 'warning' | 'error' | 'success'}
+     */
+    variant: {
+      type: String,
+      default: "info",
+      validator: (e) => ["info", "warning", "error", "success"].includes(e)
+    },
+    /**
+     * Optional bold title line.
+     * @type {string}
+     */
+    title: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Alert message body text.
+     * @type {string}
+     */
+    message: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Whether to show a dismiss/close button.
+     * @type {boolean}
+     */
+    dismissible: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["dismiss"],
+  setup(e, { emit: r }) {
+    const t = e, o = r, s = E(!1);
+    function i() {
+      s.value = !0, o("dismiss");
+    }
+    const u = {
+      success: "bg-green-50 border-green-200 text-green-800",
+      warning: "bg-amber-50 border-amber-200 text-amber-800",
+      error: "bg-red-50 border-red-200 text-red-800",
+      info: "bg-blue-50 border-blue-200 text-blue-800"
+    }, g = {
+      success: "CircleCheck",
+      warning: "TriangleAlert",
+      error: "XCircle",
+      info: "Info"
+    }, d = {
+      success: "text-green-500",
+      warning: "text-amber-500",
+      error: "text-red-500",
+      info: "text-blue-500"
+    }, v = b(() => [
+      "flex items-start gap-3 p-4 rounded-card border",
+      u[t.variant]
+    ]);
+    return (m, f) => s.value ? c("", !0) : (n(), a("div", {
+      key: 0,
+      class: w(v.value),
+      role: "alert"
+    }, [
+      A(O, {
+        name: g[e.variant],
+        size: 20,
+        class: w(["shrink-0 mt-0.5", d[e.variant]])
+      }, null, 8, ["name", "class"]),
+      l("div", gn, [
+        e.title ? (n(), a("p", yn, y(e.title), 1)) : c("", !0),
+        e.message ? (n(), a("p", {
+          key: 1,
+          class: w(["text-sm", e.title ? "mt-1 opacity-90" : ""])
+        }, y(e.message), 3)) : c("", !0)
+      ]),
+      e.dismissible ? (n(), a("button", {
+        key: 0,
+        class: "shrink-0 p-1 text-current opacity-60 hover:opacity-100 transition-opacity duration-150 rounded-full",
+        "aria-label": "Schließen",
+        onClick: i
+      }, [
+        A(O, {
+          name: "X",
+          size: 16
+        })
+      ])) : c("", !0)
+    ], 2));
+  }
+}, mn = {
+  __name: "LuSkeleton",
+  props: {
+    /**
+     * Skeleton width. Accepts any CSS width value.
+     * @type {string}
+     */
+    width: {
+      type: String,
+      default: "100%"
+    },
+    /**
+     * Skeleton height. Accepts any CSS height value.
+     * @type {string}
+     */
+    height: {
+      type: String,
+      default: "16px"
+    },
+    /**
+     * Whether to use fully rounded corners (circle/pill shape).
+     * @type {boolean}
+     */
+    rounded: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    return (r, t) => (n(), a("div", {
+      class: w(["lu-skeleton", e.rounded ? "rounded-full" : "rounded-input"]),
+      style: H({ width: e.width, height: e.height }),
+      "aria-hidden": "true"
+    }, null, 6));
+  }
+}, pn = /* @__PURE__ */ W(mn, [["__scopeId", "data-v-19bd1245"]]), hn = { class: "flex flex-col items-center justify-center py-12 px-4 text-center" }, xn = {
+  key: 0,
+  class: "mb-4 text-gray-300"
+}, wn = { class: "text-base font-semibold text-gray-900 mb-1" }, kn = {
+  key: 1,
+  class: "text-sm text-gray-500 mb-6 max-w-sm"
+}, $n = {
+  __name: "LuEmptyState",
+  props: {
+    /**
+     * Lucide icon name to display above the title.
+     * @type {string}
+     */
+    icon: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Bold headline text.
+     * @type {string}
+     */
+    title: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Descriptive text below the title.
+     * @type {string}
+     */
+    description: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Label for the optional action button.
+     * @type {string}
+     */
+    actionLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Click handler for the action button.
+     * @type {Function | null}
+     */
+    actionHandler: {
+      type: Function,
+      default: null
+    }
+  },
+  setup(e) {
+    return (r, t) => (n(), a("div", hn, [
+      e.icon ? (n(), a("div", xn, [
+        A(O, {
+          name: e.icon,
+          size: 48,
+          "stroke-width": 1.5
+        }, null, 8, ["name"])
+      ])) : c("", !0),
+      l("h3", wn, y(e.title), 1),
+      e.description ? (n(), a("p", kn, y(e.description), 1)) : c("", !0),
+      e.actionLabel && e.actionHandler ? (n(), P(K, {
+        key: 2,
+        variant: "primary",
+        size: "md",
+        onClick: e.actionHandler
+      }, {
+        default: T(() => [
+          M(y(e.actionLabel), 1)
+        ]),
+        _: 1
+      }, 8, ["onClick"])) : c("", !0)
+    ]));
+  }
+};
+function ne(e, r) {
+  function t(o) {
+    e.value && !e.value.contains(
+      /** @type {Node} */
+      o.target
+    ) && r();
+  }
+  ve(() => {
+    document.addEventListener("mousedown", t), document.addEventListener("touchstart", t);
+  }), me(() => {
+    document.removeEventListener("mousedown", t), document.removeEventListener("touchstart", t);
+  });
+}
+const Sn = { class: "relative" }, Cn = ["tabindex", "aria-expanded", "aria-invalid", "aria-describedby", "aria-disabled", "onKeydown"], Ln = { class: "flex-1 flex flex-wrap items-center gap-1 px-3 py-1.5 text-sm min-w-0" }, An = { class: "truncate" }, _n = ["aria-label", "onClick"], Bn = {
+  key: 1,
+  class: "text-gray-900 truncate"
+}, En = {
+  key: 2,
+  class: "text-gray-400 truncate"
+}, In = { class: "pr-3 shrink-0 text-gray-400" }, zn = {
+  key: 0,
+  class: "absolute top-full left-0 right-0 z-dropdown mt-1 bg-white border border-lu-border rounded-card shadow-card max-h-60 overflow-auto"
+}, Tn = {
+  key: 0,
+  class: "p-2 border-b border-lu-border"
+}, Mn = ["aria-multiselectable"], jn = {
+  key: 0,
+  class: "px-3 py-1.5 text-xs font-semibold text-gray-500 uppercase tracking-wider",
+  role: "presentation"
+}, On = ["aria-selected", "onClick"], Dn = { class: "flex-1 truncate" }, Vn = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-4 w-4 shrink-0 text-teal-500 ml-2",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  "aria-hidden": "true"
+}, Pn = {
+  key: 0,
+  class: "px-3 py-3 text-sm text-gray-400 text-center"
+}, Rn = ["id"], Nn = {
+  __name: "LuSelect",
+  props: /* @__PURE__ */ te({
+    /**
+     * Options to display.
+     * Flat: Array<{value: string|number, label: string}>
+     * Grouped: Array<{group: string, items: Array<{value: string|number, label: string}>}>
+     * @type {Array<{value?: string|number, label?: string, group?: string, items?: Array<{value: string|number, label: string}>}>}
+     */
+    options: {
+      type: Array,
+      default: () => []
+    },
+    /** Label text displayed above the select. */
+    label: {
+      type: String,
+      default: ""
+    },
+    /** Error message displayed below the select. Triggers red border styling. */
+    error: {
+      type: String,
+      default: ""
+    },
+    /** Placeholder text when no option is selected. */
+    placeholder: {
+      type: String,
+      default: "Bitte waehlen…"
+    },
+    /** Enable search input inside the dropdown for live filtering. */
+    searchable: {
+      type: Boolean,
+      default: !1
+    },
+    /** Enable multi-select with chip/tag display in the trigger. */
+    multiple: {
+      type: Boolean,
+      default: !1
+    },
+    /** Whether the select is disabled. */
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  }, {
+    modelValue: { default: null },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const r = G(e, "modelValue"), t = e, o = E(!1), s = E(""), i = E(null), u = E(null), g = `lu-select-${q()}`;
+    ne(i, () => {
+      o.value = !1;
+    });
+    const d = b(() => {
+      const $ = [];
+      for (const L of t.options)
+        if (L.group && Array.isArray(L.items)) {
+          $.push({ type: "group", label: L.group });
+          for (const C of L.items)
+            $.push({ type: "option", value: C.value, label: C.label });
+        } else
+          $.push({ type: "option", value: L.value, label: L.label });
+      return $;
+    });
+    function v($) {
+      return $.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+    }
+    const m = b(() => {
+      if (!s.value) return d.value;
+      const $ = v(s.value);
+      return d.value.filter((C) => C.type === "group" ? !0 : v(C.label).includes($)).filter((C, _, D) => {
+        if (C.type === "group") {
+          const V = D[_ + 1];
+          return V && V.type === "option";
+        }
+        return !0;
+      });
+    }), f = b(() => m.value.some(($) => $.type === "option")), p = b(() => {
+      if (t.multiple || r.value == null) return "";
+      const $ = d.value.find((L) => L.type === "option" && L.value === r.value);
+      return $ ? $.label : "";
+    }), x = b(() => !t.multiple || !Array.isArray(r.value) ? [] : r.value.map(($) => {
+      const L = d.value.find((C) => C.type === "option" && C.value === $);
+      return { value: $, label: L ? L.label : String($) };
+    })), S = b(() => [
+      "flex items-center w-full min-h-[40px] rounded-input border bg-white transition-colors",
+      "duration-150 cursor-pointer text-left",
+      "focus-visible:ring-2 focus-visible:ring-offset-[2px] focus-visible:outline-none",
+      t.error ? "border-red-500 focus-visible:ring-red-500" : "border-lu-border focus-visible:ring-teal-500 focus-visible:border-teal-500",
+      t.disabled ? "opacity-50 cursor-not-allowed bg-gray-50" : ""
+    ]);
+    function k($) {
+      return t.multiple ? Array.isArray(r.value) && r.value.includes($) : r.value === $;
+    }
+    function h() {
+      t.disabled || (o.value = !o.value, o.value && (s.value = "", pe(() => {
+        var $;
+        ($ = u.value) == null || $.focus();
+      })));
+    }
+    function I($) {
+      if (t.multiple) {
+        const L = Array.isArray(r.value) ? [...r.value] : [], C = L.indexOf($);
+        C >= 0 ? L.splice(C, 1) : L.push($), r.value = L;
+      } else
+        r.value = $, o.value = !1;
+    }
+    function F($) {
+      if (t.disabled) return;
+      const L = Array.isArray(r.value) ? [...r.value] : [];
+      r.value = L.filter((C) => C !== $);
+    }
+    function N($) {
+      $.key === "Escape" && (o.value = !1);
+    }
+    return ($, L) => (n(), a("div", {
+      ref_key: "containerRef",
+      ref: i,
+      class: "flex flex-col gap-1",
+      onKeydown: N
+    }, [
+      e.label ? (n(), a("label", {
+        key: 0,
+        for: g,
+        class: "text-sm font-medium text-gray-700"
+      }, y(e.label), 1)) : c("", !0),
+      l("div", Sn, [
+        l("div", {
+          id: g,
+          role: "combobox",
+          class: w(S.value),
+          tabindex: e.disabled ? -1 : 0,
+          "aria-expanded": o.value,
+          "aria-haspopup": "listbox",
+          "aria-invalid": !!e.error || void 0,
+          "aria-describedby": e.error ? `${g}-error` : void 0,
+          "aria-disabled": e.disabled || void 0,
+          onClick: h,
+          onKeydown: [
+            Q(U(h, ["prevent"]), ["enter"]),
+            Q(U(h, ["prevent"]), ["space"])
+          ]
+        }, [
+          l("div", Ln, [
+            e.multiple && x.value.length > 0 ? (n(!0), a(z, { key: 0 }, j(x.value, (C) => (n(), a("span", {
+              key: C.value,
+              class: "inline-flex items-center gap-1 bg-teal-50 text-teal-700 px-2 py-0.5 rounded text-xs font-medium max-w-[160px]"
+            }, [
+              l("span", An, y(C.label), 1),
+              l("button", {
+                type: "button",
+                class: "shrink-0 hover:text-teal-900 focus:outline-none",
+                "aria-label": `${C.label} entfernen`,
+                onClick: U((_) => F(C.value), ["stop"])
+              }, [...L[2] || (L[2] = [
+                l("svg", {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  class: "h-3 w-3",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  "aria-hidden": "true"
+                }, [
+                  l("line", {
+                    x1: "18",
+                    y1: "6",
+                    x2: "6",
+                    y2: "18"
+                  }),
+                  l("line", {
+                    x1: "6",
+                    y1: "6",
+                    x2: "18",
+                    y2: "18"
+                  })
+                ], -1)
+              ])], 8, _n)
+            ]))), 128)) : p.value ? (n(), a("span", Bn, y(p.value), 1)) : (n(), a("span", En, y(e.placeholder), 1))
+          ]),
+          l("span", In, [
+            (n(), a("svg", {
+              xmlns: "http://www.w3.org/2000/svg",
+              class: w(["h-5 w-5 transition-transform duration-150", o.value ? "rotate-180" : ""]),
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              "aria-hidden": "true"
+            }, [...L[3] || (L[3] = [
+              l("polyline", { points: "6 9 12 15 18 9" }, null, -1)
+            ])], 2))
+          ])
+        ], 42, Cn),
+        o.value ? (n(), a("div", zn, [
+          e.searchable ? (n(), a("div", Tn, [
+            ee(l("input", {
+              ref_key: "searchInputRef",
+              ref: u,
+              "onUpdate:modelValue": L[0] || (L[0] = (C) => s.value = C),
+              type: "text",
+              class: "w-full px-3 py-1.5 text-sm border border-lu-border rounded-input outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500 placeholder-gray-400",
+              placeholder: "Suchen\\u2026",
+              onClick: L[1] || (L[1] = U(() => {
+              }, ["stop"]))
+            }, null, 512), [
+              [ge, s.value]
+            ])
+          ])) : c("", !0),
+          l("ul", {
+            role: "listbox",
+            "aria-multiselectable": e.multiple || void 0,
+            class: "py-1"
+          }, [
+            (n(!0), a(z, null, j(m.value, (C) => (n(), a(z, {
+              key: C.type === "option" ? String(C.value) : "group-" + C.label
+            }, [
+              C.type === "group" ? (n(), a("li", jn, y(C.label), 1)) : (n(), a("li", {
+                key: 1,
+                role: "option",
+                "aria-selected": k(C.value),
+                class: w([
+                  "flex items-center h-10 px-3 text-sm cursor-pointer transition-colors duration-100",
+                  k(C.value) ? "text-teal-500 bg-teal-50/50" : "text-gray-900 hover:bg-gray-50"
+                ]),
+                onClick: (_) => I(C.value)
+              }, [
+                l("span", Dn, y(C.label), 1),
+                k(C.value) ? (n(), a("svg", Vn, [...L[4] || (L[4] = [
+                  l("polyline", { points: "20 6 9 17 4 12" }, null, -1)
+                ])])) : c("", !0)
+              ], 10, On))
+            ], 64))), 128)),
+            f.value ? c("", !0) : (n(), a("li", Pn, " Keine Ergebnisse "))
+          ], 8, Mn)
+        ])) : c("", !0)
+      ]),
+      e.error ? (n(), a("p", {
+        key: 1,
+        id: `${g}-error`,
+        class: "text-xs text-red-500",
+        role: "alert"
+      }, y(e.error), 9, Rn)) : c("", !0)
+    ], 544));
+  }
+}, Fn = {
+  key: 0,
+  class: "text-red-500 ml-0.5"
+}, qn = { class: "relative" }, Kn = ["disabled", "aria-expanded", "aria-invalid"], Un = {
+  key: 0,
+  class: "absolute top-full left-0 z-dropdown mt-1 bg-white border border-lu-border rounded-card shadow-card p-3 w-[296px]"
+}, Hn = { class: "flex items-center justify-between mb-2" }, Zn = { class: "text-sm font-semibold text-gray-900 capitalize" }, Wn = { class: "grid grid-cols-7 mb-1" }, Gn = { class: "grid grid-cols-7" }, Xn = ["onClick"], Jn = ["id"], Yn = {
+  __name: "LuDatePicker",
+  props: /* @__PURE__ */ te({
+    /** Label text displayed above the input. */
+    label: {
+      type: String,
+      default: ""
+    },
+    /** Placeholder text when no date is selected. */
+    placeholder: {
+      type: String,
+      default: "TT.MM.JJJJ"
+    },
+    /** Error message displayed below the input. Triggers red border styling. */
+    error: {
+      type: String,
+      default: ""
+    },
+    /** Whether the date picker is disabled. */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /** Whether the field is required. */
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    /** ISO date string (YYYY-MM-DD) for range-mode start highlight. */
+    rangeStart: {
+      type: String,
+      default: ""
+    },
+    /** ISO date string (YYYY-MM-DD) for range-mode end highlight. */
+    rangeEnd: {
+      type: String,
+      default: ""
+    }
+  }, {
+    modelValue: { type: String, default: "" },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const r = G(e, "modelValue"), t = e, o = E(!1), s = E(/* @__PURE__ */ new Date()), i = E(null), u = `lu-datepicker-${q()}`;
+    ne(i, () => {
+      o.value = !1;
+    });
+    const g = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
+    function d(_) {
+      if (!_) return null;
+      const D = Ne(_);
+      return isNaN(D.getTime()) ? null : D;
+    }
+    const v = b(() => d(r.value)), m = b(() => d(t.rangeStart)), f = b(() => d(t.rangeEnd)), p = b(() => {
+      const _ = v.value;
+      return _ ? se(_, "dd.MM.yyyy") : "";
+    }), x = b(() => se(s.value, "MMMM yyyy", { locale: We })), S = b(() => {
+      const _ = J(s.value), D = De(s.value), V = Ve(_, { weekStartsOn: 1 }), X = Pe(D, { weekStartsOn: 1 });
+      return Re({ start: V, end: X });
+    }), k = b(() => [
+      "flex items-center w-full h-10 rounded-input border bg-white transition-colors",
+      "duration-150 cursor-pointer",
+      "focus-within:ring-2 focus-within:ring-offset-[2px]",
+      t.error ? "border-red-500 focus-within:ring-red-500" : "border-lu-border focus-within:ring-teal-500 focus-within:border-teal-500",
+      t.disabled ? "opacity-50 cursor-not-allowed bg-gray-50" : ""
+    ]);
+    function h(_) {
+      return !m.value || !f.value ? !1 : Ze(_, {
+        start: m.value,
+        end: f.value
+      });
+    }
+    function I(_) {
+      const D = v.value && Ke(_, v.value), V = Ue(_, s.value), X = He(_), Le = h(_), fe = _.getDay() === 0;
+      return D ? "bg-teal-500 text-white font-medium" : V ? X ? "bg-teal-50 text-teal-700 font-semibold" : Le ? fe ? "bg-teal-50 text-gray-400" : "bg-teal-50 text-gray-900" : fe ? "text-gray-400 hover:bg-gray-50" : "text-gray-900 hover:bg-gray-50" : "text-gray-300";
+    }
+    function F() {
+      t.disabled || (o.value || (s.value = v.value ? J(v.value) : J(/* @__PURE__ */ new Date())), o.value = !o.value);
+    }
+    function N() {
+      s.value = Fe(s.value, 1);
+    }
+    function $() {
+      s.value = qe(s.value, 1);
+    }
+    function L(_) {
+      r.value = se(_, "yyyy-MM-dd"), s.value = J(_), o.value = !1;
+    }
+    function C(_) {
+      _.key === "Escape" && (o.value = !1);
+    }
+    return (_, D) => (n(), a("div", {
+      ref_key: "containerRef",
+      ref: i,
+      class: "flex flex-col gap-1",
+      onKeydown: C
+    }, [
+      e.label ? (n(), a("label", {
+        key: 0,
+        for: u,
+        class: "text-sm font-medium text-gray-700"
+      }, [
+        M(y(e.label) + " ", 1),
+        e.required ? (n(), a("span", Fn, "*")) : c("", !0)
+      ])) : c("", !0),
+      l("div", qn, [
+        l("button", {
+          id: u,
+          type: "button",
+          class: w(k.value),
+          disabled: e.disabled,
+          "aria-expanded": o.value,
+          "aria-invalid": !!e.error || void 0,
+          onClick: F
+        }, [
+          l("span", {
+            class: w(["flex-1 px-3 text-sm text-left truncate", p.value ? "text-gray-900" : "text-gray-400"])
+          }, y(p.value || e.placeholder), 3),
+          D[0] || (D[0] = ze('<span class="pr-3 shrink-0 text-gray-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg></span>', 1))
+        ], 10, Kn),
+        o.value ? (n(), a("div", Un, [
+          l("div", Hn, [
+            l("button", {
+              type: "button",
+              class: "h-8 w-8 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-100 transition-colors duration-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-500",
+              "aria-label": "Vorheriger Monat",
+              onClick: N
+            }, [...D[1] || (D[1] = [
+              l("svg", {
+                xmlns: "http://www.w3.org/2000/svg",
+                class: "h-5 w-5",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "aria-hidden": "true"
+              }, [
+                l("polyline", { points: "15 18 9 12 15 6" })
+              ], -1)
+            ])]),
+            l("span", Zn, y(x.value), 1),
+            l("button", {
+              type: "button",
+              class: "h-8 w-8 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-100 transition-colors duration-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-500",
+              "aria-label": "Naechster Monat",
+              onClick: $
+            }, [...D[2] || (D[2] = [
+              l("svg", {
+                xmlns: "http://www.w3.org/2000/svg",
+                class: "h-5 w-5",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "aria-hidden": "true"
+              }, [
+                l("polyline", { points: "9 6 15 12 9 18" })
+              ], -1)
+            ])])
+          ]),
+          l("div", Wn, [
+            (n(), a(z, null, j(g, (V) => l("span", {
+              key: V,
+              class: "h-8 flex items-center justify-center text-xs font-medium text-gray-500"
+            }, y(V), 1)), 64))
+          ]),
+          l("div", Gn, [
+            (n(!0), a(z, null, j(S.value, (V) => (n(), a("button", {
+              key: V.toISOString(),
+              type: "button",
+              class: w(["h-9 w-9 mx-auto flex items-center justify-center text-sm rounded-full transition-colors duration-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-500", I(V)]),
+              onClick: (X) => L(V)
+            }, y(V.getDate()), 11, Xn))), 128))
+          ])
+        ])) : c("", !0)
+      ]),
+      e.error ? (n(), a("p", {
+        key: 1,
+        id: `${u}-error`,
+        class: "text-xs text-red-500",
+        role: "alert"
+      }, y(e.error), 9, Jn)) : c("", !0)
+    ], 544));
+  }
+}, Qn = { class: "lu-tabs" }, ea = {
+  __name: "LuTabs",
+  props: {
+    modelValue: { type: String, default: "" },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e) {
+    const r = G(e, "modelValue");
+    return Te("lu-tabs", {
+      /** @type {import('vue').ComputedRef<string>} */
+      activeTab: b(() => r.value),
+      /**
+       * Set the active tab (called by LuTab on click).
+       * @param {string} value
+       */
+      setActiveTab(t) {
+        r.value = t;
+      },
+      /** Shared ID prefix for ARIA cross-references. */
+      tabsId: `lu-tabs-${q()}`
+    }), (t, o) => (n(), a("div", Qn, [
+      B(t.$slots, "default")
+    ]));
+  }
+}, ta = {
+  __name: "LuTabList",
+  setup(e) {
+    const r = E(null);
+    function t(o) {
+      var d;
+      const s = r.value;
+      if (!s) return;
+      const i = (
+        /** @type {HTMLElement[]} */
+        [...s.querySelectorAll('[role="tab"]')]
+      );
+      if (i.length === 0) return;
+      const u = i.indexOf(
+        /** @type {HTMLElement} */
+        document.activeElement
+      );
+      if (u === -1) return;
+      let g = null;
+      switch (o.key) {
+        case "ArrowRight":
+          g = (u + 1) % i.length;
+          break;
+        case "ArrowLeft":
+          g = (u - 1 + i.length) % i.length;
+          break;
+        case "Home":
+          g = 0;
+          break;
+        case "End":
+          g = i.length - 1;
+          break;
+        default:
+          return;
+      }
+      o.preventDefault(), (d = i[g]) == null || d.focus();
+    }
+    return (o, s) => (n(), a("div", {
+      ref_key: "tabListRef",
+      ref: r,
+      role: "tablist",
+      class: "flex border-b border-lu-border",
+      onKeydown: t
+    }, [
+      B(o.$slots, "default")
+    ], 544));
+  }
+}, na = ["id", "aria-selected", "aria-controls", "tabindex"], aa = {
+  __name: "LuTab",
+  props: {
+    /**
+     * Unique identifier that links this tab to its corresponding LuTabPanel.
+     */
+    value: {
+      type: String,
+      required: !0
+    }
+  },
+  setup(e) {
+    const r = e, t = he("lu-tabs"), o = b(() => t.activeTab.value === r.value), s = b(() => `${t.tabsId}-tab-${r.value}`), i = b(() => `${t.tabsId}-panel-${r.value}`), u = b(() => [
+      "px-4 py-3 text-sm font-medium transition-colors duration-150 -mb-px",
+      "focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-[-2px]",
+      "cursor-pointer whitespace-nowrap",
+      o.value ? "text-gray-900 border-b-2 border-teal-500" : "text-gray-500 border-b-2 border-transparent hover:text-gray-700"
+    ]);
+    return (g, d) => (n(), a("button", {
+      id: s.value,
+      type: "button",
+      role: "tab",
+      "aria-selected": o.value,
+      "aria-controls": i.value,
+      tabindex: o.value ? 0 : -1,
+      class: w(u.value),
+      onClick: d[0] || (d[0] = (v) => R(t).setActiveTab(e.value))
+    }, [
+      B(g.$slots, "default")
+    ], 10, na));
+  }
+}, ra = ["id", "aria-labelledby"], sa = {
+  __name: "LuTabPanel",
+  props: {
+    /**
+     * Must match the `value` prop of the corresponding LuTab.
+     */
+    value: {
+      type: String,
+      required: !0
+    }
+  },
+  setup(e) {
+    const r = e, t = he("lu-tabs"), o = b(() => t.activeTab.value === r.value), s = b(() => `${t.tabsId}-panel-${r.value}`), i = b(() => `${t.tabsId}-tab-${r.value}`);
+    return (u, g) => o.value ? (n(), a("div", {
+      key: 0,
+      id: s.value,
+      role: "tabpanel",
+      "aria-labelledby": i.value,
+      tabindex: 0
+    }, [
+      B(u.$slots, "default")
+    ], 8, ra)) : c("", !0);
+  }
+}, la = {
+  "aria-label": "Seitennavigation",
+  class: "flex flex-wrap items-center justify-between gap-4"
+}, oa = { class: "flex items-center gap-2 text-sm text-gray-600" }, ia = ["value"], ua = ["value"], da = { class: "flex items-center gap-1" }, ca = ["disabled"], fa = {
+  key: 0,
+  class: "h-8 min-w-[32px] flex items-center justify-center text-sm text-gray-400 select-none",
+  "aria-hidden": "true"
+}, ba = ["aria-current", "aria-label", "onClick"], ga = ["disabled"], ya = { class: "text-sm text-gray-500" }, le = "h-8 min-w-[32px] px-2 flex items-center justify-center text-sm rounded-input transition-colors duration-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-1", va = {
+  __name: "LuPagination",
+  props: {
+    /** Current active page (1-based). */
+    currentPage: {
+      type: Number,
+      required: !0
+    },
+    /** Total number of pages. */
+    totalPages: {
+      type: Number,
+      required: !0
+    },
+    /** Total number of items across all pages. */
+    totalItems: {
+      type: Number,
+      default: 0
+    },
+    /** Number of items shown per page. */
+    itemsPerPage: {
+      type: Number,
+      default: 10
+    }
+  },
+  emits: {
+    /**
+     * Emitted when the user navigates to a different page.
+     * @param {number} page
+     */
+    change: (e) => typeof e == "number",
+    /**
+     * Emitted when the user changes the items-per-page setting.
+     * @param {number} perPage
+     */
+    "change-per-page": (e) => typeof e == "number"
+  },
+  setup(e, { emit: r }) {
+    const t = e, o = r, s = [10, 25, 50], i = b(() => t.currentPage <= 1), u = b(() => t.currentPage >= t.totalPages), g = b(() => {
+      const x = t.totalPages, S = t.currentPage;
+      if (x <= 7)
+        return Array.from({ length: x }, (h, I) => ({ type: "page", value: I + 1 }));
+      const k = [];
+      if (S <= 4) {
+        for (let h = 1; h <= 5; h++) k.push({ type: "page", value: h });
+        k.push({ type: "ellipsis" }), k.push({ type: "page", value: x });
+      } else if (S >= x - 3) {
+        k.push({ type: "page", value: 1 }), k.push({ type: "ellipsis" });
+        for (let h = x - 4; h <= x; h++) k.push({ type: "page", value: h });
+      } else {
+        k.push({ type: "page", value: 1 }), k.push({ type: "ellipsis" });
+        for (let h = S - 1; h <= S + 1; h++) k.push({ type: "page", value: h });
+        k.push({ type: "ellipsis" }), k.push({ type: "page", value: x });
+      }
+      return k;
+    });
+    function d(x) {
+      x < 1 || x > t.totalPages || x === t.currentPage || o("change", x);
+    }
+    function v() {
+      d(t.currentPage - 1);
+    }
+    function m() {
+      d(t.currentPage + 1);
+    }
+    function f(x) {
+      const S = Number(
+        /** @type {HTMLSelectElement} */
+        x.target.value
+      );
+      o("change-per-page", S);
+    }
+    const p = b(() => {
+      if (t.totalItems > 0) {
+        const x = (t.currentPage - 1) * t.itemsPerPage + 1, S = Math.min(t.currentPage * t.itemsPerPage, t.totalItems);
+        return `${x}–${S} von ${t.totalItems} Eintraegen`;
+      }
+      return `Seite ${t.currentPage} von ${t.totalPages}`;
+    });
+    return (x, S) => (n(), a("nav", la, [
+      l("div", oa, [
+        S[0] || (S[0] = l("span", null, "Eintraege pro Seite", -1)),
+        l("select", {
+          value: e.itemsPerPage,
+          class: "lu-pagination-select h-8 pl-2 pr-6 text-sm border border-lu-border rounded-input bg-white text-gray-900 outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500 cursor-pointer appearance-none",
+          onChange: f
+        }, [
+          (n(), a(z, null, j(s, (k) => l("option", {
+            key: k,
+            value: k
+          }, y(k), 9, ua)), 64))
+        ], 40, ia)
+      ]),
+      l("div", da, [
+        l("button", {
+          type: "button",
+          class: w([
+            le,
+            i.value ? "text-gray-300 cursor-not-allowed" : "text-gray-600 hover:bg-gray-100"
+          ]),
+          disabled: i.value,
+          "aria-label": "Vorherige Seite",
+          onClick: v
+        }, [...S[1] || (S[1] = [
+          l("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            class: "h-4 w-4",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "aria-hidden": "true"
+          }, [
+            l("polyline", { points: "15 18 9 12 15 6" })
+          ], -1)
+        ])], 10, ca),
+        (n(!0), a(z, null, j(g.value, (k, h) => (n(), a(z, { key: h }, [
+          k.type === "ellipsis" ? (n(), a("span", fa, " … ")) : (n(), a("button", {
+            key: 1,
+            type: "button",
+            class: w([
+              le,
+              k.value === e.currentPage ? "bg-teal-500 text-white font-medium" : "text-gray-700 hover:bg-gray-100"
+            ]),
+            "aria-current": k.value === e.currentPage ? "page" : void 0,
+            "aria-label": `Seite ${k.value}`,
+            onClick: (I) => d(k.value)
+          }, y(k.value), 11, ba))
+        ], 64))), 128)),
+        l("button", {
+          type: "button",
+          class: w([
+            le,
+            u.value ? "text-gray-300 cursor-not-allowed" : "text-gray-600 hover:bg-gray-100"
+          ]),
+          disabled: u.value,
+          "aria-label": "Naechste Seite",
+          onClick: m
+        }, [...S[2] || (S[2] = [
+          l("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            class: "h-4 w-4",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "aria-hidden": "true"
+          }, [
+            l("polyline", { points: "9 6 15 12 9 18" })
+          ], -1)
+        ])], 10, ga)
+      ]),
+      l("div", ya, y(p.value), 1)
+    ]));
+  }
+}, ma = /* @__PURE__ */ W(va, [["__scopeId", "data-v-5ee36a88"]]), pa = ["checked", "disabled", "value"], ha = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "w-3 h-3 text-white",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "3",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  "aria-hidden": "true"
+}, xa = {
+  key: 1,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "w-3 h-3 text-white",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "3",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  "aria-hidden": "true"
+}, wa = {
+  key: 0,
+  class: "text-sm text-gray-700 select-none"
+}, ka = {
+  __name: "LuCheckbox",
+  props: {
+    /**
+     * Current value – Boolean for single checkbox, Array for multi-select mode.
+     * @type {boolean | Array<string | number>}
+     */
+    modelValue: {
+      type: [Boolean, Array],
+      default: !1
+    },
+    /**
+     * Value used in Array-mode. Each checkbox pushes/removes this value.
+     * @type {string | number}
+     */
+    value: {
+      type: [String, Number],
+      default: void 0
+    },
+    /**
+     * Label text displayed next to the checkbox.
+     */
+    label: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Whether the checkbox is disabled.
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Indeterminate state – shows a dash instead of checkmark.
+     * Useful for "select all" checkboxes when some (but not all) items are selected.
+     */
+    indeterminate: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: r }) {
+    const t = e, o = r, s = `lu-checkbox-${q()}`, i = b(() => Array.isArray(t.modelValue) ? t.modelValue.includes(t.value) : !!t.modelValue);
+    function u() {
+      if (!t.disabled)
+        if (Array.isArray(t.modelValue)) {
+          const d = [...t.modelValue], v = d.indexOf(t.value);
+          v === -1 ? d.push(t.value) : d.splice(v, 1), o("update:modelValue", d);
+        } else
+          o("update:modelValue", !t.modelValue);
+    }
+    const g = b(() => [
+      "relative flex items-center justify-center shrink-0",
+      "w-[18px] h-[18px] rounded-[4px] border-2 transition-colors duration-150",
+      i.value || t.indeterminate ? "bg-teal-500 border-teal-500" : "bg-white border-gray-300",
+      !t.disabled && "cursor-pointer"
+    ]);
+    return (d, v) => (n(), a("label", {
+      for: s,
+      class: w(["inline-flex items-center gap-2", e.disabled ? "opacity-50 cursor-not-allowed pointer-events-none" : "cursor-pointer"])
+    }, [
+      l("input", {
+        id: s,
+        type: "checkbox",
+        class: "sr-only peer",
+        checked: i.value,
+        disabled: e.disabled,
+        value: e.value,
+        onChange: u
+      }, null, 40, pa),
+      l("span", {
+        class: w([g.value, "peer-focus-visible:ring-2 peer-focus-visible:ring-teal-500 peer-focus-visible:ring-offset-[2px]"]),
+        "aria-hidden": "true"
+      }, [
+        i.value && !t.indeterminate ? (n(), a("svg", ha, [...v[0] || (v[0] = [
+          l("polyline", { points: "20 6 9 17 4 12" }, null, -1)
+        ])])) : t.indeterminate ? (n(), a("svg", xa, [...v[1] || (v[1] = [
+          l("line", {
+            x1: "5",
+            y1: "12",
+            x2: "19",
+            y2: "12"
+          }, null, -1)
+        ])])) : c("", !0)
+      ], 2),
+      e.label ? (n(), a("span", wa, y(e.label), 1)) : c("", !0)
+    ], 2));
+  }
+}, $a = ["checked", "disabled", "name", "value"], Sa = {
+  key: 0,
+  class: "w-[10px] h-[10px] rounded-full bg-teal-500",
+  "aria-hidden": "true"
+}, Ca = {
+  key: 0,
+  class: "text-sm text-gray-700 select-none"
+}, La = {
+  __name: "LuRadio",
+  props: {
+    /**
+     * Currently selected value of the radio group.
+     * @type {string | number | boolean}
+     */
+    modelValue: {
+      type: [String, Number, Boolean],
+      default: ""
+    },
+    /**
+     * Value that this radio option represents.
+     * @type {string | number | boolean}
+     */
+    value: {
+      type: [String, Number, Boolean],
+      required: !0
+    },
+    /**
+     * Label text displayed next to the radio button.
+     */
+    label: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Name attribute to group radio buttons together.
+     */
+    name: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Whether the radio button is disabled.
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: r }) {
+    const t = e, o = r, s = `lu-radio-${q()}`, i = b(() => t.modelValue === t.value);
+    function u() {
+      t.disabled || o("update:modelValue", t.value);
+    }
+    const g = b(() => [
+      "relative flex items-center justify-center shrink-0",
+      "w-[18px] h-[18px] rounded-full border-2 transition-colors duration-150",
+      i.value ? "border-teal-500" : "border-gray-300",
+      !t.disabled && "cursor-pointer"
+    ]);
+    return (d, v) => (n(), a("label", {
+      for: s,
+      class: w(["inline-flex items-center gap-2", e.disabled ? "opacity-50 cursor-not-allowed pointer-events-none" : "cursor-pointer"])
+    }, [
+      l("input", {
+        id: s,
+        type: "radio",
+        class: "sr-only peer",
+        checked: i.value,
+        disabled: e.disabled,
+        name: e.name,
+        value: e.value,
+        onChange: u
+      }, null, 40, $a),
+      l("span", {
+        class: w([g.value, "peer-focus-visible:ring-2 peer-focus-visible:ring-teal-500 peer-focus-visible:ring-offset-[2px]"]),
+        "aria-hidden": "true"
+      }, [
+        i.value ? (n(), a("span", Sa)) : c("", !0)
+      ], 2),
+      e.label ? (n(), a("span", Ca, y(e.label), 1)) : c("", !0)
+    ], 2));
+  }
+}, Aa = ["aria-checked", "aria-label", "disabled"], _a = {
+  __name: "LuToggle",
+  props: {
+    /**
+     * Whether the toggle is on (true) or off (false).
+     */
+    modelValue: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Label text displayed next to the toggle.
+     */
+    label: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Whether the toggle is disabled.
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: r }) {
+    const t = e, o = r, s = `lu-toggle-${q()}`;
+    function i() {
+      t.disabled || o("update:modelValue", !t.modelValue);
+    }
+    const u = b(() => [
+      "relative inline-flex shrink-0",
+      "w-[44px] h-[24px] rounded-full transition-colors duration-200",
+      t.modelValue ? "bg-teal-500" : "bg-gray-300",
+      !t.disabled && "cursor-pointer"
+    ]), g = b(() => [
+      "absolute top-[2px] left-[2px]",
+      "w-[20px] h-[20px] rounded-full bg-white shadow-sm",
+      "transition-transform duration-200",
+      t.modelValue ? "translate-x-[20px]" : "translate-x-0"
+    ]);
+    return (d, v) => (n(), a("div", {
+      class: w(["inline-flex items-center gap-2", e.disabled ? "opacity-50 cursor-not-allowed pointer-events-none" : ""])
+    }, [
+      l("button", {
+        id: s,
+        type: "button",
+        role: "switch",
+        "aria-checked": String(e.modelValue),
+        "aria-label": e.label ? void 0 : "Toggle",
+        disabled: e.disabled,
+        class: w([u.value, "focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-[2px]"]),
+        onClick: i
+      }, [
+        l("span", {
+          class: w(g.value),
+          "aria-hidden": "true"
+        }, null, 2)
+      ], 10, Aa),
+      e.label ? (n(), a("label", {
+        key: 0,
+        for: s,
+        class: w(["text-sm text-gray-700 select-none", e.disabled ? "cursor-not-allowed" : "cursor-pointer"])
+      }, y(e.label), 3)) : c("", !0)
+    ], 2));
+  }
+}, Ba = { class: "flex flex-col gap-1.5" }, Ea = ["for"], Ia = {
+  key: 0,
+  class: "text-red-500 ml-0.5"
+}, za = {
+  key: 1,
+  class: "text-xs text-red-500 flex items-center gap-1",
+  role: "alert"
+}, Ta = {
+  key: 2,
+  class: "text-xs text-gray-400"
+}, Ma = {
+  __name: "LuFormGroup",
+  props: {
+    /**
+     * Label text displayed above the slot content.
+     */
+    label: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Error message displayed below the slot content in red.
+     */
+    error: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Hint text displayed below the slot content in gray (hidden when error is shown).
+     */
+    hint: {
+      type: String,
+      default: ""
+    },
+    /**
+     * HTML `for` attribute to associate the label with a specific input element.
+     * Improves accessibility by allowing Screenreaders to link label to input (WCAG 2.1 AA).
+     */
+    for: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Whether a required indicator (*) is shown next to the label.
+     */
+    required: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    return (r, t) => (n(), a("div", Ba, [
+      e.label ? (n(), a("label", {
+        key: 0,
+        for: r.$props.for || void 0,
+        class: "text-xs font-medium text-gray-500 uppercase tracking-wide"
+      }, [
+        M(y(e.label), 1),
+        e.required ? (n(), a("span", Ia, "*")) : c("", !0)
+      ], 8, Ea)) : c("", !0),
+      B(r.$slots, "default"),
+      e.error ? (n(), a("p", za, [
+        A(R(Ge), {
+          size: 12,
+          class: "shrink-0",
+          "aria-hidden": "true"
+        }),
+        M(" " + y(e.error), 1)
+      ])) : c("", !0),
+      e.hint && !e.error ? (n(), a("p", Ta, y(e.hint), 1)) : c("", !0)
+    ]));
+  }
+}, ja = {
+  key: 0,
+  class: "flex items-center justify-center"
+}, Oa = {
+  key: 1,
+  class: "flex items-center"
+}, Da = {
+  class: "flex-1 flex flex-col gap-2 pb-6",
+  "aria-label": "Hauptnavigation"
+}, Va = {
+  key: 0,
+  class: "px-4 py-2 text-xs font-medium tracking-widest uppercase text-gray-400 select-none",
+  "aria-hidden": "true"
+}, Pa = {
+  key: 1,
+  class: "h-4",
+  "aria-hidden": "true"
+}, Ra = ["href", "title", "aria-current", "onClick"], Na = {
+  key: 0,
+  class: "truncate"
+}, Fa = ["aria-label", "title"], qa = {
+  key: 0,
+  class: "ml-2 text-sm"
+}, Ka = {
+  __name: "LuSidebar",
+  props: {
+    /**
+     * Navigation groups with labeled sections.
+     * @type {NavGroup[]}
+     */
+    items: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Controls sidebar visibility on tablet/mobile breakpoints.
+     * @type {boolean}
+     */
+    open: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Controls sidebar collapsed state (icons-only vs full).
+     * Only applies on desktop breakpoint.
+     * @type {boolean}
+     */
+    collapsed: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Current user roles for RBAC-based nav item filtering.
+     * Items with a `roles` array are only shown if at least one role matches.
+     * Items without `roles` are always shown.
+     * @type {string[]}
+     */
+    currentUserRoles: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["update:open", "update:collapsed"],
+  setup(e, { emit: r }) {
+    const t = e, o = r, s = E(!1), i = E(!1), u = E(!1);
+    function g() {
+      const h = window.innerWidth;
+      s.value = h < 768, i.value = h >= 768 && h < 1024;
+    }
+    ve(() => {
+      g(), window.addEventListener("resize", g), document.addEventListener("keydown", k), u.value = !0;
+    }), Me(() => {
+      window.removeEventListener("resize", g), document.removeEventListener("keydown", k);
+    });
+    const d = b(() => !s.value && !i.value && t.collapsed), v = b(
+      () => t.items.map((h) => ({
+        ...h,
+        items: h.items.filter(
+          (I) => {
+            var F;
+            return !((F = I.roles) != null && F.length) || I.roles.some((N) => t.currentUserRoles.includes(N));
+          }
+        )
+      })).filter((h) => h.items.length > 0)
+    ), m = b(() => s.value && t.open), f = b(() => !s.value && !i.value ? !0 : t.open);
+    function p() {
+      o("update:open", !1);
+    }
+    function x() {
+      o("update:collapsed", !t.collapsed);
+    }
+    function S(h) {
+      h.key === "Escape" && p();
+    }
+    function k(h) {
+      h.key === "Escape" && t.open && (s.value || i.value) && p();
+    }
+    return (h, I) => {
+      const F = xe("router-link");
+      return n(), a(z, null, [
+        A(Z, { name: "lu-fade" }, {
+          default: T(() => [
+            m.value ? (n(), a("div", {
+              key: 0,
+              class: "fixed inset-0 bg-black/50 z-sidebar",
+              "aria-hidden": "true",
+              onClick: p,
+              onKeydown: S
+            }, null, 32)) : c("", !0)
+          ]),
+          _: 1
+        }),
+        A(Z, {
+          name: u.value ? "lu-slide" : void 0
+        }, {
+          default: T(() => [
+            ee(l("aside", {
+              class: w(["bg-navy-900 flex flex-col shrink-0 overflow-y-auto overflow-x-hidden transition-[width] duration-200 ease-out", [
+                d.value ? "w-16" : "w-[240px]",
+                s.value || i.value ? "fixed inset-y-0 left-0 z-sidebar w-[240px]" : "relative"
+              ]])
+            }, [
+              l("div", {
+                class: w(["shrink-0", d.value ? "p-3 flex justify-center" : "p-6"])
+              }, [
+                B(h.$slots, "logo", {}, () => [
+                  d.value ? (n(), a("div", ja, [...I[0] || (I[0] = [
+                    l("span", { class: "text-teal-500 font-bold text-xl" }, ".h", -1)
+                  ])])) : (n(), a("div", Oa, [...I[1] || (I[1] = [
+                    l("span", { class: "text-white font-bold text-xl tracking-tight" }, "lumen", -1),
+                    l("span", { class: "text-teal-500 font-bold text-xl" }, ".hr", -1)
+                  ])]))
+                ], !0)
+              ], 2),
+              l("nav", Da, [
+                (n(!0), a(z, null, j(v.value, (N) => (n(), a("div", {
+                  key: N.label
+                }, [
+                  N.label && !d.value ? (n(), a("div", Va, y(N.label), 1)) : N.label && d.value ? (n(), a("div", Pa)) : c("", !0),
+                  (n(!0), a(z, null, j(N.items, ($) => (n(), P(F, {
+                    key: $.to,
+                    to: $.to,
+                    custom: ""
+                  }, {
+                    default: T(({ navigate: L, isExactActive: C, href: _ }) => [
+                      l("a", {
+                        href: _,
+                        title: d.value ? $.label : void 0,
+                        class: w([
+                          "flex items-center h-10 text-sm transition-colors duration-150",
+                          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2 focus-visible:ring-offset-navy-900",
+                          d.value ? "justify-center mx-2 rounded-input" : "gap-3 px-4 mx-2 rounded-input border-l-[3px] pl-[13px]",
+                          C ? d.value ? "text-teal-500 bg-navy-800" : "text-teal-500 bg-navy-800 border-teal-500" : d.value ? "text-gray-400 hover:bg-navy-800 hover:text-white" : "text-gray-400 hover:bg-navy-800 hover:text-white border-transparent"
+                        ]),
+                        "aria-current": C ? "page" : void 0,
+                        onClick: L
+                      }, [
+                        A(O, {
+                          name: $.icon,
+                          size: 20,
+                          class: "shrink-0",
+                          "aria-hidden": "true"
+                        }, null, 8, ["name"]),
+                        d.value ? c("", !0) : (n(), a("span", Na, y($.label), 1))
+                      ], 10, Ra)
+                    ]),
+                    _: 2
+                  }, 1032, ["to"]))), 128))
+                ]))), 128))
+              ]),
+              h.$slots.bottom ? (n(), a("div", {
+                key: 0,
+                class: w(["shrink-0 border-t border-navy-800", d.value ? "p-2" : "p-4"])
+              }, [
+                B(h.$slots, "bottom", {}, void 0, !0)
+              ], 2)) : c("", !0),
+              !s.value && !i.value ? (n(), a("div", {
+                key: 1,
+                class: w(["shrink-0 border-t border-navy-800", d.value ? "p-2" : "p-3"])
+              }, [
+                l("button", {
+                  type: "button",
+                  class: "flex items-center justify-center w-full h-9 rounded-input text-gray-400 hover:bg-navy-800 hover:text-white transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2 focus-visible:ring-offset-navy-900",
+                  "aria-label": d.value ? "Sidebar erweitern" : "Sidebar einklappen",
+                  title: d.value ? "Sidebar erweitern" : "Sidebar einklappen",
+                  onClick: x
+                }, [
+                  A(O, {
+                    name: d.value ? "ChevronsRight" : "ChevronsLeft",
+                    size: 18,
+                    "aria-hidden": "true"
+                  }, null, 8, ["name"]),
+                  d.value ? c("", !0) : (n(), a("span", qa, y("Einklappen")))
+                ], 8, Fa)
+              ], 2)) : c("", !0)
+            ], 2), [
+              [je, f.value]
+            ])
+          ]),
+          _: 3
+        }, 8, ["name"])
+      ], 64);
+    };
+  }
+}, $e = /* @__PURE__ */ W(Ka, [["__scopeId", "data-v-9c5163f7"]]), Ua = { class: "h-16 bg-white border-b border-lu-border flex items-center justify-between px-4 shrink-0 z-header" }, Ha = { class: "flex items-center gap-3" }, Za = { class: "flex items-center gap-2" }, Wa = ["aria-label"], Ga = {
+  class: "absolute -top-0.5 -right-0.5 flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[11px] font-medium text-white bg-amber-500 rounded-full leading-none",
+  "aria-hidden": "true"
+}, Xa = ["aria-label"], Ja = {
+  key: 0,
+  class: "absolute -top-0.5 -right-0.5 flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[11px] font-medium text-white bg-red-500 rounded-full leading-none",
+  "aria-hidden": "true"
+}, Ya = ["aria-label", "aria-expanded"], Qa = { class: "hidden sm:block text-sm font-medium text-gray-700 max-w-[150px] truncate" }, er = {
+  key: 0,
+  class: "absolute right-0 top-full mt-1 w-64 bg-white rounded-card border border-lu-border shadow-card z-dropdown origin-top-right",
+  role: "menu",
+  "aria-orientation": "vertical"
+}, tr = { class: "px-4 py-3 border-b border-lu-border" }, nr = { class: "flex items-center gap-3" }, ar = { class: "min-w-0" }, rr = { class: "text-sm font-semibold text-gray-900 truncate" }, sr = {
+  key: 0,
+  class: "text-xs text-gray-500 truncate"
+}, lr = {
+  key: 0,
+  class: "py-1"
+}, or = ["onClick"], Se = {
+  __name: "LuHeader",
+  props: {
+    /**
+     * Current user information for avatar, name, and role display.
+     * @type {HeaderUser}
+     */
+    user: {
+      type: Object,
+      default: () => ({ name: "Benutzer" })
+    },
+    /**
+     * Number of unread notifications. Displays badge when > 0.
+     * @type {number}
+     */
+    notificationCount: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * Number of pending booking corrections. Displays badge when > 0 (TEAMLEITUNG/HR only).
+     * @type {number}
+     */
+    pendingCorrectionsCount: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * Items to display in the user dropdown menu.
+     * Each item has a label, optional icon, and an action string emitted on click.
+     * @type {UserMenuItem[]}
+     */
+    userMenuItems: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: [
+    "toggle-sidebar",
+    "notifications-click",
+    "corrections-click",
+    "user-menu-action"
+  ],
+  setup(e, { emit: r }) {
+    const t = e, o = r, s = E(!1), i = E(null);
+    ne(i, () => {
+      s.value = !1;
+    });
+    function u() {
+      s.value = !s.value;
+    }
+    function g(f) {
+      s.value = !1, o("user-menu-action", f);
+    }
+    function d(f) {
+      f.key === "Escape" && (s.value = !1);
+    }
+    const v = b(() => t.notificationCount <= 0 ? "" : t.notificationCount > 99 ? "99+" : String(t.notificationCount)), m = b(() => t.notificationCount <= 0 ? "Benachrichtigungen" : `${t.notificationCount} ungelesene Benachrichtigungen`);
+    return (f, p) => (n(), a("header", Ua, [
+      l("div", Ha, [
+        l("button", {
+          type: "button",
+          class: "lg:hidden inline-flex items-center justify-center w-10 h-10 rounded-input text-gray-500 hover:bg-gray-100 hover:text-gray-700 transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2",
+          "aria-label": "Navigation ein-/ausblenden",
+          onClick: p[0] || (p[0] = (x) => o("toggle-sidebar"))
+        }, [
+          A(O, {
+            name: "Menu",
+            size: 20,
+            "aria-hidden": "true"
+          })
+        ]),
+        B(f.$slots, "breadcrumb")
+      ]),
+      l("div", Za, [
+        e.pendingCorrectionsCount > 0 ? (n(), a("button", {
+          key: 0,
+          type: "button",
+          class: "relative inline-flex items-center justify-center w-10 h-10 rounded-input text-gray-500 hover:bg-gray-100 hover:text-gray-700 transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2",
+          "aria-label": `${e.pendingCorrectionsCount} ausstehende Korrekturantraege`,
+          onClick: p[1] || (p[1] = (x) => o("corrections-click"))
+        }, [
+          A(O, {
+            name: "FilePen",
+            size: 20,
+            "aria-hidden": "true"
+          }),
+          l("span", Ga, y(e.pendingCorrectionsCount > 99 ? "99+" : e.pendingCorrectionsCount), 1)
+        ], 8, Wa)) : c("", !0),
+        l("button", {
+          type: "button",
+          class: "relative inline-flex items-center justify-center w-10 h-10 rounded-input text-gray-500 hover:bg-gray-100 hover:text-gray-700 transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2",
+          "aria-label": m.value,
+          onClick: p[2] || (p[2] = (x) => o("notifications-click"))
+        }, [
+          A(O, {
+            name: "Bell",
+            size: 20,
+            "aria-hidden": "true"
+          }),
+          e.notificationCount > 0 ? (n(), a("span", Ja, y(v.value), 1)) : c("", !0)
+        ], 8, Xa),
+        l("div", {
+          ref_key: "userMenuRef",
+          ref: i,
+          class: "relative",
+          onKeydown: d
+        }, [
+          l("button", {
+            type: "button",
+            class: "flex items-center gap-2 px-2 py-1 rounded-input hover:bg-gray-100 transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2",
+            "aria-label": `Benutzermenue fuer ${e.user.name}`,
+            "aria-expanded": s.value,
+            "aria-haspopup": "true",
+            onClick: u
+          }, [
+            A(oe, {
+              name: e.user.name,
+              src: e.user.avatarSrc,
+              size: "sm"
+            }, null, 8, ["name", "src"]),
+            l("span", Qa, y(e.user.name), 1),
+            A(O, {
+              name: "ChevronDown",
+              size: 16,
+              class: w(["hidden sm:block text-gray-400 transition-transform duration-150", { "rotate-180": s.value }]),
+              "aria-hidden": "true"
+            }, null, 8, ["class"])
+          ], 8, Ya),
+          A(Z, {
+            "enter-active-class": "transition ease-out duration-150",
+            "enter-from-class": "opacity-0 scale-95 translate-y-1",
+            "enter-to-class": "opacity-100 scale-100 translate-y-0",
+            "leave-active-class": "transition ease-in duration-100",
+            "leave-from-class": "opacity-100 scale-100 translate-y-0",
+            "leave-to-class": "opacity-0 scale-95 translate-y-1"
+          }, {
+            default: T(() => [
+              s.value ? (n(), a("div", er, [
+                l("div", tr, [
+                  l("div", nr, [
+                    A(oe, {
+                      name: e.user.name,
+                      src: e.user.avatarSrc,
+                      size: "md"
+                    }, null, 8, ["name", "src"]),
+                    l("div", ar, [
+                      l("p", rr, y(e.user.name), 1),
+                      e.user.roleLabel || e.user.role ? (n(), a("p", sr, y(e.user.roleLabel || e.user.role), 1)) : c("", !0)
+                    ])
+                  ])
+                ]),
+                e.userMenuItems.length > 0 ? (n(), a("div", lr, [
+                  (n(!0), a(z, null, j(e.userMenuItems, (x) => (n(), a("button", {
+                    key: x.action,
+                    type: "button",
+                    class: "flex items-center gap-3 w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-gray-900 transition-colors duration-150 focus-visible:outline-none focus-visible:bg-gray-50",
+                    role: "menuitem",
+                    onClick: (S) => g(x.action)
+                  }, [
+                    x.icon ? (n(), P(O, {
+                      key: 0,
+                      name: x.icon,
+                      size: 16,
+                      class: "text-gray-400 shrink-0",
+                      "aria-hidden": "true"
+                    }, null, 8, ["name"])) : c("", !0),
+                    l("span", null, y(x.label), 1)
+                  ], 8, or))), 128))
+                ])) : c("", !0)
+              ])) : c("", !0)
+            ]),
+            _: 1
+          })
+        ], 544)
+      ])
+    ]));
+  }
+}, ir = { class: "flex h-screen overflow-hidden bg-lu-bg" }, ur = { class: "flex flex-col flex-1 overflow-hidden min-w-0" }, dr = { class: "flex-1 overflow-auto bg-lu-bg p-6" }, cr = { class: "max-w-[1440px] mx-auto" }, fr = {
+  __name: "LuAppLayout",
+  props: {
+    /**
+     * Navigation groups passed to LuSidebar.
+     * @type {NavGroup[]}
+     */
+    navItems: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Current user information passed to LuHeader.
+     * @type {{ name: string, role?: string, roleLabel?: string, avatarSrc?: string }}
+     */
+    user: {
+      type: Object,
+      default: () => ({ name: "Benutzer" })
+    },
+    /**
+     * Notification count passed to LuHeader.
+     * @type {number}
+     */
+    notificationCount: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * Current user roles for RBAC-based nav filtering, passed to LuSidebar.
+     * @type {string[]}
+     */
+    currentUserRoles: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Whether the sidebar is collapsed (icons-only mode).
+     * @type {boolean}
+     */
+    sidebarCollapsed: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * User menu items passed to LuHeader.
+     * @type {Array<{ label: string, icon?: string, action: string }>}
+     */
+    userMenuItems: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["notifications-click", "user-menu-action", "update:sidebarCollapsed"],
+  setup(e, { emit: r }) {
+    const t = r, o = E(!1);
+    return (s, i) => (n(), a("div", ir, [
+      A($e, {
+        items: e.navItems,
+        "current-user-roles": e.currentUserRoles,
+        collapsed: e.sidebarCollapsed,
+        open: o.value,
+        "onUpdate:open": i[0] || (i[0] = (u) => o.value = u),
+        "onUpdate:collapsed": i[1] || (i[1] = (u) => t("update:sidebarCollapsed", u))
+      }, Oe({ _: 2 }, [
+        s.$slots["sidebar-logo"] ? {
+          name: "logo",
+          fn: T(() => [
+            B(s.$slots, "sidebar-logo")
+          ]),
+          key: "0"
+        } : void 0,
+        s.$slots["sidebar-bottom"] ? {
+          name: "bottom",
+          fn: T(() => [
+            B(s.$slots, "sidebar-bottom")
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["items", "current-user-roles", "collapsed", "open"]),
+      l("div", ur, [
+        A(Se, {
+          user: e.user,
+          "notification-count": e.notificationCount,
+          "user-menu-items": e.userMenuItems,
+          onToggleSidebar: i[2] || (i[2] = (u) => o.value = !o.value),
+          onNotificationsClick: i[3] || (i[3] = (u) => t("notifications-click")),
+          onUserMenuAction: i[4] || (i[4] = (u) => t("user-menu-action", u))
+        }, {
+          breadcrumb: T(() => [
+            B(s.$slots, "breadcrumb")
+          ]),
+          _: 3
+        }, 8, ["user", "notification-count", "user-menu-items"]),
+        l("main", dr, [
+          l("div", cr, [
+            B(s.$slots, "default")
+          ])
+        ])
+      ])
+    ]));
+  }
+}, br = {
+  "aria-label": "Breadcrumb",
+  class: "flex items-center text-sm"
+}, gr = { class: "flex items-center gap-1" }, yr = {
+  key: 0,
+  class: "text-gray-300 select-none",
+  "aria-hidden": "true"
+}, vr = {
+  key: 1,
+  class: "text-gray-900 font-medium",
+  "aria-current": "page"
+}, mr = {
+  key: 3,
+  class: "text-gray-500"
+}, pr = {
+  __name: "LuBreadcrumb",
+  props: {
+    /**
+     * Breadcrumb items to display. If provided, takes precedence over route.meta.breadcrumb.
+     * @type {BreadcrumbItem[]}
+     */
+    items: {
+      type: Array,
+      default: void 0
+    }
+  },
+  setup(e) {
+    const r = e, t = Qe(), o = b(() => {
+      var i;
+      if (Array.isArray(r.items)) return r.items;
+      const s = (i = t.meta) == null ? void 0 : i.breadcrumb;
+      return Array.isArray(s) ? s : [];
+    });
+    return (s, i) => {
+      const u = xe("router-link");
+      return n(), a("nav", br, [
+        l("ol", gr, [
+          (n(!0), a(z, null, j(o.value, (g, d) => (n(), a("li", {
+            key: d,
+            class: "flex items-center gap-1"
+          }, [
+            d > 0 ? (n(), a("span", yr, "/")) : c("", !0),
+            d === o.value.length - 1 ? (n(), a("span", vr, y(g.label), 1)) : g.to ? (n(), P(u, {
+              key: 2,
+              to: g.to,
+              class: "text-gray-500 transition-colors duration-150 hover:text-teal-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2 rounded-sm"
+            }, {
+              default: T(() => [
+                M(y(g.label), 1)
+              ]),
+              _: 2
+            }, 1032, ["to"])) : (n(), a("span", mr, y(g.label), 1))
+          ]))), 128))
+        ])
+      ]);
+    };
+  }
+}, hr = {
+  key: 0,
+  class: "fixed inset-0 z-modal-backdrop overflow-y-auto"
+}, xr = ["aria-labelledby"], wr = { class: "flex items-center justify-between px-6 py-4 border-b border-lu-border shrink-0" }, kr = ["id"], $r = { class: "flex-1 overflow-y-auto px-6 py-4" }, Sr = {
+  key: 0,
+  class: "shrink-0 px-6 py-4 border-t border-lu-border flex items-center justify-end gap-3"
+}, Cr = /* @__PURE__ */ Object.assign({ name: "LuModal" }, {
+  __name: "LuModal",
+  props: {
+    /** Steuert die Sichtbarkeit des Modals (v-model) */
+    modelValue: {
+      type: Boolean,
+      required: !0
+    },
+    /** Titel im Modal-Header */
+    title: {
+      type: String,
+      default: ""
+    },
+    /** Breite des Dialogs (sm: 400px, md: 560px, lg: 768px, xl: 1024px) */
+    size: {
+      type: String,
+      default: "md",
+      validator: (e) => ["sm", "md", "lg", "xl"].includes(e)
+    },
+    /** Verhindert Schliessen durch Backdrop-Klick */
+    persistent: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: r }) {
+    const t = e, o = r, s = E(null), i = E(""), u = q(), g = {
+      sm: "md:max-w-[400px]",
+      md: "md:max-w-[560px]",
+      lg: "md:max-w-[768px]",
+      xl: "md:max-w-[1024px]"
+    }, d = b(() => g[t.size]);
+    function v() {
+      o("update:modelValue", !1);
+    }
+    function m() {
+      t.persistent || v();
+    }
+    const f = [
+      "a[href]",
+      "button:not([disabled])",
+      "textarea:not([disabled])",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      '[tabindex]:not([tabindex="-1"])'
+    ].join(", ");
+    function p(S) {
+      if (S.key !== "Tab" || !s.value) return;
+      const k = s.value.querySelectorAll(f);
+      if (k.length === 0) return;
+      const h = (
+        /** @type {HTMLElement} */
+        k[0]
+      ), I = (
+        /** @type {HTMLElement} */
+        k[k.length - 1]
+      );
+      S.shiftKey ? (document.activeElement === h || document.activeElement === s.value) && (S.preventDefault(), I.focus()) : document.activeElement === I && (S.preventDefault(), h.focus());
+    }
+    function x(S) {
+      if (S.key === "Escape" && t.modelValue && !t.persistent) {
+        S.preventDefault(), v();
+        return;
+      }
+      p(S);
+    }
+    return ie(
+      () => t.modelValue,
+      (S) => {
+        S ? (i.value = document.body.style.overflow, document.body.style.overflow = "hidden", document.addEventListener("keydown", x), pe(() => {
+          var k;
+          (k = s.value) == null || k.focus();
+        })) : (document.body.style.overflow = i.value, document.removeEventListener("keydown", x));
+      },
+      { immediate: !0 }
+    ), me(() => {
+      document.body.style.overflow = i.value, document.removeEventListener("keydown", x);
+    }), (S, k) => (n(), P(ye, { to: "body" }, [
+      A(Z, { name: "lu-modal" }, {
+        default: T(() => [
+          e.modelValue ? (n(), a("div", hr, [
+            k[0] || (k[0] = l("div", {
+              class: "lu-modal-backdrop fixed inset-0 bg-black/50 pointer-events-none",
+              "aria-hidden": "true"
+            }, null, -1)),
+            l("div", {
+              class: "flex min-h-full items-end justify-center md:items-center md:p-6",
+              onClick: U(m, ["self"])
+            }, [
+              l("div", {
+                ref_key: "dialogRef",
+                ref: s,
+                role: "dialog",
+                "aria-modal": "true",
+                "aria-labelledby": e.title ? R(u) : void 0,
+                tabindex: "-1",
+                class: w([
+                  "lu-modal-dialog relative z-modal flex flex-col bg-lu-surface shadow-xl w-full outline-none",
+                  "rounded-t-card md:rounded-card",
+                  d.value,
+                  "max-h-[90vh]"
+                ])
+              }, [
+                l("div", wr, [
+                  e.title ? (n(), a("h2", {
+                    key: 0,
+                    id: R(u),
+                    class: "text-lg font-semibold text-gray-900 leading-6"
+                  }, y(e.title), 9, kr)) : c("", !0),
+                  l("button", {
+                    type: "button",
+                    class: "ml-auto -mr-1 flex items-center justify-center w-8 h-8 rounded-input text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2",
+                    "aria-label": "Schliessen",
+                    onClick: v
+                  }, [
+                    A(R(Xe), {
+                      size: 20,
+                      "aria-hidden": "true"
+                    })
+                  ])
+                ]),
+                l("div", $r, [
+                  B(S.$slots, "default", {}, void 0, !0)
+                ]),
+                S.$slots.footer ? (n(), a("div", Sr, [
+                  B(S.$slots, "footer", {}, void 0, !0)
+                ])) : c("", !0)
+              ], 10, xr)
+            ])
+          ])) : c("", !0)
+        ]),
+        _: 3
+      })
+    ]));
+  }
+}), Lr = /* @__PURE__ */ W(Cr, [["__scopeId", "data-v-cb36b591"]]), Ar = ["aria-label"], _r = {
+  class: "text-xs font-medium text-gray-500 uppercase tracking-wide truncate",
+  "aria-hidden": "true"
+}, Br = {
+  key: 0,
+  class: "mt-2 flex items-center gap-2"
+}, Er = { class: "sr-only" }, Ir = {
+  key: 1,
+  class: "text-xs text-gray-400"
+}, zr = {
+  __name: "LuKpiCard",
+  props: {
+    /**
+     * Label text displayed above the value.
+     * @type {string}
+     */
+    label: {
+      type: String,
+      required: !0
+    },
+    /**
+     * The KPI value to display prominently.
+     * @type {string | number}
+     */
+    value: {
+      type: [String, Number],
+      required: !0
+    },
+    /**
+     * Status determines the value text color.
+     * @type {'success' | 'warning' | 'error' | 'default'}
+     */
+    status: {
+      type: String,
+      default: "default",
+      validator: (e) => ["success", "warning", "error", "default"].includes(e)
+    },
+    /**
+     * Trend percentage (e.g. +5 or -3). Positive shows TrendingUp, negative shows TrendingDown.
+     * @type {number}
+     */
+    trend: {
+      type: Number,
+      default: void 0
+    },
+    /**
+     * Subtext displayed below the value (e.g. "vs. Vorwoche").
+     * @type {string}
+     */
+    subtext: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(e) {
+    const r = e, t = {
+      success: "text-green-500",
+      warning: "text-amber-500",
+      error: "text-red-500",
+      default: "text-gray-900"
+    }, o = b(
+      () => t[r.status] ?? t.default
+    ), s = b(() => r.trend != null && r.trend !== 0), i = b(() => r.trend != null && r.trend > 0), u = b(() => r.trend != null && r.trend < 0), g = b(() => i.value ? "text-green-500" : "text-red-500"), d = b(() => r.trend == null ? "" : `${r.trend > 0 ? "+" : ""}${r.trend}%`), v = b(() => i.value ? "Aufwaertstrend" : "Abwaertstrend");
+    return (m, f) => (n(), a("div", {
+      class: "bg-white border border-lu-border rounded-card shadow-card p-4",
+      role: "group",
+      "aria-label": e.label
+    }, [
+      l("p", _r, y(e.label), 1),
+      l("p", {
+        class: w(["mt-2 text-[30px] font-bold tabular-nums leading-tight", o.value])
+      }, y(e.value), 3),
+      s.value || e.subtext ? (n(), a("div", Br, [
+        s.value ? (n(), a("span", {
+          key: 0,
+          class: w(["inline-flex items-center gap-1 text-sm font-medium", g.value])
+        }, [
+          l("span", Er, y(v.value), 1),
+          i.value ? (n(), P(R(Je), {
+            key: 0,
+            size: 16,
+            "aria-hidden": "true"
+          })) : c("", !0),
+          u.value ? (n(), P(R(Ye), {
+            key: 1,
+            size: 16,
+            "aria-hidden": "true"
+          })) : c("", !0),
+          M(" " + y(d.value), 1)
+        ], 2)) : c("", !0),
+        e.subtext ? (n(), a("span", Ir, y(e.subtext), 1)) : c("", !0)
+      ])) : c("", !0)
+    ], 8, Ar));
+  }
+}, Tr = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
+function ae(e, r) {
+  const t = { ...e };
+  for (const o of Object.keys(r)) {
+    if (Tr.has(o)) continue;
+    const s = e[o], i = r[o];
+    i !== null && typeof i == "object" && !Array.isArray(i) && s !== null && typeof s == "object" && !Array.isArray(s) ? t[o] = ae(
+      /** @type {Record<string, unknown>} */
+      s,
+      /** @type {Record<string, unknown>} */
+      i
+    ) : t[o] = i;
+  }
+  return t;
+}
+function re(e) {
+  for (const r of Object.values(e))
+    r !== null && typeof r == "object" && !Object.isFrozen(r) && re(
+      /** @type {Record<string, unknown>} */
+      r
+    );
+  return Object.freeze(e);
+}
+const Ce = re({
+  responsive: !0,
+  maintainAspectRatio: !1,
+  interaction: {
+    mode: "nearest",
+    intersect: !1
+  },
+  scales: {
+    x: {
+      grid: {
+        display: !1
+      },
+      ticks: {
+        color: "#64748B",
+        font: {
+          size: 12
+        }
+      }
+    },
+    y: {
+      grid: {
+        color: "#F1F5F9"
+      },
+      ticks: {
+        color: "#64748B",
+        font: {
+          size: 12
+        }
+      }
+    }
+  },
+  plugins: {
+    legend: {
+      display: !1
+    },
+    tooltip: {
+      backgroundColor: "#0B1929",
+      titleFont: { size: 13 },
+      bodyFont: { size: 12 },
+      cornerRadius: 6,
+      padding: 10
+    }
+  }
+}), Mr = re({
+  borderColor: "#00BFA6",
+  backgroundColor: "rgba(0, 191, 166, 0.1)",
+  pointBackgroundColor: "#00BFA6",
+  pointBorderColor: "#ffffff",
+  pointRadius: 3,
+  pointHoverRadius: 5,
+  borderWidth: 2,
+  tension: 0.3
+}), jr = re({
+  backgroundColor: "#00BFA6",
+  borderRadius: 4
+}), Or = ["aria-label"], Dr = {
+  __name: "LuLineChart",
+  props: {
+    /**
+     * Chart.js data object with labels and datasets.
+     * @type {import('chart.js').ChartData<'line'>}
+     */
+    data: {
+      type: Object,
+      required: !0
+    },
+    /**
+     * Chart.js options (deep-merged with defaults).
+     * @type {import('chart.js').ChartOptions<'line'>}
+     */
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * CSS height for the chart container.
+     * @type {string}
+     */
+    height: {
+      type: String,
+      default: "100%"
+    },
+    /**
+     * Accessible label for the chart (used as aria-label on the container).
+     * @type {string}
+     */
+    ariaLabel: {
+      type: String,
+      default: "Liniendiagramm"
+    }
+  },
+  setup(e) {
+    ue.register(we, ke, at, rt, de, ce, st);
+    const r = e, t = b(
+      () => (
+        /** @type {import('chart.js').ChartOptions<'line'>} */
+        ae(Ce, r.options)
+      )
+    ), o = b(() => {
+      const s = (r.data.datasets ?? []).map((i) => ({
+        ...Mr,
+        ...i
+      }));
+      return { ...r.data, datasets: s };
+    });
+    return (s, i) => (n(), a("div", {
+      style: H({ height: e.height, width: "100%", position: "relative" }),
+      role: "img",
+      "aria-label": e.ariaLabel
+    }, [
+      A(R(et), {
+        data: o.value,
+        options: t.value
+      }, null, 8, ["data", "options"])
+    ], 12, Or));
+  }
+}, Vr = ["aria-label"], Pr = {
+  __name: "LuBarChart",
+  props: {
+    /**
+     * Chart.js data object with labels and datasets.
+     * Datasets without explicit backgroundColor will default to teal-500 (#00BFA6).
+     * @type {import('chart.js').ChartData<'bar'>}
+     */
+    data: {
+      type: Object,
+      required: !0
+    },
+    /**
+     * Chart.js options (deep-merged with defaults).
+     * @type {import('chart.js').ChartOptions<'bar'>}
+     */
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * CSS height for the chart container.
+     * @type {string}
+     */
+    height: {
+      type: String,
+      default: "100%"
+    },
+    /**
+     * Accessible label for the chart (used as aria-label on the container).
+     * @type {string}
+     */
+    ariaLabel: {
+      type: String,
+      default: "Balkendiagramm"
+    }
+  },
+  setup(e) {
+    ue.register(we, ke, lt, de, ce);
+    const r = e, t = b(
+      () => (
+        /** @type {import('chart.js').ChartOptions<'bar'>} */
+        ae(Ce, r.options)
+      )
+    ), o = b(() => {
+      const s = (r.data.datasets ?? []).map((i) => ({
+        ...jr,
+        ...i
+      }));
+      return { ...r.data, datasets: s };
+    });
+    return (s, i) => (n(), a("div", {
+      style: H({ height: e.height, width: "100%", position: "relative" }),
+      role: "img",
+      "aria-label": e.ariaLabel
+    }, [
+      A(R(tt), {
+        data: o.value,
+        options: t.value
+      }, null, 8, ["data", "options"])
+    ], 12, Vr));
+  }
+}, Rr = ["aria-label"], Nr = {
+  responsive: !0,
+  maintainAspectRatio: !1,
+  cutout: "65%",
+  // Donut-style (0% = pie)
+  plugins: {
+    legend: {
+      display: !0,
+      position: "bottom",
+      labels: {
+        usePointStyle: !0,
+        pointStyle: "circle",
+        padding: 16,
+        font: {
+          size: 12,
+          family: "Inter, system-ui, sans-serif"
+        },
+        color: "#475569"
+      }
+    },
+    tooltip: {
+      backgroundColor: "#0B1929",
+      titleFont: { size: 13, family: "Inter, system-ui, sans-serif" },
+      bodyFont: { size: 12, family: "Inter, system-ui, sans-serif" },
+      cornerRadius: 6,
+      padding: 10,
+      callbacks: {
+        label: function(e) {
+          const r = e.label || "", t = e.parsed || 0, o = e.dataset.data.reduce((i, u) => i + u, 0), s = o > 0 ? (t / o * 100).toFixed(1) : 0;
+          return `${r}: ${t} (${s}%)`;
+        }
+      }
+    },
+    title: {
+      display: !1
+    }
+  }
+}, Fr = {
+  __name: "LuDonutChart",
+  props: {
+    /**
+     * Chart.js data object with labels and datasets.
+     * Datasets without explicit backgroundColor will use default palette.
+     * @type {import('chart.js').ChartData<'doughnut'>}
+     */
+    data: {
+      type: Object,
+      required: !0
+    },
+    /**
+     * Chart.js options (deep-merged with defaults).
+     * @type {import('chart.js').ChartOptions<'doughnut'>}
+     */
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * CSS height for the chart container.
+     * @type {string}
+     */
+    height: {
+      type: String,
+      default: "300px"
+    },
+    /**
+     * Accessible label for the chart (used as aria-label on the container).
+     * @type {string}
+     */
+    ariaLabel: {
+      type: String,
+      default: "Kreisdiagramm"
+    }
+  },
+  setup(e) {
+    ue.register(ot, de, ce, it);
+    const r = e, t = b(
+      () => (
+        /** @type {import('chart.js').ChartOptions<'doughnut'>} */
+        ae(Nr, r.options)
+      )
+    ), o = b(() => {
+      const i = (r.data.datasets ?? []).map((u) => {
+        var g;
+        if (!u.backgroundColor) {
+          const d = ((g = u.data) == null ? void 0 : g.length) || 0;
+          u.backgroundColor = s(d);
+        }
+        return u;
+      });
+      return { ...r.data, datasets: i };
+    });
+    function s(i) {
+      return [
+        "#00BFA6",
+        // teal-500 - primary
+        "#0EA5E9",
+        // sky-500 - secondary
+        "#8B5CF6",
+        // violet-500 - accent
+        "#F59E0B",
+        // amber-500 - warning
+        "#EF4444",
+        // red-500 - danger
+        "#10B981",
+        // emerald-500 - success
+        "#6366F1",
+        // indigo-500
+        "#EC4899",
+        // pink-500
+        "#14B8A6",
+        // teal-500 variant
+        "#F97316"
+        // orange-500
+      ].slice(0, i);
+    }
+    return (i, u) => (n(), a("div", {
+      style: H({ height: e.height, width: "100%", position: "relative" }),
+      role: "img",
+      "aria-label": e.ariaLabel
+    }, [
+      A(R(nt), {
+        data: o.value,
+        options: t.value
+      }, null, 8, ["data", "options"])
+    ], 12, Rr));
+  }
+}, qr = ["aria-expanded"], Kr = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-4 w-4 shrink-0",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  "aria-hidden": "true"
+}, Ur = {
+  key: 0,
+  class: "absolute right-0 top-full z-dropdown mt-1 min-w-[160px] bg-white border border-lu-border rounded-card shadow-card py-1",
+  role: "menu"
+}, Hr = {
+  key: 0,
+  class: "my-1 border-t border-lu-border",
+  role: "separator"
+}, Zr = ["disabled", "onClick"], Wr = {
+  key: 0,
+  class: "shrink-0 text-gray-400",
+  "aria-hidden": "true"
+}, Gr = ["innerHTML"], Xr = {
+  key: 1,
+  class: "ml-auto text-xs text-gray-400"
+}, Jr = {
+  __name: "LuDropdown",
+  props: {
+    /**
+     * Button label displayed in the trigger.
+     * @type {string}
+     */
+    label: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Menu options.
+     * @type {Array<{value: string, label: string, description?: string, disabled?: boolean}>}
+     */
+    options: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Icon displayed before the label in the trigger button.
+     * Accepts an SVG string or Vue component.
+     * @type {string | object}
+     */
+    icon: {
+      type: [String, Object],
+      default: null
+    },
+    /**
+     * Button variant: 'primary' | 'secondary' | 'ghost'.
+     * @type {string}
+     */
+    variant: {
+      type: String,
+      default: "secondary",
+      validator: (e) => ["primary", "secondary", "ghost"].includes(e)
+    },
+    /**
+     * Button size: 'sm' | 'md' | 'lg'.
+     * @type {string}
+     */
+    size: {
+      type: String,
+      default: "sm",
+      validator: (e) => ["sm", "md", "lg"].includes(e)
+    }
+  },
+  emits: ["select"],
+  setup(e, { emit: r }) {
+    const t = e, o = r, s = E(!1), i = E(null);
+    ne(i, () => {
+      s.value = !1;
+    });
+    function u() {
+      s.value = !s.value;
+    }
+    function g(m) {
+      m.disabled || (o("select", m.value), s.value = !1);
+    }
+    const d = {
+      primary: "border-teal-600 bg-teal-600 text-white hover:bg-teal-700 focus-visible:ring-teal-500",
+      secondary: "border-lu-border bg-white text-gray-700 hover:bg-gray-50 focus-visible:ring-teal-500",
+      ghost: "border-transparent bg-transparent text-gray-600 hover:bg-gray-100 focus-visible:ring-teal-500"
+    }, v = {
+      sm: "px-3 py-1.5 text-sm",
+      md: "px-4 py-2 text-sm",
+      lg: "px-4 py-2.5 text-base"
+    };
+    return (m, f) => (n(), a("div", {
+      ref_key: "triggerRef",
+      ref: i,
+      class: "relative inline-flex"
+    }, [
+      l("button", {
+        type: "button",
+        class: w([
+          "inline-flex items-center gap-1.5 border rounded-button font-medium transition-colors",
+          "duration-150 focus-visible:ring-2 focus-visible:ring-offset-[2px] focus-visible:outline-none",
+          d[t.variant] ?? d.secondary,
+          v[t.size] ?? v.sm
+        ]),
+        "aria-expanded": s.value,
+        "aria-haspopup": "menu",
+        onClick: u
+      }, [
+        t.icon ? c("", !0) : (n(), a("svg", Kr, [...f[0] || (f[0] = [
+          l("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }, null, -1),
+          l("polyline", { points: "7 10 12 15 17 10" }, null, -1),
+          l("line", {
+            x1: "12",
+            y1: "15",
+            x2: "12",
+            y2: "3"
+          }, null, -1)
+        ])])),
+        l("span", null, y(t.label), 1),
+        (n(), a("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          class: w(["h-3.5 w-3.5 shrink-0 transition-transform duration-150", s.value ? "rotate-180" : ""]),
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "aria-hidden": "true"
+        }, [...f[1] || (f[1] = [
+          l("polyline", { points: "6 9 12 15 18 9" }, null, -1)
+        ])], 2))
+      ], 10, qr),
+      A(Z, {
+        "enter-active-class": "transition ease-out duration-100",
+        "enter-from-class": "transform opacity-0 scale-95",
+        "enter-to-class": "transform opacity-100 scale-100",
+        "leave-active-class": "transition ease-in duration-75",
+        "leave-from-class": "transform opacity-100 scale-100",
+        "leave-to-class": "transform opacity-0 scale-95"
+      }, {
+        default: T(() => [
+          s.value ? (n(), a("div", Ur, [
+            (n(!0), a(z, null, j(t.options, (p) => (n(), a(z, {
+              key: p.value
+            }, [
+              p.divider ? (n(), a("div", Hr)) : (n(), a("button", {
+                key: 1,
+                type: "button",
+                class: w([
+                  "w-full flex items-center gap-2 px-4 py-2 text-sm text-left transition-colors duration-100 focus-visible:outline-none focus-visible:bg-gray-50",
+                  p.disabled ? "text-gray-300 cursor-not-allowed" : "text-gray-700 hover:bg-gray-50 active:bg-gray-100"
+                ]),
+                disabled: p.disabled,
+                role: "menuitem",
+                onClick: (x) => g(p)
+              }, [
+                p.icon ? (n(), a("span", Wr, [
+                  l("span", {
+                    innerHTML: p.icon
+                  }, null, 8, Gr)
+                ])) : c("", !0),
+                l("span", {
+                  class: w(p.disabled ? "opacity-60" : "")
+                }, y(p.label), 3),
+                p.description ? (n(), a("span", Xr, y(p.description), 1)) : c("", !0)
+              ], 10, Zr))
+            ], 64))), 128))
+          ])) : c("", !0)
+        ]),
+        _: 1
+      })
+    ], 512));
+  }
+}, Yr = {
+  key: 0,
+  class: "lu-action-bar fixed bottom-0 left-0 right-0 z-action-bar",
+  role: "region",
+  "aria-label": "Massenauswahl-Aktionen"
+}, Qr = {
+  class: "lu-action-bar-content bg-gray-900 text-white px-4 py-3 sm:px-6",
+  role: "toolbar",
+  "aria-label": "Ausgewählte Elemente Aktionen"
+}, es = { class: "max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-3" }, ts = { class: "flex items-center gap-3 w-full sm:w-auto" }, ns = { class: "text-sm font-medium text-gray-100 whitespace-nowrap" }, as = { class: "flex items-center gap-2 w-full sm:w-auto justify-end" }, rs = /* @__PURE__ */ Object.assign({ name: "LuActionBar" }, {
+  __name: "LuActionBar",
+  props: {
+    /**
+     * Anzahl ausgewählter Elemente.
+     */
+    selectedCount: {
+      type: Number,
+      required: !0
+    },
+    /**
+     * Ob sich die Aktion im Ladezustand befindet.
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Ob der Lösch-Button angezeigt werden soll.
+     */
+    showDelete: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Ob der Export-Button angezeigt werden soll.
+     */
+    showExport: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Ob der Status-Button angezeigt werden soll.
+     */
+    showStatus: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Ob der Abteilung-Button angezeigt werden soll.
+     */
+    showDepartment: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: [
+    "cancel",
+    "action-status",
+    "action-department",
+    "action-export",
+    "action-delete"
+  ],
+  setup(e, { emit: r }) {
+    const t = e, o = r, s = b(() => `${t.selectedCount} ausgewählt`);
+    return (i, u) => (n(), P(Z, { name: "lu-action-bar" }, {
+      default: T(() => [
+        e.selectedCount > 0 ? (n(), a("div", Yr, [
+          u[10] || (u[10] = l("div", { class: "lu-action-bar-backdrop h-4 bg-gradient-to-t from-gray-900/10 to-transparent" }, null, -1)),
+          l("div", Qr, [
+            l("div", es, [
+              l("div", ts, [
+                l("span", ns, y(s.value), 1),
+                A(K, {
+                  variant: "ghost",
+                  size: "sm",
+                  disabled: e.loading,
+                  onClick: u[0] || (u[0] = (g) => o("cancel")),
+                  class: "text-gray-300 hover:text-white hover:bg-white/10"
+                }, {
+                  default: T(() => [...u[5] || (u[5] = [
+                    M(" Abbrechen ", -1)
+                  ])]),
+                  _: 1
+                }, 8, ["disabled"])
+              ]),
+              l("div", as, [
+                e.showStatus ? (n(), P(K, {
+                  key: 0,
+                  variant: "secondary",
+                  size: "sm",
+                  disabled: e.loading,
+                  onClick: u[1] || (u[1] = (g) => o("action-status"))
+                }, {
+                  "icon-left": T(() => [
+                    A(O, {
+                      name: "CircleDot",
+                      size: 16
+                    })
+                  ]),
+                  default: T(() => [
+                    u[6] || (u[6] = M(" Status ", -1))
+                  ]),
+                  _: 1
+                }, 8, ["disabled"])) : c("", !0),
+                e.showDepartment ? (n(), P(K, {
+                  key: 1,
+                  variant: "secondary",
+                  size: "sm",
+                  disabled: e.loading,
+                  onClick: u[2] || (u[2] = (g) => o("action-department"))
+                }, {
+                  "icon-left": T(() => [
+                    A(O, {
+                      name: "Building2",
+                      size: 16
+                    })
+                  ]),
+                  default: T(() => [
+                    u[7] || (u[7] = M(" Abteilung ", -1))
+                  ]),
+                  _: 1
+                }, 8, ["disabled"])) : c("", !0),
+                e.showExport ? (n(), P(K, {
+                  key: 2,
+                  variant: "secondary",
+                  size: "sm",
+                  disabled: e.loading,
+                  onClick: u[3] || (u[3] = (g) => o("action-export"))
+                }, {
+                  "icon-left": T(() => [
+                    A(O, {
+                      name: "Download",
+                      size: 16
+                    })
+                  ]),
+                  default: T(() => [
+                    u[8] || (u[8] = M(" Export ", -1))
+                  ]),
+                  _: 1
+                }, 8, ["disabled"])) : c("", !0),
+                e.showDelete ? (n(), P(K, {
+                  key: 3,
+                  variant: "danger",
+                  size: "sm",
+                  disabled: e.loading,
+                  onClick: u[4] || (u[4] = (g) => o("action-delete"))
+                }, {
+                  "icon-left": T(() => [
+                    A(O, {
+                      name: "Trash2",
+                      size: 16
+                    })
+                  ]),
+                  default: T(() => [
+                    u[9] || (u[9] = M(" Löschen ", -1))
+                  ]),
+                  _: 1
+                }, 8, ["disabled"])) : c("", !0),
+                B(i.$slots, "actions", {}, void 0, !0)
+              ])
+            ])
+          ])
+        ])) : c("", !0)
+      ]),
+      _: 3
+    }));
+  }
+}), ss = /* @__PURE__ */ W(rs, [["__scopeId", "data-v-25637a88"]]);
+function gs(e = !1) {
+  const r = E(e);
+  function t() {
+    r.value = !0;
+  }
+  function o() {
+    r.value = !1;
+  }
+  function s() {
+    r.value = !r.value;
+  }
+  return { isOpen: r, open: t, close: o, toggle: s };
+}
+const ls = {
+  LuButton: K,
+  LuInput: xt,
+  LuTextarea: Lt,
+  LuCard: Pt,
+  LuTable: Qt,
+  LuBadge: en,
+  LuIcon: O,
+  LuAvatar: oe,
+  LuToast: bn,
+  LuAlert: vn,
+  LuSkeleton: pn,
+  LuEmptyState: $n,
+  LuSelect: Nn,
+  LuDatePicker: Yn,
+  LuTabs: ea,
+  LuTabList: ta,
+  LuTab: aa,
+  LuTabPanel: sa,
+  LuPagination: ma,
+  LuCheckbox: ka,
+  LuRadio: La,
+  LuToggle: _a,
+  LuFormGroup: Ma,
+  LuAppLayout: fr,
+  LuSidebar: $e,
+  LuHeader: Se,
+  LuBreadcrumb: pr,
+  LuModal: Lr,
+  LuKpiCard: zr,
+  LuLineChart: Dr,
+  LuBarChart: Pr,
+  LuDonutChart: Fr,
+  LuDropdown: Jr,
+  LuActionBar: ss
+}, ys = {
+  /**
+   * @param {import('vue').App} app
+   */
+  install(e) {
+    for (const [r, t] of Object.entries(ls))
+      e.component(r, t);
+  }
+};
+export {
+  ss as LuActionBar,
+  vn as LuAlert,
+  fr as LuAppLayout,
+  oe as LuAvatar,
+  en as LuBadge,
+  Pr as LuBarChart,
+  pr as LuBreadcrumb,
+  K as LuButton,
+  Pt as LuCard,
+  ka as LuCheckbox,
+  Yn as LuDatePicker,
+  Fr as LuDonutChart,
+  Jr as LuDropdown,
+  $n as LuEmptyState,
+  Ma as LuFormGroup,
+  Se as LuHeader,
+  O as LuIcon,
+  xt as LuInput,
+  zr as LuKpiCard,
+  Dr as LuLineChart,
+  Lr as LuModal,
+  ma as LuPagination,
+  La as LuRadio,
+  Nn as LuSelect,
+  $e as LuSidebar,
+  pn as LuSkeleton,
+  aa as LuTab,
+  ta as LuTabList,
+  sa as LuTabPanel,
+  Qt as LuTable,
+  ea as LuTabs,
+  Lt as LuTextarea,
+  bn as LuToast,
+  _a as LuToggle,
+  jr as barDatasetDefaults,
+  Ce as baseChartOptions,
+  ae as deepMerge,
+  ys as default,
+  Mr as lineDatasetDefaults,
+  ne as useClickOutside,
+  gs as useModal,
+  sn as useToast
+};