@ramme-io/ui 4.1.1 → 4.2.0

package/dist/components/ai/StockChart/StockChart.js

@@ -1,9 +1,9 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import _ from "react";
 import { ResponsiveContainer as F, ComposedChart as W, CartesianGrid as K, XAxis as U, YAxis as A, Tooltip as $, Legend as j, Line as S, Bar as z } from "recharts";
 import { Card as E, CardHeader as H, CardTitle as L, CardContent as V } from "../../layout/Card.js";
 import { useChartTheme as Y } from "../../../lib/hooks/useChartTheme.js";
-function G(s, p, C) {
+function G(a, p, C) {
   const N = Date.now(), M = p && Array.isArray(p) && p.length > 0 ? p : ["price", "volume"], c = {
     "1D": { duration: 6.5 * 60 * 60 * 1e3, points: 78, basePrice: 150 },
     // 5-minute intervals (market hours)
@@ -13,30 +13,30 @@ function G(s, p, C) {
     // Daily close
     "1Y": { duration: 365 * 24 * 60 * 60 * 1e3, points: 52, basePrice: 100 }
     // Weekly close
-  }, g = c[s] || c["1M"], { duration: l, points: h, basePrice: r } = g, o = l / h, x = [];
+  }, g = c[a] || c["1M"], { duration: l, points: u, basePrice: r } = g, o = l / u, x = [];
   let n = r;
-  const u = [];
-  for (let d = 0; d < h; d++) {
+  const h = [];
+  for (let d = 0; d < u; d++) {
     const v = N - l + d * o, m = {
       timestamp: new Date(v).toLocaleString("en-US", {
-        ...s === "1D" && { hour: "2-digit", minute: "2-digit" },
-        ...s === "1W" && { weekday: "short", hour: "2-digit" },
-        ...s === "1M" && { month: "short", day: "numeric" },
-        ...s === "1Y" && { month: "short", year: "2-digit" }
+        ...a === "1D" && { hour: "2-digit", minute: "2-digit" },
+        ...a === "1W" && { weekday: "short", hour: "2-digit" },
+        ...a === "1M" && { month: "short", day: "numeric" },
+        ...a === "1Y" && { month: "short", year: "2-digit" }
       })
     };
     M.forEach((i) => {
       switch (i) {
         case "price":
-          const P = r * 0.02, y = 1e-4 * r, k = (Math.random() - 0.48) * P + y;
-          n = Math.max(n + k, r * 0.7), u.push(n), m[i] = Number(n.toFixed(2));
+          const P = r * 0.02, y = 1e-4 * r, b = (Math.random() - 0.48) * P + y;
+          n = Math.max(n + b, r * 0.7), h.push(n), m[i] = Number(n.toFixed(2));
           break;
         case "volume":
           const t = 1e6, f = Math.random() > 0.7 ? Math.random() * 2 : 1;
           m[i] = Math.round((t + Math.random() * t * 2) * f);
           break;
         case "moving_average":
-          const w = Math.min(20, d + 1), D = u.slice(-w).reduce((I, T) => I + T, 0) / w;
+          const w = Math.min(20, d + 1), D = h.slice(-w).reduce((I, T) => I + T, 0) / w;
           m[i] = Number(D.toFixed(2));
           break;
         default:
@@ -46,7 +46,7 @@ function G(s, p, C) {
   }
   return x;
 }
-const b = {
+const k = {
   price: { label: "Price", unit: "USD", color: "#10b981" },
   // Emerald/green
   volume: { label: "Volume", unit: "shares", color: "#f59e0b" },
@@ -54,16 +54,16 @@ const b = {
   moving_average: { label: "MA(20)", unit: "", color: "#ef4444" }
   // Red
 }, Q = ({
-  params: s,
+  params: a,
   title: p,
   data: C
 }) => {
-  var y, k;
-  const { ticker: N, timeRange: M, metrics: c } = s, { textColor: g, gridColor: l } = Y(), h = N || s.symbol || "UNKNOWN", r = M || "1M", o = c && Array.isArray(c) && c.length > 0 ? c : ["price", "volume"], x = _.useMemo(
+  var y, b;
+  const { ticker: N, timeRange: M, metrics: c } = a, { textColor: g, gridColor: l } = Y(), u = N || a.symbol || "UNKNOWN", r = M || "1M", o = c && Array.isArray(c) && c.length > 0 ? c : ["price", "volume"], x = _.useMemo(
     () => {
       const t = C || G(r, o);
       return console.log("[StockChart] Data generated:", {
-        ticker: h,
+        ticker: u,
         timeRange: r,
         metrics: o,
         dataPoints: t.length,
@@ -71,20 +71,20 @@ const b = {
         lastPoint: t[t.length - 1]
       }), t;
     },
-    [C, r, o, h]
-  ), n = x.filter((t) => t.price !== void 0), u = ((y = n[0]) == null ? void 0 : y.price) || 0, d = ((k = n[n.length - 1]) == null ? void 0 : k.price) || 0, v = d - u, m = u > 0 ? (v / u * 100).toFixed(2) : "0.00", i = v >= 0, P = p || `${h.toUpperCase()} - ${r}`;
-  return /* @__PURE__ */ a(E, { className: "w-full max-w-2xl shadow-lg border-primary/20", children: [
-    /* @__PURE__ */ e(H, { className: "pb-2", children: /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
+    [C, r, o, u]
+  ), n = x.filter((t) => t.price !== void 0), h = ((y = n[0]) == null ? void 0 : y.price) || 0, d = ((b = n[n.length - 1]) == null ? void 0 : b.price) || 0, v = d - h, m = h > 0 ? (v / h * 100).toFixed(2) : "0.00", i = v >= 0, P = p || `${u.toUpperCase()} - ${r}`;
+  return /* @__PURE__ */ s(E, { className: "w-full max-w-2xl shadow-lg border-primary/20", children: [
+    /* @__PURE__ */ e(H, { className: "pb-2", children: /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ e(L, { className: "text-sm font-medium text-foreground/80", children: P }),
-      o.includes("price") && /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ a("span", { className: "text-base font-semibold", children: [
+      o.includes("price") && /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ s("span", { className: "text-base font-semibold", children: [
           "$",
           d.toFixed(2)
         ] }),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ s(
           "span",
           {
-            className: `text-xs font-medium ${i ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400"}`,
+            className: `text-xs font-medium ${i ? "text-success-strong" : "text-destructive-strong"}`,
             children: [
               i ? "+" : "",
               v.toFixed(2),
@@ -97,8 +97,8 @@ const b = {
         )
       ] })
     ] }) }),
-    /* @__PURE__ */ a(V, { className: "pt-0", children: [
-      /* @__PURE__ */ e("div", { className: "h-64 w-full bg-background", style: { minHeight: "256px", minWidth: "350px" }, children: /* @__PURE__ */ e(F, { width: "100%", height: 256, children: /* @__PURE__ */ a(W, { data: x, margin: { top: 5, right: 20, bottom: 5, left: 0 }, children: [
+    /* @__PURE__ */ s(V, { className: "pt-0", children: [
+      /* @__PURE__ */ e("div", { className: "h-64 w-full bg-background", style: { minHeight: "256px", minWidth: "350px" }, children: /* @__PURE__ */ e(F, { width: "100%", height: 256, children: /* @__PURE__ */ s(W, { data: x, margin: { top: 5, right: 20, bottom: 5, left: 0 }, children: [
         /* @__PURE__ */ e(K, { strokeDasharray: "3 3", stroke: l, opacity: 0.3 }),
         /* @__PURE__ */ e(
           U,
@@ -136,7 +136,7 @@ const b = {
             yAxisId: "price",
             type: "monotone",
             dataKey: "price",
-            stroke: b.price.color,
+            stroke: k.price.color,
             strokeWidth: 2,
             dot: !1,
             name: "Price (USD)"
@@ -148,7 +148,7 @@ const b = {
             yAxisId: "price",
             type: "monotone",
             dataKey: "moving_average",
-            stroke: b.moving_average.color,
+            stroke: k.moving_average.color,
             strokeWidth: 2,
             dot: !1,
             name: "MA(20)",
@@ -160,15 +160,15 @@ const b = {
           {
             yAxisId: "volume",
             dataKey: "volume",
-            fill: b.volume.color,
+            fill: k.volume.color,
             opacity: 0.6,
             name: "Volume"
           }
         )
       ] }) }) }),
       /* @__PURE__ */ e("div", { className: "mt-3 flex flex-wrap gap-2", children: o.map((t) => {
-        const f = b[t];
-        return /* @__PURE__ */ a(
+        const f = k[t];
+        return /* @__PURE__ */ s(
           "div",
           {
             className: "inline-flex items-center gap-1.5 rounded-full bg-muted/50 px-2.5 py-1 text-xs",
@@ -181,7 +181,7 @@ const b = {
                 }
               ),
               /* @__PURE__ */ e("span", { className: "font-medium", children: f.label }),
-              f.unit && /* @__PURE__ */ a("span", { className: "text-muted-foreground", children: [
+              f.unit && /* @__PURE__ */ s("span", { className: "text-muted-foreground", children: [
                 "(",
                 f.unit,
                 ")"

package/dist/components/data-display/StatusBadge.d.ts

@@ -4,8 +4,9 @@ export interface StatusBadgeProps {
     /** One of the 5 built-in presets. Omit and use `color` + `label` for a
      * status this preset set doesn't cover (e.g. a domain-specific state). */
     status?: StatusType;
-    /** Tailwind background class for the dot, e.g. 'bg-emerald-500'. Overrides
-     * the `status` preset's color when both are given. */
+    /** Background class for the dot, e.g. 'bg-success' or 'bg-chart-2'. Overrides
+     * the `status` preset's colour when both are given. Use a semantic token: a
+     * numeric shade is fixed across all five themes. */
     color?: string;
     /**
      * Optional custom label. If not provided, uses the default status name.
@@ -27,7 +28,7 @@ export interface StatusBadgeProps {
  * description: One of the 5 built-in presets. Determines the color of the dot. Omit and use `color`+`label` for a status outside this set.
  * - name: color
  * type: string
- * description: Tailwind background class for the dot (e.g. 'bg-emerald-500'). Overrides the `status` preset's color when both are given.
+ * description: Background class for the dot (e.g. 'bg-success'). Use a semantic token — a numeric shade does not adapt to the active theme. Overrides the `status` preset's colour when both are given.
  * - name: label
  * type: string
  * description: Custom text to display next to the dot. If omitted, displays the status name (e.g., "Online").

package/dist/components/data-display/StatusBadge.js

@@ -1,28 +1,28 @@
-import { jsxs as g, jsx as r } from "react/jsx-runtime";
-import { cn as t } from "../../utils/cn.js";
-const d = {
-  online: { color: "bg-green-500", label: "Online" },
-  offline: { color: "bg-gray-400", label: "Offline" },
-  error: { color: "bg-red-500", label: "Error" },
-  warning: { color: "bg-yellow-500", label: "Warning" },
-  active: { color: "bg-blue-500", label: "Active" }
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { cn as i } from "../../utils/cn.js";
+const g = {
+  online: { color: "bg-success", label: "Online" },
+  offline: { color: "bg-muted-foreground", label: "Offline" },
+  error: { color: "bg-destructive", label: "Error" },
+  warning: { color: "bg-warning", label: "Warning" },
+  active: { color: "bg-info", label: "Active" }
 }, m = ({
-  status: e,
-  color: a,
-  label: n,
-  className: i,
-  showDot: c = !0
+  status: n,
+  color: t,
+  label: r,
+  className: c,
+  showDot: a = !0
 }) => {
-  const l = e ? d[e] : void 0, s = a ?? (l == null ? void 0 : l.color) ?? "bg-muted-foreground", o = n === null ? null : n ?? (l == null ? void 0 : l.label) ?? null;
-  return /* @__PURE__ */ g("div", { className: t("inline-flex items-center gap-2", i), children: [
-    c && /* @__PURE__ */ r(
+  const o = n ? g[n] : void 0, s = t ?? (o == null ? void 0 : o.color) ?? "bg-muted-foreground", l = r === null ? null : r ?? (o == null ? void 0 : o.label) ?? null;
+  return /* @__PURE__ */ d("div", { className: i("inline-flex items-center gap-2", c), children: [
+    a && /* @__PURE__ */ e(
       "span",
       {
-        className: t("h-2.5 w-2.5 rounded-full ring-2 ring-white dark:ring-slate-900", s),
+        className: i("h-2.5 w-2.5 rounded-full ring-2 ring-card", s),
         "aria-hidden": "true"
       }
     ),
-    o && /* @__PURE__ */ r("span", { className: "text-sm font-medium text-slate-700 dark:text-slate-300", children: o })
+    l && /* @__PURE__ */ e("span", { className: "text-sm font-medium text-foreground", children: l })
   ] });
 };
 export {

package/dist/components/feedback/Alert.js

@@ -1,37 +1,37 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { Icon as c } from "../ui/Icon.js";
-const i = {
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { Icon as o } from "../ui/Icon.js";
+const a = {
   info: {
     icon: "info",
-    classes: "bg-primary/10 border-primary/50 text-primary"
+    classes: "bg-info/10 border-info/50 text-info-strong"
   },
   success: {
     icon: "check-circle",
-    classes: "bg-green-500/10 border-green-500/50 text-green-700 dark:text-green-400"
+    classes: "bg-success/10 border-success/50 text-success-strong"
   },
   warning: {
     icon: "alert-triangle",
-    classes: "bg-yellow-500/10 border-yellow-500/50 text-yellow-700 dark:text-yellow-400"
+    classes: "bg-warning/10 border-warning/50 text-warning-strong"
   },
   danger: {
     icon: "x-circle",
-    classes: "bg-red-500/10 border-red-500/50 text-red-700 dark:text-red-500"
+    classes: "bg-destructive/10 border-destructive/50 text-destructive-strong"
   }
-}, m = ({
-  title: o,
-  children: r,
-  variant: t = "info",
-  className: a
+}, g = ({
+  title: n,
+  children: e,
+  variant: i = "info",
+  className: t
 }) => {
-  const s = i[t];
-  return /* @__PURE__ */ l("div", { className: `flex items-start gap-4 p-4 border-l-4 rounded-r-lg ${s.classes} ${a || ""}`, role: "alert", children: [
-    /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e(c, { name: s.icon, size: 20 }) }),
-    /* @__PURE__ */ l("div", { className: "flex-grow", children: [
-      /* @__PURE__ */ e("h4", { className: "font-semibold", children: o }),
-      r && /* @__PURE__ */ e("div", { className: "text-sm mt-1", children: r })
+  const r = a[i];
+  return /* @__PURE__ */ c("div", { className: `flex items-start gap-4 p-4 border-l-4 rounded-r-lg ${r.classes} ${t || ""}`, role: "alert", children: [
+    /* @__PURE__ */ s("div", { className: "flex-shrink-0", children: /* @__PURE__ */ s(o, { name: r.icon, size: 20 }) }),
+    /* @__PURE__ */ c("div", { className: "flex-grow", children: [
+      /* @__PURE__ */ s("h4", { className: "font-semibold", children: n }),
+      e && /* @__PURE__ */ s("div", { className: "text-sm mt-1", children: e })
     ] })
   ] });
 };
 export {
-  m as Alert
+  g as Alert
 };

package/dist/components/forms/SegmentedControl.js

@@ -1,24 +1,24 @@
-import { jsx as t } from "react/jsx-runtime";
-import { cn as d } from "../../utils/cn.js";
+import { jsx as d } from "react/jsx-runtime";
+import { cn as t } from "../../utils/cn.js";
 const m = ({
   options: n,
-  value: i,
+  value: o,
   onChange: l,
   size: r = "md",
-  className: o
-}) => /* @__PURE__ */ t("div", { className: d(
+  className: i
+}) => /* @__PURE__ */ d("div", { className: t(
   // Container: Use 'muted' background for the track (works in all themes)
   "inline-flex bg-muted border border-border",
   r === "xs" ? "rounded-md p-0.5" : "rounded-lg p-1",
-  o
+  i
 ), children: n.map((e) => {
-  const s = e.value === i;
-  return /* @__PURE__ */ t(
+  const s = e.value === o;
+  return /* @__PURE__ */ d(
     "button",
     {
       onClick: () => !e.disabled && l(e.value),
       disabled: e.disabled,
-      className: d(
+      className: t(
         "relative rounded-md font-medium transition-all duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
         // Size Variants
         //
@@ -40,7 +40,7 @@ const m = ({
         // those two already clear AA and must not move.
         r === "xs" ? "inline-flex items-center justify-center min-h-6 text-2xs px-2 py-0.5" : r === "sm" ? "text-xs px-3 py-1" : "text-sm px-4 py-1.5",
         // State Styles (Theme Aware)
-        s ? "bg-card text-foreground shadow-sm ring-1 ring-black/5 dark:ring-white/10" : "text-muted-foreground hover:text-foreground hover:bg-background/50",
+        s ? "bg-card text-foreground shadow-sm ring-1 ring-border" : "text-muted-foreground hover:text-foreground hover:bg-background/50",
         e.disabled && "opacity-50 cursor-not-allowed"
       ),
       type: "button",

package/dist/components/layout/DetailDrawer.d.ts

@@ -8,13 +8,14 @@ import React from 'react';
  * @id detail-drawer
  * @param {boolean} isOpen - Whether the drawer is showing.
  * @param {function} onClose - Called when the drawer requests dismissal.
- * @param {string} variant - 'push' compresses sibling flex content so the list stays visible; 'overlay' floats fixed above the page. Defaults to push.
+ * @param {string} variant - 'push' compresses sibling flex content so the list stays visible; 'overlay' floats fixed above the page. Defaults to overlay.
  * @param {string} side - Which edge it docks to: 'left' or 'right'. Defaults to right.
  * @param {boolean} resizable - Enables the draggable handle on the inner border.
  * @param {number} width - Current width in px. Controlled — pair with onWidthChange.
  * @param {function} onWidthChange - Called with the new width while dragging.
  * @param {number} minWidth - Lower bound for resizing. Defaults to 320.
  * @param {number} maxWidth - Upper bound for resizing. Defaults to 60% of the window width.
+ * @param {string} title - Names the panel for assistive technology. Not rendered: there is no header row to put it in, and adding one is a design decision. Without it an overlay announces only as "dialog".
  * @param {ReactNode} children - The detail content.
  */
 export interface DetailDrawerProps {
@@ -28,5 +29,12 @@ export interface DetailDrawerProps {
     minWidth?: number;
     maxWidth?: number;
     side?: 'left' | 'right';
+    /**
+     * Names the panel for assistive technology. Not rendered — this component
+     * has no header row to put it in, and adding one is a visual change that is
+     * a designer's call, not this fix's. Without it an overlay announces only as
+     * "dialog" and a push panel as nothing at all.
+     */
+    title?: string;
 }
 export declare const DetailDrawer: React.FC<DetailDrawerProps>;

package/dist/components/layout/DetailDrawer.js

@@ -1,88 +1,98 @@
-import { jsxs as b, jsx as r, Fragment as k } from "react/jsx-runtime";
-import { useRef as E, useEffect as y } from "react";
-import { createPortal as L } from "react-dom";
-import { Icon as D } from "../ui/Icon.js";
-import { cn as h } from "../../utils/cn.js";
-import { useBodyScrollLock as M } from "../../lib/hooks/useBodyScrollLock.js";
-const B = ({
+import { jsxs as p, jsx as o, Fragment as M } from "react/jsx-runtime";
+import { useRef as g, useId as z, useEffect as x } from "react";
+import { useDialogFocus as I } from "../../lib/hooks/useDialogFocus.js";
+import { createPortal as $ } from "react-dom";
+import { Icon as j } from "../ui/Icon.js";
+import { cn as k } from "../../utils/cn.js";
+import { useBodyScrollLock as S } from "../../lib/hooks/useBodyScrollLock.js";
+const q = ({
   isOpen: t,
-  onClose: n,
-  children: p,
-  variant: u = "overlay",
-  resizable: d = !1,
-  width: g = 420,
-  onWidthChange: a,
-  minWidth: c = 320,
-  maxWidth: m = typeof window < "u" ? window.innerWidth * 0.6 : 800,
-  side: o = "right"
+  onClose: i,
+  children: D,
+  variant: a = "overlay",
+  resizable: u = !1,
+  width: E = 420,
+  onWidthChange: c,
+  minWidth: m = 320,
+  maxWidth: f = typeof window < "u" ? window.innerWidth * 0.6 : 800,
+  side: n = "right",
+  title: l
 }) => {
-  const i = E(!1);
-  if (y(() => {
-    if (!d || !a) return;
-    const e = (v) => {
-      if (!i.current) return;
-      const x = o === "right" ? window.innerWidth - v.clientX : v.clientX;
-      a(Math.max(c, Math.min(m, x)));
+  const d = g(!1), v = g(null), L = z();
+  if (I(t && a === "overlay", v), x(() => {
+    if (!u || !c) return;
+    const r = (h) => {
+      if (!d.current) return;
+      const N = n === "right" ? window.innerWidth - h.clientX : h.clientX;
+      c(Math.max(m, Math.min(f, N)));
     }, s = () => {
-      i.current && (i.current = !1, document.body.style.userSelect = "", document.body.style.cursor = "");
+      d.current && (d.current = !1, document.body.style.userSelect = "", document.body.style.cursor = "");
     };
-    return window.addEventListener("mousemove", e), window.addEventListener("mouseup", s), () => {
-      window.removeEventListener("mousemove", e), window.removeEventListener("mouseup", s);
+    return window.addEventListener("mousemove", r), window.addEventListener("mouseup", s), () => {
+      window.removeEventListener("mousemove", r), window.removeEventListener("mouseup", s);
     };
-  }, [d, a, c, m, o]), y(() => {
-    const e = (s) => {
-      s.key === "Escape" && t && n();
+  }, [u, c, m, f, n]), x(() => {
+    const r = (s) => {
+      s.key === "Escape" && t && i();
     };
-    return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-  }, [t, n]), M(t && u === "overlay"), !t) return null;
-  const l = u === "overlay", f = o === "right" ? "right-0 border-l" : "left-0 border-r", w = /* @__PURE__ */ b(
+    return window.addEventListener("keydown", r), () => window.removeEventListener("keydown", r);
+  }, [t, i]), S(t && a === "overlay"), !t) return null;
+  const e = a === "overlay", w = L, b = n === "right" ? "right-0 border-l" : "left-0 border-r", y = /* @__PURE__ */ p(
     "div",
     {
-      className: h(
+      ref: v,
+      role: e ? "dialog" : "region",
+      "aria-modal": e ? !0 : void 0,
+      tabIndex: e ? -1 : void 0,
+      "aria-labelledby": l ? w : void 0,
+      "aria-label": l ? void 0 : e ? "Detail panel" : "Detail",
+      className: k(
         "flex flex-col border-border bg-card shadow-2xl transition-transform duration-300",
-        l ? `fixed inset-y-0 ${f} z-drawer w-full sm:w-[420px] animate-in ${o === "right" ? "slide-in-from-right" : "slide-in-from-left"}` : `relative h-full flex-shrink-0 ${f}`
+        e ? `fixed inset-y-0 ${b} z-drawer w-full sm:w-[420px] animate-in ${n === "right" ? "slide-in-from-right" : "slide-in-from-left"}` : `relative h-full flex-shrink-0 ${b}`
       ),
-      style: l ? void 0 : { width: `min(100vw, ${g}px)` },
+      style: e ? void 0 : { width: `min(100vw, ${E}px)` },
       children: [
-        d && !l && /* @__PURE__ */ r(
+        u && !e && /* @__PURE__ */ o(
           "div",
           {
-            className: h(
+            className: k(
               "absolute top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-primary/50 active:bg-primary z-10",
-              o === "right" ? "left-0 -ml-0.5" : "right-0 -mr-0.5"
+              n === "right" ? "left-0 -ml-0.5" : "right-0 -mr-0.5"
             ),
-            onMouseDown: (e) => {
-              e.preventDefault(), i.current = !0, document.body.style.userSelect = "none", document.body.style.cursor = "col-resize";
+            onMouseDown: (r) => {
+              r.preventDefault(), d.current = !0, document.body.style.userSelect = "none", document.body.style.cursor = "col-resize";
             }
           }
         ),
-        /* @__PURE__ */ r("div", { className: "flex justify-end p-2 absolute top-0 right-0 z-20", children: /* @__PURE__ */ r(
+        /* @__PURE__ */ o("div", { className: "flex justify-end p-2 absolute top-0 right-0 z-20", children: /* @__PURE__ */ o(
           "button",
           {
-            onClick: n,
+            onClick: i,
             className: "rounded-full p-1.5 bg-background/50 backdrop-blur hover:bg-muted text-muted-foreground hover:text-foreground transition-all shadow-sm border border-border",
             "aria-label": "Close",
-            children: /* @__PURE__ */ r(D, { name: "x", size: 16 })
+            children: /* @__PURE__ */ o(j, { name: "x", size: 16 })
           }
         ) }),
-        /* @__PURE__ */ r("div", { className: "flex-1 overflow-y-auto custom-scrollbar relative h-full", children: p })
+        l && // sr-only, not a visible heading: see the `title` prop's note above.
+        /* @__PURE__ */ o("h2", { id: w, className: "sr-only", children: l }),
+        /* @__PURE__ */ o("div", { className: "flex-1 overflow-y-auto custom-scrollbar relative h-full", children: D })
       ]
     }
   );
-  return l ? typeof document > "u" ? null : L(
-    /* @__PURE__ */ b(k, { children: [
-      /* @__PURE__ */ r(
+  return e ? typeof document > "u" ? null : $(
+    /* @__PURE__ */ p(M, { children: [
+      /* @__PURE__ */ o(
         "div",
         {
           className: "fixed inset-0 z-scrim bg-background/80 backdrop-blur-sm transition-opacity",
-          onClick: n
+          onClick: i
         }
       ),
-      w
+      y
     ] }),
     document.body
-  ) : w;
+  ) : y;
 };
 export {
-  B as DetailDrawer
+  q as DetailDrawer
 };