@ramme-io/ui 4.1.0 → 4.2.0

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/forms/Select.js

@@ -7,21 +7,21 @@ const S = (a) => /* @__PURE__ */ e(I.DropdownIndicator, { ...a, children: /* @__
   options: a,
   value: l,
   onChange: i,
-  label: c,
+  label: p,
   placeholder: m = "Select...",
   isDisabled: s = !1,
   isLoading: u = !1,
   isClearable: b = !0,
   isSearchable: g = !0,
   className: v,
-  error: p,
-  helperText: t
+  error: t,
+  helperText: d
 }) => {
-  const d = h(), x = {
+  const c = h(), x = {
     control: (r, o) => ({
       ...r,
       backgroundColor: "rgb(var(--app-card-bg-color))",
-      borderColor: p ? "rgb(var(--app-danger-color))" : o.isFocused ? "rgb(var(--app-primary-color))" : "rgb(var(--app-border-color))",
+      borderColor: t ? "rgb(var(--app-danger-color))" : o.isFocused ? "rgb(var(--app-primary-color))" : "rgb(var(--app-border-color))",
       color: "rgb(var(--app-text-color))",
       borderRadius: "var(--app-border-radius-md)",
       boxShadow: o.isFocused ? "0 0 0 1px rgb(var(--app-primary-color))" : "none",
@@ -65,11 +65,12 @@ const S = (a) => /* @__PURE__ */ e(I.DropdownIndicator, { ...a, children: /* @__
     })
   };
   return /* @__PURE__ */ f("div", { className: n("w-full", v), children: [
-    c && /* @__PURE__ */ e("label", { htmlFor: d, className: "block text-sm font-medium text-foreground mb-1.5", children: c }),
+    p && /* @__PURE__ */ e("label", { htmlFor: c, className: "block text-sm font-medium text-foreground mb-1.5", children: p }),
     /* @__PURE__ */ e(
       y,
       {
-        instanceId: d,
+        instanceId: c,
+        inputId: c,
         styles: x,
         components: { DropdownIndicator: S },
         options: a,
@@ -84,7 +85,7 @@ const S = (a) => /* @__PURE__ */ e(I.DropdownIndicator, { ...a, children: /* @__
         menuPosition: "fixed"
       }
     ),
-    t && /* @__PURE__ */ e("p", { className: n("mt-1.5 text-xs", p ? "text-destructive" : "text-muted-foreground"), children: t })
+    d && /* @__PURE__ */ e("p", { className: n("mt-1.5 text-xs", t ? "text-destructive" : "text-muted-foreground"), children: d })
   ] });
 };
 export {

package/dist/components/forms/Textarea.d.ts

@@ -1,22 +1,24 @@
 import React from 'react';
-interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     label?: string;
+    helperText?: string;
+    error?: boolean;
+    required?: boolean;
+    showOptionalLabel?: boolean;
     containerClassName?: string;
 }
 /**
  * @wizard
  * @name Textarea
- * @description A theme-aware textarea component for multi-line text input.
- * @tags form, input, ui
- * @props
- * - name: label
- * type: string
- * description: An optional label to display above the textarea.
- * - name: containerClassName
- * type: string
- * description: Optional additional CSS classes for the container div.
+ * @description A theme-aware multi-line text input with label, helper text, and validation state support. Strategic purpose: the multi-line sibling of Input, styled identically so the two are indistinguishable when stacked in one form. Forwards all standard HTML textarea attributes via spread.
+ * @tags form, input, ui, text, multiline
  * @category form
  * @id textarea
+ * @param {string} label - Optional label displayed above the textarea.
+ * @param {string} helperText - Supporting text rendered below the textarea. Appears in destructive color when error is true.
+ * @param {boolean} error - If true, applies destructive border styling to indicate a validation error. Defaults to false.
+ * @param {boolean} required - If true, appends a required (*) indicator next to the label. Defaults to false.
+ * @param {boolean} showOptionalLabel - If true, appends an (optional) label when the field is not required. Defaults to false.
+ * @param {string} containerClassName - Additional CSS classes applied to the outer container div.
  */
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
-export {};

package/dist/components/forms/Textarea.js

@@ -1,19 +1,39 @@
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
-import d from "react";
-const m = d.forwardRef(
-  ({ label: r, className: t, containerClassName: a, ...e }, s) => /* @__PURE__ */ n("div", { className: `w-full ${a || ""}`, children: [
-    r && /* @__PURE__ */ o("label", { htmlFor: e.id || e.name, className: "block text-sm font-medium text-muted-foreground mb-1", children: r }),
-    /* @__PURE__ */ o(
-      "textarea",
-      {
-        ref: s,
-        className: `w-full px-3 py-2 rounded-md bg-card border border-border transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary ${t || ""}`,
-        ...e
-      }
-    )
-  ] })
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import i from "react";
+import { cn as o } from "../../utils/cn.js";
+const p = i.forwardRef(
+  ({
+    label: r,
+    helperText: a,
+    error: d = !1,
+    required: t = !1,
+    showOptionalLabel: c = !1,
+    className: m,
+    containerClassName: f,
+    ...s
+  }, u) => {
+    const x = "w-full rounded-md border bg-background px-3 py-2 ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", b = d ? "border-destructive" : "border-input", g = i.useId(), l = s.id || s.name || g;
+    return /* @__PURE__ */ n("div", { className: o("w-full", f), children: [
+      r && /* @__PURE__ */ n("label", { htmlFor: l, className: "block text-sm font-medium text-foreground mb-1", children: [
+        r,
+        t && /* @__PURE__ */ e("span", { className: "text-destructive ml-1", children: "*" }),
+        !t && c && /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground ml-1", children: "(optional)" })
+      ] }),
+      /* @__PURE__ */ e(
+        "textarea",
+        {
+          ref: u,
+          id: l,
+          className: o(x, b, m),
+          required: t,
+          ...s
+        }
+      ),
+      a && /* @__PURE__ */ e("p", { className: o("mt-1.5 text-xs", d ? "text-destructive" : "text-muted-foreground"), children: a })
+    ] });
+  }
 );
-m.displayName = "Textarea";
+p.displayName = "Textarea";
 export {
-  m as Textarea
+  p as Textarea
 };

package/dist/components/layout/Accordion.js

@@ -1,52 +1,45 @@
-import { jsx as t, jsxs as m } from "react/jsx-runtime";
-import d, { useState as u, useCallback as f } from "react";
-const x = ({ id: e, header: r, children: i, isOpen: n, onToggle: a }) => {
-  const [c, o] = u(n !== void 0 ? n : !1), s = n !== void 0, l = s ? n : c, h = f(() => {
-    s && a ? a(e, !l) : o((g) => !g);
-  }, [e, l, s, a]), p = `transform transition-transform duration-300 ${l ? "rotate-180" : "rotate-0"}`;
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import c, { useState as f, useCallback as u } from "react";
+const w = ({ id: e, header: n, children: l, isOpen: t, onToggle: s }) => {
+  const [d, r] = f(t !== void 0 ? t : !1), a = t !== void 0, i = a ? t : d, h = u(() => {
+    a && s ? s(e, !i) : r((g) => !g);
+  }, [e, i, a, s]), p = `transform transition-transform duration-300 ${i ? "rotate-180" : "rotate-0"}`;
   return /* @__PURE__ */ m("div", { className: "border border-border rounded-md overflow-hidden", children: [
-    /* @__PURE__ */ m(
+    /* @__PURE__ */ o("h3", { className: "m-0", children: /* @__PURE__ */ m(
       "button",
       {
         id: `accordion-header-${e}`,
-        "aria-expanded": l,
+        "aria-expanded": i,
         "aria-controls": `accordion-panel-${e}`,
         onClick: h,
-        className: "flex items-center justify-between w-full p-4 text-foreground bg-background hover:bg-background/80 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
-        role: "heading",
-        "aria-level": 3,
+        className: "flex items-center justify-between w-full p-4 text-left text-foreground bg-background hover:bg-background/80 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
         children: [
-          /* @__PURE__ */ t("span", { className: "text-xl font-semibold", children: r }),
-          /* @__PURE__ */ t("svg", { className: `w-6 h-6 text-foreground ${p}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })
+          /* @__PURE__ */ o("span", { className: "text-xl font-semibold", children: n }),
+          /* @__PURE__ */ o("svg", { className: `w-6 h-6 text-foreground shrink-0 ${p}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ o("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })
         ]
       }
-    ),
-    /* @__PURE__ */ t(
+    ) }),
+    /* @__PURE__ */ o(
       "div",
       {
         id: `accordion-panel-${e}`,
         role: "region",
         "aria-labelledby": `accordion-header-${e}`,
-        style: {
-          maxHeight: l ? "1000px" : "0",
-          // Arbitrary large height for transition
-          overflow: "hidden",
-          transition: "max-height 0.3s ease-in-out"
-        },
-        children: /* @__PURE__ */ t("div", { className: "p-4 bg-card", children: i })
+        className: `grid transition-[grid-template-rows] duration-300 ease-in-out ${i ? "grid-rows-[1fr]" : "grid-rows-[0fr]"}`,
+        children: /* @__PURE__ */ o("div", { className: "overflow-hidden min-h-0", children: /* @__PURE__ */ o("div", { className: "p-4 bg-card", children: l }) })
       }
     )
   ] });
-}, w = ({ children: e, singleOpen: r = !1, className: i }) => {
-  const [n, a] = u(null), c = f((o, s) => {
-    r && a(s ? o : null);
-  }, [r]);
-  return /* @__PURE__ */ t("div", { className: `space-y-4 ${i || ""}`, children: d.Children.map(e, (o) => d.isValidElement(o) ? d.cloneElement(o, {
-    isOpen: r ? o.props.id === n : void 0,
-    onToggle: r ? c : void 0
-  }) : o) });
+}, x = ({ children: e, singleOpen: n = !1, className: l }) => {
+  const [t, s] = f(null), d = u((r, a) => {
+    n && s(a ? r : null);
+  }, [n]);
+  return /* @__PURE__ */ o("div", { className: `space-y-4 ${l || ""}`, children: c.Children.map(e, (r) => c.isValidElement(r) ? c.cloneElement(r, {
+    isOpen: n ? r.props.id === t : void 0,
+    onToggle: n ? d : void 0
+  }) : r) });
 };
 export {
-  w as Accordion,
-  x as AccordionItem
+  x as Accordion,
+  w as AccordionItem
 };

package/dist/components/layout/Card.js

@@ -1,59 +1,76 @@
-import { jsx as d } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as t } from "react";
 import { cn as s } from "../../utils/cn.js";
 const l = t(
-  ({ className: e, children: a, ...r }, o) => /* @__PURE__ */ d(
+  ({ className: e, children: a, ...d }, o) => /* @__PURE__ */ r(
     "div",
     {
       ref: o,
       className: s(
-        "@container bg-card text-card-foreground rounded-lg border border-border shadow-sm",
+        "@container bg-card text-card-foreground",
+        /* A card in a narrow container is chrome restating chrome: its border
+                     sits a few pixels inside the panel's own edge, and its radius and
+                     shadow buy nothing at 390px while its inset costs real width. So
+                     below a 28rem container the card keeps its surface and drops the
+                     frame — the rule above it still groups, the box no longer taxes.
+        
+                     A CONTAINER query, not a breakpoint: this asks how much room the
+                     card actually has, so the same card is framed in a wide dashboard
+                     column and flush inside a sheet or a narrow sidebar on that very
+                     same screen. A `sm:` breakpoint would get the narrow-panel-on-a-
+                     big-monitor case exactly backwards.
+        
+                     28rem, not 24rem: inside a sheet a 390px phone gives the card a
+                     ~358px container, but a 430px phone gives ~398px — over 24rem, so
+                     the frame would come back on the LARGER phone. 28rem clears every
+                     handset while leaving real desktop columns framed. */
+        "border-y border-border @md:rounded-lg @md:border @md:shadow-sm",
         e
       ),
-      ...r,
+      ...d,
       children: a
     }
   )
 );
 l.displayName = "Card";
 const i = t(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ d(
+  ({ className: e, ...a }, d) => /* @__PURE__ */ r(
     "div",
     {
-      ref: r,
+      ref: d,
       className: s("flex flex-col space-y-fluid-xs p-fluid-lg", e),
       ...a
     }
   )
 );
 i.displayName = "CardHeader";
-const n = t(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ d(
+const m = t(
+  ({ className: e, ...a }, d) => /* @__PURE__ */ r(
     "h3",
     {
-      ref: r,
+      ref: d,
       className: s("text-fluid-lg font-semibold leading-none tracking-tight", e),
       ...a
     }
   )
 );
-n.displayName = "CardTitle";
-const m = t(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ d(
+m.displayName = "CardTitle";
+const n = t(
+  ({ className: e, ...a }, d) => /* @__PURE__ */ r(
     "p",
     {
-      ref: r,
+      ref: d,
       className: s("text-fluid-sm text-muted-foreground", e),
       ...a
     }
   )
 );
-m.displayName = "CardDescription";
+n.displayName = "CardDescription";
 const c = t(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ d(
+  ({ className: e, ...a }, d) => /* @__PURE__ */ r(
     "h2",
     {
-      ref: r,
+      ref: d,
       className: s(
         "text-xs font-semibold uppercase tracking-widest text-muted-foreground flex items-center gap-1.5",
         e
@@ -64,14 +81,14 @@ const c = t(
 );
 c.displayName = "CardLabel";
 const p = t(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ d("div", { ref: r, className: s("p-fluid-lg pt-0", e), ...a })
+  ({ className: e, ...a }, d) => /* @__PURE__ */ r("div", { ref: d, className: s("p-fluid-lg pt-0", e), ...a })
 );
 p.displayName = "CardContent";
 const f = t(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ d(
+  ({ className: e, ...a }, d) => /* @__PURE__ */ r(
     "div",
     {
-      ref: r,
+      ref: d,
       className: s("flex items-center p-fluid-lg pt-0", e),
       ...a
     }
@@ -81,9 +98,9 @@ f.displayName = "CardFooter";
 export {
   l as Card,
   p as CardContent,
-  m as CardDescription,
+  n as CardDescription,
   f as CardFooter,
   i as CardHeader,
   c as CardLabel,
-  n as CardTitle
+  m as CardTitle
 };

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,89 +1,98 @@
-import { jsxs as b, jsx as r, Fragment as k } from "react/jsx-runtime";
-import { useRef as E, useEffect as c } from "react";
-import { createPortal as D } from "react-dom";
-import { Icon as L } from "../ui/Icon.js";
-import { cn as h } from "../../utils/cn.js";
-const S = ({
-  isOpen: o,
-  onClose: n,
-  children: g,
-  variant: s = "overlay",
+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: i,
+  children: D,
+  variant: a = "overlay",
   resizable: u = !1,
-  width: p = 420,
-  onWidthChange: a,
+  width: E = 420,
+  onWidthChange: c,
   minWidth: m = 320,
   maxWidth: f = typeof window < "u" ? window.innerWidth * 0.6 : 800,
-  side: t = "right"
+  side: n = "right",
+  title: l
 }) => {
-  const i = E(!1);
-  if (c(() => {
-    if (!u || !a) return;
-    const e = (y) => {
-      if (!i.current) return;
-      const x = t === "right" ? window.innerWidth - y.clientX : y.clientX;
-      a(Math.max(m, Math.min(f, x)));
-    }, d = () => {
-      i.current && (i.current = !1, document.body.style.userSelect = "", document.body.style.cursor = "");
+  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 = () => {
+      d.current && (d.current = !1, document.body.style.userSelect = "", document.body.style.cursor = "");
     };
-    return window.addEventListener("mousemove", e), window.addEventListener("mouseup", d), () => {
-      window.removeEventListener("mousemove", e), window.removeEventListener("mouseup", d);
+    return window.addEventListener("mousemove", r), window.addEventListener("mouseup", s), () => {
+      window.removeEventListener("mousemove", r), window.removeEventListener("mouseup", s);
     };
-  }, [u, a, m, f, t]), c(() => {
-    const e = (d) => {
-      d.key === "Escape" && o && n();
+  }, [u, c, m, f, n]), x(() => {
+    const r = (s) => {
+      s.key === "Escape" && t && i();
     };
-    return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-  }, [o, n]), c(() => (o && s === "overlay" ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
-    document.body.style.overflow = "";
-  }), [o, s]), !o) return null;
-  const l = s === "overlay", w = t === "right" ? "right-0 border-l" : "left-0 border-r", v = /* @__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 ${w} z-drawer w-full sm:w-[420px] animate-in ${t === "right" ? "slide-in-from-right" : "slide-in-from-left"}` : `relative h-full flex-shrink-0 ${w}`
+        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, ${p}px)` },
+      style: e ? void 0 : { width: `min(100vw, ${E}px)` },
       children: [
-        u && !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",
-              t === "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(L, { 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: g })
+        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 : D(
-    /* @__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
         }
       ),
-      v
+      y
     ] }),
     document.body
-  ) : v;
+  ) : y;
 };
 export {
-  S as DetailDrawer
+  q as DetailDrawer
 };