@elcrm/components 0.2.3 → 0.2.5

package/README.md

@@ -682,7 +682,7 @@ const resolve = createLazyResolver((value) => import(`./sections/${value}.tsx`))
 **Узкие (только если нужно иначе)**
 
 ```
---header-height / --header-z / --header-margin / --header-shadow / --header-radius
+--header-height / --header-z / --header-margin / --header-shadow / --header-radius / --header-border
 --section-padding / --section-title-size / --section-title-size-md / --section-auth-card-max-width
 --nav-sections-padding / --nav-sections-nav-width / --nav-sections-main-max-width
 --avatar-size-s|m|l / --avatar-group-overlap

package/dist/{Dropdown-C6qlqMLV.js → Dropdown-B9AodUFf.js}

@@ -1,30 +1,30 @@
 import e from "react";
 import { C as f } from "./CheckIcon-FdB8fMEF.js";
 import { c as m } from "./cx-CcykAxZN.js";
-import { P as D } from "./Popover-5dFP4TXx.js";
-import { u as j } from "./useControllableValue-CWqH1kpM.js";
-import './Dropdown.css';const I = "crr", M = "crt", P = "crc", R = "crp", W = "crh", z = "crg", F = "crd", G = "cri", T = "crn", V = "crm", q = "crk", A = "crl", H = "cru", J = "crb", K = "cro", Q = "crf", U = "crx", X = "cry", Y = "crv", n = {
-  r: I,
-  t: M,
-  c: P,
-  p: R,
-  h: W,
-  g: z,
-  d: F,
-  i: G,
-  n: T,
-  m: V,
-  k: q,
-  l: A,
-  u: H,
-  b: J,
-  o: K,
-  f: Q,
-  x: U,
-  y: X,
-  v: Y
+import { P as j } from "./Popover-D5RymtcJ.js";
+import { u as I } from "./useControllableValue-CWqH1kpM.js";
+import './Dropdown.css';const M = "crr", P = "crt", R = "crc", W = "crp", z = "crh", F = "crg", G = "crd", T = "cri", V = "crn", q = "crm", A = "crk", H = "crl", J = "cru", K = "crb", Q = "cro", U = "crf", X = "crx", Y = "cry", Z = "crv", n = {
+  r: M,
+  t: P,
+  c: R,
+  p: W,
+  h: z,
+  g: F,
+  d: G,
+  i: T,
+  n: V,
+  m: q,
+  k: A,
+  l: H,
+  u: J,
+  b: K,
+  o: Q,
+  f: U,
+  x: X,
+  y: Y,
+  v: Z
 };
-function Z() {
+function _() {
   return /* @__PURE__ */ e.createElement("svg", { className: n.c, viewBox: "0 0 12 12", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement(
     "path",
     {
@@ -37,7 +37,7 @@ function Z() {
     }
   ));
 }
-function _() {
+function $() {
   return /* @__PURE__ */ e.createElement("svg", { className: n.m, viewBox: "0 0 12 12", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement(
     "path",
     {
@@ -50,7 +50,7 @@ function _() {
     }
   ));
 }
-function $({ item: a }) {
+function S({ item: a }) {
   return a.checkbox ? /* @__PURE__ */ e.createElement("span", { className: m(n.x, a.checked && n.y), "aria-hidden": !0 }, a.checked ? /* @__PURE__ */ e.createElement(f, { className: n.v }) : null) : a.checked ? /* @__PURE__ */ e.createElement("span", { className: n.k, "aria-hidden": !0 }, /* @__PURE__ */ e.createElement(f, { className: n.v })) : a.status != null ? /* @__PURE__ */ e.createElement(
     "span",
     {
@@ -59,34 +59,35 @@ function $({ item: a }) {
     }
   ) : a.icon != null ? /* @__PURE__ */ e.createElement("span", { className: n.n }, a.icon) : null;
 }
-function S(a, l, t) {
-  return l != null && l.length > 0 ? t != null && l[0] && l[0].title == null ? [{ ...l[0], title: t }, ...l.slice(1)] : l : a != null && a.length > 0 ? [{ title: t, items: a }] : t != null ? [{ title: t, items: [] }] : [];
+function ee(a, t, l) {
+  return t != null && t.length > 0 ? l != null && t[0] && t[0].title == null ? [{ ...t[0], title: l }, ...t.slice(1)] : t : a != null && a.length > 0 ? [{ title: l, items: a }] : l != null ? [{ title: l, items: [] }] : [];
 }
 function le({
   items: a,
-  groups: l,
-  trigger: t,
+  groups: t,
+  trigger: l,
   label: o,
   hideChevron: E = !1,
   title: v,
   align: k = "end",
-  open: b,
-  defaultOpen: N = !1,
-  onOpenChange: x,
-  closeOnSelect: C = !0,
+  placement: b = "auto",
+  open: N,
+  defaultOpen: x = !1,
+  onOpenChange: C,
+  closeOnSelect: y = !0,
   disabled: u = !1,
   onSelect: d,
-  className: y
+  className: g
 }) {
-  const [i = !1, p] = j(
-    b,
+  const [i = !1, p] = I(
     N,
-    x
-  ), g = S(a, l, v), L = (r) => {
+    x,
+    C
+  ), L = ee(a, t, v), w = (r) => {
     var c;
     if (r.disabled) return;
-    (c = r.onClick) == null || c.call(r), d == null || d(r.value, r), r.checkbox || r.submenu || !C || p(!1);
-  }, w = t ?? /* @__PURE__ */ e.createElement(
+    (c = r.onClick) == null || c.call(r), d == null || d(r.value, r), r.checkbox || r.submenu || !y || p(!1);
+  }, O = l ?? /* @__PURE__ */ e.createElement(
     "button",
     {
       type: "button",
@@ -97,25 +98,26 @@ function le({
       "aria-expanded": i
     },
     o,
-    E ? null : /* @__PURE__ */ e.createElement(Z, null)
+    E ? null : /* @__PURE__ */ e.createElement(_, null)
   );
   return /* @__PURE__ */ e.createElement(
-    D,
+    j,
     {
-      className: m(n.r, y),
+      className: m(n.r, g),
       open: i,
       onOpenChange: (r) => {
         u || p(r);
       },
       align: k,
-      trigger: w,
+      placement: b,
+      trigger: O,
       label: typeof o == "string" ? o : void 0,
       disabled: u
     },
-    /* @__PURE__ */ e.createElement("div", { className: n.p, "data-align": k }, g.map((r, h) => /* @__PURE__ */ e.createElement(e.Fragment, { key: h }, h > 0 ? /* @__PURE__ */ e.createElement("hr", { className: n.d }) : null, /* @__PURE__ */ e.createElement("div", { className: n.g, role: "group" }, r.title != null ? /* @__PURE__ */ e.createElement("p", { className: n.h }, r.title) : null, r.items.map((c) => {
-      const O = r.items.some(
+    /* @__PURE__ */ e.createElement("div", { className: n.p, "data-align": k }, L.map((r, h) => /* @__PURE__ */ e.createElement(e.Fragment, { key: h }, h > 0 ? /* @__PURE__ */ e.createElement("hr", { className: n.d }) : null, /* @__PURE__ */ e.createElement("div", { className: n.g, role: "group" }, r.title != null ? /* @__PURE__ */ e.createElement("p", { className: n.h }, r.title) : null, r.items.map((c) => {
+      const B = r.items.some(
         (s) => s.checked || s.checkbox || s.status != null || s.icon != null
-      ), B = /* @__PURE__ */ e.createElement($, { item: c });
+      ), D = /* @__PURE__ */ e.createElement(S, { item: c });
       return /* @__PURE__ */ e.createElement(
         "button",
         {
@@ -127,12 +129,12 @@ function le({
           "data-danger": c.danger ? "true" : void 0,
           disabled: c.disabled,
           "aria-checked": c.checked != null || c.checkbox ? !!c.checked : void 0,
-          onClick: () => L(c)
+          onClick: () => w(c)
         },
-        O ? B ?? /* @__PURE__ */ e.createElement("span", { className: n.n, "aria-hidden": !0 }) : null,
+        B ? D ?? /* @__PURE__ */ e.createElement("span", { className: n.n, "aria-hidden": !0 }) : null,
         c.label != null ? /* @__PURE__ */ e.createElement("span", { className: n.l }, c.label) : null,
         c.shortcut != null ? /* @__PURE__ */ e.createElement("span", { className: n.u }, c.shortcut) : null,
-        c.submenu ? /* @__PURE__ */ e.createElement(_, null) : null
+        c.submenu ? /* @__PURE__ */ e.createElement($, null) : null
       );
     })))))
   );

package/dist/Dropdown.d.ts

@@ -63,6 +63,12 @@ export type DropdownProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange
     title?: React.ReactNode;
     /** Выравнивание панели относительно триггера. */
     align?: "start" | "end";
+    /**
+     * Куда открывать панель.
+     * Футер Sidebar передаёт `top`.
+     * @default "auto"
+     */
+    placement?: "auto" | "top" | "bottom";
     /** Контролируемое открытие. */
     open?: boolean;
     /** Начальное открытие (неконтролируемый режим). */
@@ -121,4 +127,4 @@ export type DropdownProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange
  * />
  * ```
  */
-export declare function Dropdown({ items, groups, trigger, label, hideChevron, title, align, open: openProp, defaultOpen, onOpenChange, closeOnSelect, disabled, onSelect, className, }: DropdownProps): React.JSX.Element;
+export declare function Dropdown({ items, groups, trigger, label, hideChevron, title, align, placement, open: openProp, defaultOpen, onOpenChange, closeOnSelect, disabled, onSelect, className, }: DropdownProps): React.JSX.Element;

package/dist/Dropdown.js

@@ -1,4 +1,4 @@
-import { D as p } from "./Dropdown-C6qlqMLV.js";
+import { D as p } from "./Dropdown-B9AodUFf.js";
 export {
   p as Dropdown
 };

package/dist/Header-DZQopVNy.js

@@ -0,0 +1,21 @@
+import l from "react";
+import { c as u } from "./cx-CcykAxZN.js";
+import './Header.css';const o = "chr", i = "chn", d = "cha", e = {
+  r: o,
+  n: i,
+  a: d
+};
+function p({
+  brand: n,
+  nav: c,
+  search: t,
+  actions: a,
+  children: r,
+  className: s,
+  ...m
+}) {
+  return /* @__PURE__ */ l.createElement("header", { className: u(e.r, s), ...m }, n ?? null, c != null ? /* @__PURE__ */ l.createElement("div", { className: e.n }, c) : null, t ?? null, a != null ? /* @__PURE__ */ l.createElement("div", { className: e.a }, a) : null, r);
+}
+export {
+  p as H
+};

package/dist/Header.css

@@ -1 +1 @@
-@layer elcrm-components{.chr{display:flex;align-items:center;gap:var(--shell-gap);flex-shrink:0;min-height:var(--header-height);padding:var(--shell-padding);color:var(--shell-color);background:var(--shell-background);border-bottom:1px solid var(--shell-border);border-radius:var(--header-radius);box-shadow:var(--header-shadow);margin:var(--header-margin);position:relative;z-index:var(--header-z)}.chb{flex-shrink:0}.chn{display:flex;align-items:center;min-width:0}.chs{flex:1;min-width:0;margin-left:auto;max-width:18rem}.cha{display:flex;align-items:center;gap:var(--shell-gap-sm);flex-shrink:0;margin-left:auto}.chs+.cha{margin-left:0}}
+@layer elcrm-components{.chr{display:flex;align-items:center;gap:var(--shell-gap);flex-shrink:0;min-height:var(--header-height);padding:var(--shell-padding);color:var(--shell-color);background:var(--shell-background);border:var(--header-border);border-radius:var(--header-radius);box-shadow:var(--header-shadow);margin:var(--header-margin);position:relative;z-index:var(--header-z)}.chn{display:flex;flex:1;align-items:center;min-width:0}.cha{display:flex;align-items:center;gap:var(--shell-gap-sm);flex-shrink:0;margin:auto}}

package/dist/Header.d.ts

@@ -14,7 +14,8 @@ import { default as React } from 'react';
  * />
  * ```
  *
- * Токены: `--shell-*`, узкие `--header-height`, `--header-z`, `--header-margin`, `--header-shadow`, `--header-radius`.
+ * Токены: `--shell-*`, узкие `--header-height`, `--header-z`, `--header-margin`,
+ * `--header-shadow`, `--header-radius`, `--header-border` (shorthand рамки).
  */
 export type HeaderProps = React.HTMLAttributes<HTMLElement> & {
     /** Логотип / название (часто `<Brand />`) */

package/dist/Header.js

@@ -1,4 +1,4 @@
-import { H as a } from "./Header-Cf28eyjW.js";
+import { H as a } from "./Header-DZQopVNy.js";
 export {
   a as Header
 };

package/dist/Menu.css

@@ -1 +1 @@
-@layer elcrm-components{.cmr{display:flex;align-items:center;gap:var(--shell-gap-sm);margin:0;padding:0;list-style:none}.cmv{flex-direction:column;align-items:stretch}.cmi{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--shell-color-muted);padding:var(--shell-padding);border-radius:var(--shell-radius);font:inherit;line-height:1;cursor:pointer;text-align:left;gap:var(--shell-gap-sm)}.cmd{flex-shrink:0;min-width:16px;height:16px;padding:0 4px;font-size:10px}.cmi>svg{display:block;flex-shrink:0}.cmi:hover{background:var(--shell-background-hover);color:var(--shell-color)}.cma,.cmi[aria-current=page],.cmi[data-active=true]{background:var(--shell-background-selected);color:var(--shell-color)}.cmu{width:100%;align-items:stretch;gap:1.25rem;padding:0;border-bottom:1px solid var(--shell-border)}.cmu .cmi{border-radius:0;background:transparent;padding:.45rem .1rem .55rem;border-bottom:2px solid transparent;margin-bottom:-1px}.cmu .cmi:hover{background:transparent;color:var(--shell-color)}.cmu .cma,.cmu .cmi[aria-current=page],.cmu .cmi[data-active=true]{background:transparent;color:var(--shell-color);border-bottom-color:var(--shell-color-accent)}}
+@layer elcrm-components{.cmr{display:flex;align-items:center;gap:var(--shell-gap-sm);margin:0;padding:0;list-style:none}.cmv{flex-direction:column;align-items:stretch}.cmi{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--button-color-muted);padding:var(--button-padding);border-radius:var(--button-radius);font:inherit;line-height:1;cursor:pointer;text-align:left;gap:var(--shell-gap-sm)}.cmd{flex-shrink:0;min-width:16px;height:16px;padding:0 4px;font-size:10px}.cmi>svg{display:block;flex-shrink:0}.cmi:hover{background:var(--button-background-hover);color:var(--button-color)}.cma,.cmi[aria-current=page],.cmi[data-active=true]{background:var(--button-background-selected);color:var(--button-color)}.cmu{width:100%;align-items:stretch;gap:1.25rem;padding:0;border-bottom:1px solid var(--shell-border)}.cmu .cmi{border-radius:0;background:transparent;padding:.45rem .1rem .55rem;border-bottom:2px solid transparent;margin-bottom:-1px}.cmu .cmi:hover{background:transparent;color:var(--shell-color)}.cmu .cma,.cmu .cmi[aria-current=page],.cmu .cmi[data-active=true]{background:transparent;color:var(--shell-color);border-bottom-color:var(--shell-color-accent)}}

package/dist/Popover-D5RymtcJ.js

@@ -0,0 +1,156 @@
+import u, { useRef as E, useId as $, useState as T, useLayoutEffect as A, useEffect as B } from "react";
+import { createPortal as ee } from "react-dom";
+import { c as F } from "./cx-CcykAxZN.js";
+import { u as te } from "./useControllableValue-CWqH1kpM.js";
+import './Popover.css';const V = 1e3, ne = 10;
+function b() {
+  const e = globalThis;
+  return e.elcrm || (e.elcrm = {}), e.elcrm.overlayZ || (e.elcrm.overlayZ = { seq: 0, active: /* @__PURE__ */ new Set() }), e.elcrm.overlayZ;
+}
+function oe() {
+  const e = b();
+  e.seq += 1;
+  const t = V + e.seq * ne;
+  return e.active.add(t), t;
+}
+function N(e) {
+  const t = b();
+  t.active.delete(e), t.active.size === 0 && (t.seq = 0);
+}
+function ve() {
+  const e = b();
+  return e.active.size === 0 ? V : Math.max(...e.active);
+}
+const se = "c3r", ie = "c3t", re = "c3p", H = {
+  r: se,
+  t: ie,
+  p: re
+};
+function ce(e, t) {
+  const c = (t == null ? void 0 : t.querySelector("button, a, [role='button']")) ?? (t == null ? void 0 : t.firstElementChild);
+  return (c instanceof HTMLElement ? c : t ?? e).getBoundingClientRect();
+}
+function ae(e, t) {
+  return e != null && e.top === t.top && e.left === t.left && e.minWidth === t.minWidth && e.maxHeight === t.maxHeight;
+}
+function le(e, t, c, p) {
+  if (!u.isValidElement(e)) return e;
+  const d = e.props.onClick;
+  return u.cloneElement(e, {
+    "aria-haspopup": "menu",
+    "aria-expanded": t,
+    "aria-controls": t ? c : void 0,
+    onClick: (v) => {
+      d == null || d(v), p();
+    }
+  });
+}
+function he({
+  trigger: e,
+  children: t,
+  open: c,
+  defaultOpen: p = !1,
+  onOpenChange: d,
+  align: v = "end",
+  placement: x = "auto",
+  disabled: z = !1,
+  label: D,
+  role: K = "menu",
+  className: j,
+  panelClassName: G
+}) {
+  const w = E(null), P = E(null), y = E(null), g = $(), [s = !1, J] = te(
+    c,
+    p,
+    d
+  ), [m, W] = T(null), [a, q] = T(null), L = E(null);
+  L.current = a;
+  const M = (o) => {
+    z && o || J(o);
+  };
+  A(() => {
+    if (s) {
+      a == null && q(oe());
+      return;
+    }
+    a != null && (N(a), q(null));
+  }, [s, a]), B(() => () => {
+    L.current != null && N(L.current);
+  }, []);
+  const R = () => {
+    var S;
+    const o = w.current;
+    if (!o) return;
+    const n = ce(o, P.current), i = 8, l = 8, r = ((S = y.current) == null ? void 0 : S.offsetHeight) ?? 0, f = window.innerHeight - n.bottom - i - l, U = n.top - i - l, X = r > 0 ? r : 160, I = x === "bottom" || x !== "top" && f >= X, Y = Math.min(
+      420,
+      Math.max(120, I ? f : U)
+    ), h = Math.max(200, n.width), _ = v === "end" ? Math.max(8, Math.min(n.right - h, window.innerWidth - h - 8)) : Math.max(8, Math.min(n.left, window.innerWidth - h - 8)), O = { top: I ? n.bottom + i : Math.max(l, n.top - i - (r > 0 ? r : 0)), left: _, minWidth: h, maxHeight: Y };
+    W((C) => ae(C, O) ? C : O);
+  };
+  A(() => {
+    if (!s) {
+      W(null);
+      return;
+    }
+    R();
+    const o = window.requestAnimationFrame(() => R()), n = () => R();
+    return window.addEventListener("resize", n), window.addEventListener("scroll", n, !0), () => {
+      window.cancelAnimationFrame(o), window.removeEventListener("resize", n), window.removeEventListener("scroll", n, !0);
+    };
+  }, [s, v, x, t]), B(() => {
+    if (!s) return;
+    const o = (i) => {
+      var r, f;
+      const l = i.target;
+      (r = w.current) != null && r.contains(l) || (f = y.current) != null && f.contains(l) || M(!1);
+    }, n = (i) => {
+      i.key === "Escape" && M(!1);
+    };
+    return document.addEventListener("mousedown", o), document.addEventListener("keydown", n), () => {
+      document.removeEventListener("mousedown", o), document.removeEventListener("keydown", n);
+    };
+  }, [s]);
+  const Q = {
+    position: "fixed",
+    zIndex: a ?? 1e3,
+    ...m ? {
+      top: m.top,
+      bottom: "auto",
+      left: m.left,
+      minWidth: m.minWidth,
+      maxHeight: m.maxHeight
+    } : { visibility: "hidden", pointerEvents: "none" }
+  }, Z = s ? /* @__PURE__ */ u.createElement(
+    "div",
+    {
+      ref: y,
+      id: g,
+      role: K,
+      "aria-label": D,
+      className: F(H.p, G),
+      style: Q,
+      onMouseDown: (o) => o.stopPropagation()
+    },
+    t
+  ) : null, k = () => {
+    z || M(!s);
+  };
+  return /* @__PURE__ */ u.createElement("div", { ref: w, className: F(H.r, j) }, /* @__PURE__ */ u.createElement(
+    "div",
+    {
+      ref: P,
+      className: H.t,
+      "aria-haspopup": "menu",
+      "aria-expanded": s,
+      "aria-controls": s ? g : void 0,
+      onClick: u.isValidElement(e) ? void 0 : k
+    },
+    le(e, s, g, k)
+  ), Z && typeof document < "u" ? ee(Z, document.body) : null);
+}
+export {
+  he as P,
+  oe as a,
+  ve as p,
+  N as r
+};

package/dist/Popover.css

@@ -1 +1 @@
-@layer elcrm-components{.c3r{position:relative;display:inline-flex;vertical-align:middle}.c3t{display:inline-flex;align-items:center;min-width:0}.c3p{box-sizing:border-box;overflow:auto;padding:var(--shell-gap-sm);background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);box-shadow:var(--popup-shadow);color:var(--shell-color);min-width:var(--dropdown-min-width);max-width:var(--dropdown-max-width);max-height:var(--dropdown-max-height)}}
+@layer elcrm-components{.c3r{position:relative;display:inline-flex;vertical-align:middle}.c3t{display:inline-flex;align-items:center;min-width:0;height:auto}.c3p{box-sizing:border-box;overflow:auto;padding:var(--shell-gap-sm);background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);box-shadow:var(--popup-shadow);color:var(--shell-color);min-width:var(--dropdown-min-width);max-width:var(--dropdown-max-width);max-height:var(--dropdown-max-height)}}

package/dist/Popover.d.ts

@@ -1,4 +1,6 @@
 import { default as React } from 'react';
+/** Куда открывать панель относительно якоря. */
+export type PopoverPlacement = "auto" | "top" | "bottom";
 /**
  * Портал у якоря: Escape, клик снаружи, z-index (`globalThis.elcrm.overlayZ`).
  *
@@ -36,6 +38,12 @@ export type PopoverProps = {
     onOpenChange?: (open: boolean) => void;
     /** Выравнивание панели */
     align?: "start" | "end";
+    /**
+     * Куда открывать панель.
+     * `top` — всегда вверх (футер Sidebar).
+     * @default "auto"
+     */
+    placement?: PopoverPlacement;
     /** Не открывать по клику на якорь */
     disabled?: boolean;
     /** aria-label панели */
@@ -51,4 +59,4 @@ export type PopoverProps = {
  *
  * @see Dropdown, Menu
  */
-export declare function Popover({ trigger, children, open: openProp, defaultOpen, onOpenChange, align, disabled, label, role, className, panelClassName, }: PopoverProps): React.JSX.Element;
+export declare function Popover({ trigger, children, open: openProp, defaultOpen, onOpenChange, align, placement, disabled, label, role, className, panelClassName, }: PopoverProps): React.JSX.Element;

package/dist/Popover.js

@@ -1,4 +1,4 @@
-import { P as e } from "./Popover-5dFP4TXx.js";
+import { P as e } from "./Popover-D5RymtcJ.js";
 export {
   e as Popover
 };

package/dist/{Sidebar-D7CTdu37.js → Sidebar-BSOLtF8H.js}

@@ -1,6 +1,6 @@
 import e from "react";
 import { B as h } from "./Badge-jp-9iNNL.js";
-import { D as w } from "./Dropdown-C6qlqMLV.js";
+import { D as w } from "./Dropdown-B9AodUFf.js";
 import { I as y } from "./Item-D4okhsfW.js";
 import { b as C } from "./badgeText-CRzlIzi3.js";
 import { c as u } from "./cx-CcykAxZN.js";
@@ -94,6 +94,7 @@ function S({
       {
         className: l.q,
         align: "start",
+        placement: "top",
         label: g,
         trigger: /* @__PURE__ */ e.createElement(Q, { footer: t, className: l.w }),
         items: d,

package/dist/Sidebar.css

@@ -1 +1 @@
-@layer elcrm-components{.c2r{box-sizing:border-box;display:flex;flex-direction:column;flex:1 1 auto;width:var(--sidebar-width, 248px);min-width:0;min-height:0;height:100%;max-height:100%;padding:var(--sidebar-pad-y, 16px) var(--sidebar-pad-x, 12px);gap:var(--shell-gap-sm, 8px);color:var(--shell-color);align-self:stretch}.c2b{display:flex;flex-direction:row;align-items:center;gap:var(--shell-gap);padding:4px 8px;min-width:0}.c2x{flex-shrink:0;margin-left:auto}.c2g{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--shell-gap-sm);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}.c2s{box-sizing:border-box;flex-shrink:0;padding:8px}.c2p{--sidebar-plain: 1}.c2r:not(.c2p) .c2s{background:var(--sidebar-block-bg);border:1px solid var(--sidebar-block-border);border-radius:var(--sidebar-block-radius);box-shadow:var(--sidebar-block-shadow)}.c2h{margin:2px 10px 6px;font-size:var(--sidebar-group-font-size);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--shell-color-muted)}.c2n{margin:0;padding:0;list-style:none}.c2n>li{list-style:none}.c2n .c2i:is(button){position:relative;display:flex;width:100%;box-sizing:border-box;flex-direction:row;align-items:center;gap:8px;margin:0 0 1px;padding:var(--sidebar-item-padding);border:0;border-radius:8px;background:transparent;color:var(--shell-color-muted);font-family:inherit;font-size:var(--sidebar-item-font-size);font-weight:500;line-height:1.25;letter-spacing:0;text-align:left;cursor:pointer}.c2n .c2i:is(button):hover{color:var(--shell-color);background:var(--shell-background-hover)}.c2n .c2i:is(button).c2a,.c2n .c2i:is(button)[aria-current=page],.c2n .c2i:is(button)[data-active=true],.c2n .c2i:is(button).c2a:hover{color:var(--sidebar-item-active);background:var(--sidebar-item-active-bg)}.c2o{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size);color:inherit}.c2o :is(svg){display:block;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size)}.c2a .c2o{color:var(--sidebar-icon-active)}.c2l{flex:1;min-width:0}.c2d{flex-shrink:0;min-width:16px;height:16px;padding:0 4px;font-size:10px}.c2f{margin-top:auto}.c2q{display:flex;width:100%;min-width:0}.c2q>*{display:flex;width:100%;min-width:0}.c2w{display:flex;width:100%;min-width:0;align-items:center}.c2u{display:flex;align-items:center;width:100%;min-width:0;gap:var(--shell-gap-sm);margin:0;padding:0;border:none;background:transparent;font:inherit;color:inherit;cursor:pointer;text-align:left}.c2k{flex-shrink:0;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size);color:var(--shell-color-muted)}.c2v{margin-top:var(--shell-gap-sm);font-size:11px;color:var(--shell-color-muted);text-align:center}@media (max-width: 900px){.c2r{width:72px;padding:12px 8px}.c2l,.c2h,.c2v{display:none}.c2b{flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:4px 0}.c2x{margin-left:0}.c2s{padding:6px}.c2n .c2i{justify-content:center;align-items:center;gap:0;width:100%;min-height:40px;padding:10px 0}.c2n .c2d{position:absolute;top:4px;right:4px;min-width:14px;height:14px;padding:0 4px;font-size:.625rem;line-height:14px;pointer-events:none}}}
+@layer elcrm-components{.c2r{box-sizing:border-box;display:flex;flex-direction:column;flex:1 1 auto;width:var(--sidebar-width, 248px);min-width:0;min-height:0;height:100%;max-height:100%;padding:var(--sidebar-pad-y, 16px) var(--sidebar-pad-x, 12px);gap:var(--shell-gap-sm, 8px);color:var(--shell-color);align-self:stretch}.c2b{display:flex;flex-direction:row;align-items:center;gap:var(--shell-gap);padding:4px 8px;min-width:0}.c2x{flex-shrink:0;margin-left:auto}.c2g{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--shell-gap-sm);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}.c2s{box-sizing:border-box;flex-shrink:0;padding:8px}.c2p{--sidebar-plain: 1}.c2r:not(.c2p) .c2s{background:var(--sidebar-block-bg);border:1px solid var(--sidebar-block-border);border-radius:var(--sidebar-block-radius);box-shadow:var(--sidebar-block-shadow)}.c2h{margin:2px 10px 6px;font-size:var(--sidebar-group-font-size);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--shell-color-muted)}.c2n{margin:0;padding:0;list-style:none}.c2n>li{list-style:none}.c2n .c2i:is(button){position:relative;display:flex;width:100%;box-sizing:border-box;flex-direction:row;align-items:center;gap:8px;margin:0 0 1px;padding:var(--sidebar-item-padding);border:0;border-radius:8px;background:transparent;color:var(--shell-color-muted);font-family:inherit;font-size:var(--sidebar-item-font-size);font-weight:500;line-height:1.25;letter-spacing:0;text-align:left;cursor:pointer}.c2n .c2i:is(button):hover{color:var(--shell-color);background:var(--shell-background-hover)}.c2n .c2i:is(button).c2a,.c2n .c2i:is(button)[aria-current=page],.c2n .c2i:is(button)[data-active=true],.c2n .c2i:is(button).c2a:hover{color:var(--sidebar-item-active);background:var(--sidebar-item-active-bg)}.c2o{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size);color:inherit}.c2o :is(svg){display:block;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size)}.c2a .c2o{color:var(--sidebar-icon-active)}.c2l{flex:1;min-width:0}.c2d{flex-shrink:0;min-width:16px;height:16px;padding:0 4px;font-size:10px}.c2f{margin-top:auto}.c2q{display:flex;width:100%;min-width:0;flex:0 0 auto;height:auto;align-items:center}.c2q>*{display:flex;width:100%;min-width:0;height:auto;align-items:center}.c2w{display:flex;width:100%;min-width:0;align-items:center}.c2u{display:flex;align-items:center;width:100%;min-width:0;gap:var(--shell-gap-sm);margin:0;padding:0;border:none;background:transparent;font:inherit;color:inherit;cursor:pointer;text-align:left}.c2k{flex-shrink:0;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size);color:var(--shell-color-muted)}.c2v{margin-top:var(--shell-gap-sm);font-size:11px;color:var(--shell-color-muted);text-align:center}@media (max-width: 900px){.c2r{width:72px;padding:12px 8px}.c2l,.c2h,.c2v{display:none}.c2b{flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:4px 0}.c2x{margin-left:0}.c2s{padding:6px}.c2n .c2i{justify-content:center;align-items:center;gap:0;width:100%;min-height:40px;padding:10px 0}.c2n .c2d{position:absolute;top:4px;right:4px;min-width:14px;height:14px;padding:0 4px;font-size:.625rem;line-height:14px;pointer-events:none}}}

package/dist/Sidebar.d.ts

@@ -77,7 +77,7 @@ export type SidebarProps = {
     /** Низ: тема, выход или карточка пользователя */
     footer?: React.ReactNode;
     /**
-     * Меню по клику на `footer` (Dropdown).
+     * Меню по клику на `footer` (Dropdown, `placement="top"`).
      * Есть пункты → футер становится триггером, справа ⋮.
      */
     footerItems?: DropdownItem[];

package/dist/Sidebar.js

@@ -1,4 +1,4 @@
-import { S as e } from "./Sidebar-D7CTdu37.js";
+import { S as e } from "./Sidebar-BSOLtF8H.js";
 export {
   e as Sidebar
 };

package/dist/index.css

@@ -22,7 +22,7 @@
 
 @layer elcrm-components{.cfr{flex-shrink:0;padding:var(--shell-padding);color:var(--shell-color-muted);background:transparent;border-top:1px solid var(--shell-border);font-size:var(--shell-font-size-sm)}}
 
-@layer elcrm-components{.chr{display:flex;align-items:center;gap:var(--shell-gap);flex-shrink:0;min-height:var(--header-height);padding:var(--shell-padding);color:var(--shell-color);background:var(--shell-background);border-bottom:1px solid var(--shell-border);border-radius:var(--header-radius);box-shadow:var(--header-shadow);margin:var(--header-margin);position:relative;z-index:var(--header-z)}.chb{flex-shrink:0}.chn{display:flex;align-items:center;min-width:0}.chs{flex:1;min-width:0;margin-left:auto;max-width:18rem}.cha{display:flex;align-items:center;gap:var(--shell-gap-sm);flex-shrink:0;margin-left:auto}.chs+.cha{margin-left:0}}
+@layer elcrm-components{.chr{display:flex;align-items:center;gap:var(--shell-gap);flex-shrink:0;min-height:var(--header-height);padding:var(--shell-padding);color:var(--shell-color);background:var(--shell-background);border:var(--header-border);border-radius:var(--header-radius);box-shadow:var(--header-shadow);margin:var(--header-margin);position:relative;z-index:var(--header-z)}.chn{display:flex;flex:1;align-items:center;min-width:0}.cha{display:flex;align-items:center;gap:var(--shell-gap-sm);flex-shrink:0;margin:auto}}
 
 @layer elcrm-components{.cir{display:flex;align-items:center;gap:var(--shell-gap-sm);padding:var(--shell-padding);color:var(--shell-color);background:transparent;border:1px solid transparent;border-radius:var(--shell-radius);cursor:default}.cir:is(button,a){-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;text-align:left;width:100%;cursor:pointer}.cir:hover{background:var(--shell-background-hover)}.cia,.cir[aria-current=true],.cir[data-active=true]{background:var(--shell-background-selected)}.cic{align-items:flex-start;gap:var(--shell-gap);padding:var(--shell-padding);border:1px solid var(--shell-border);border-radius:var(--shell-radius);background:var(--shell-background-muted);flex-shrink:0}.cic:hover,.cic.cia,.cic[data-active=true]{background:color-mix(in srgb,var(--shell-color-accent) 12%,var(--shell-background-muted));border-color:color-mix(in srgb,var(--shell-color-accent) 35%,transparent)}}
 
@@ -34,7 +34,7 @@
 
 @layer elcrm-components{.cgr{display:flex;align-items:center;justify-content:center;gap:var(--shell-gap-sm);padding:var(--shell-gap-lg);color:var(--shell-color-muted)}.cgi{box-sizing:border-box;width:var(--shell-icon-size);height:var(--shell-icon-size);border:2px solid var(--shell-border);border-top-color:var(--shell-color-accent);border-radius:var(--avatar-radius);animation:cgspin .7s linear infinite}}@keyframes cgspin{to{transform:rotate(360deg)}}
 
-@layer elcrm-components{.cmr{display:flex;align-items:center;gap:var(--shell-gap-sm);margin:0;padding:0;list-style:none}.cmv{flex-direction:column;align-items:stretch}.cmi{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--shell-color-muted);padding:var(--shell-padding);border-radius:var(--shell-radius);font:inherit;line-height:1;cursor:pointer;text-align:left;gap:var(--shell-gap-sm)}.cmd{flex-shrink:0;min-width:16px;height:16px;padding:0 4px;font-size:10px}.cmi>svg{display:block;flex-shrink:0}.cmi:hover{background:var(--shell-background-hover);color:var(--shell-color)}.cma,.cmi[aria-current=page],.cmi[data-active=true]{background:var(--shell-background-selected);color:var(--shell-color)}.cmu{width:100%;align-items:stretch;gap:1.25rem;padding:0;border-bottom:1px solid var(--shell-border)}.cmu .cmi{border-radius:0;background:transparent;padding:.45rem .1rem .55rem;border-bottom:2px solid transparent;margin-bottom:-1px}.cmu .cmi:hover{background:transparent;color:var(--shell-color)}.cmu .cma,.cmu .cmi[aria-current=page],.cmu .cmi[data-active=true]{background:transparent;color:var(--shell-color);border-bottom-color:var(--shell-color-accent)}}
+@layer elcrm-components{.cmr{display:flex;align-items:center;gap:var(--shell-gap-sm);margin:0;padding:0;list-style:none}.cmv{flex-direction:column;align-items:stretch}.cmi{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--button-color-muted);padding:var(--button-padding);border-radius:var(--button-radius);font:inherit;line-height:1;cursor:pointer;text-align:left;gap:var(--shell-gap-sm)}.cmd{flex-shrink:0;min-width:16px;height:16px;padding:0 4px;font-size:10px}.cmi>svg{display:block;flex-shrink:0}.cmi:hover{background:var(--button-background-hover);color:var(--button-color)}.cma,.cmi[aria-current=page],.cmi[data-active=true]{background:var(--button-background-selected);color:var(--button-color)}.cmu{width:100%;align-items:stretch;gap:1.25rem;padding:0;border-bottom:1px solid var(--shell-border)}.cmu .cmi{border-radius:0;background:transparent;padding:.45rem .1rem .55rem;border-bottom:2px solid transparent;margin-bottom:-1px}.cmu .cmi:hover{background:transparent;color:var(--shell-color)}.cmu .cma,.cmu .cmi[aria-current=page],.cmu .cmi[data-active=true]{background:transparent;color:var(--shell-color);border-bottom-color:var(--shell-color-accent)}}
 
 @layer elcrm-components{.cvr{display:flex;align-items:stretch;gap:var(--shell-gap-lg);width:100%;flex:1 1 auto;min-height:0;box-sizing:border-box;padding:var(--nav-sections-padding)}.cvn{display:flex;flex-direction:column;gap:var(--shell-gap);flex:0 0 var(--nav-sections-nav-width);width:var(--nav-sections-nav-width);min-width:var(--nav-sections-nav-width);box-sizing:border-box}.cvg{display:flex;flex-direction:column;gap:2px;padding-bottom:var(--shell-gap);border-bottom:1px solid var(--shell-border)}.cvg:last-of-type{border-bottom:none;padding-bottom:0}.cvl{font-size:var(--sidebar-group-font-size);font-weight:var(--shell-font-weight);letter-spacing:.04em;text-transform:uppercase;color:var(--shell-color-muted);padding:0 var(--shell-padding-inline) var(--shell-gap-sm)}.cvi:is(button){position:relative;font-size:var(--shell-font-size-sm)}.cva:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 2px 2px 0;background:var(--shell-color-accent)}.cvi:disabled{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.cvc{display:inline-flex;flex:0 0 auto;color:var(--shell-color-muted);line-height:0}.cva .cvc{color:var(--shell-color)}.cvt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cvf{margin-top:auto;padding-top:var(--shell-gap);border-top:1px solid var(--shell-border)}.cvm{flex:1 1 auto;min-width:0;max-width:var(--nav-sections-main-max-width);width:100%;min-height:0;overflow:auto}@media (max-width: 720px){.cvr{flex-direction:column}.cvn{flex:none;width:100%;min-width:0;max-width:none}}}
 
@@ -42,7 +42,7 @@
 
 @layer elcrm-components{.ckr{flex:1 1 auto;min-height:0;height:100%;width:100%;display:flex;flex-direction:column;box-sizing:border-box;padding:var(--shell-padding);overflow:hidden}.ckw{max-width:none}.ckb{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:var(--shell-gap)}.ckf{flex:0 0 auto;padding-top:var(--shell-gap-sm)}.cko{overflow:visible;height:auto}.cko .ckb{overflow:visible;flex:0 1 auto;min-height:auto}}
 
-@layer elcrm-components{.c3r{position:relative;display:inline-flex;vertical-align:middle}.c3t{display:inline-flex;align-items:center;min-width:0}.c3p{box-sizing:border-box;overflow:auto;padding:var(--shell-gap-sm);background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);box-shadow:var(--popup-shadow);color:var(--shell-color);min-width:var(--dropdown-min-width);max-width:var(--dropdown-max-width);max-height:var(--dropdown-max-height)}}
+@layer elcrm-components{.c3r{position:relative;display:inline-flex;vertical-align:middle}.c3t{display:inline-flex;align-items:center;min-width:0;height:auto}.c3p{box-sizing:border-box;overflow:auto;padding:var(--shell-gap-sm);background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);box-shadow:var(--popup-shadow);color:var(--shell-color);min-width:var(--dropdown-min-width);max-width:var(--dropdown-max-width);max-height:var(--dropdown-max-height)}}
 
 @layer elcrm-components{.cur{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--pricing-card-min-width),1fr));gap:var(--shell-gap-lg);align-items:stretch}.cui{position:relative;display:flex;flex-direction:column;gap:var(--shell-gap);padding:var(--shell-padding);box-sizing:border-box;text-align:left;font:inherit;color:var(--shell-color);background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);box-shadow:var(--shell-shadow)}.cui[data-selectable=true]{cursor:pointer}.cui:disabled,.cui[aria-disabled=true]{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.cus,.cui[data-selected=true],.cui[data-highlighted=true]{border-color:var(--shell-color-accent);background:var(--shell-background-selected);box-shadow:var(--shell-shadow)}.cub{display:flex;align-items:center;justify-content:center;margin:calc(-1 * var(--shell-padding-block)) calc(-1 * var(--shell-padding-inline)) 0;padding:var(--shell-gap-sm) var(--shell-padding-inline);border-radius:var(--shell-radius) var(--shell-radius) 0 0;background:var(--shell-color-accent);color:var(--avatar-color);font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);text-align:center}.cug{display:inline-flex;align-items:center;width:fit-content;padding:.15rem .5rem;border-radius:999px;background:var(--shell-background-hover);color:var(--shell-color-accent);font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);line-height:1.2}.cua{position:absolute;top:0;left:50%;transform:translate(-50%,-50%)}.cum{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:calc(var(--shell-icon-size) * 1.6);height:calc(var(--shell-icon-size) * 1.6);color:var(--shell-color-accent);background:var(--shell-background-hover);border-radius:50%;overflow:hidden}.cuh{display:flex;flex-wrap:wrap;align-items:center;gap:var(--shell-gap-sm)}.cut{margin:0;font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.3}.cup{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--shell-gap-sm)}.cuz{font-size:calc(var(--shell-font-size-lg) * 1.35);font-weight:700;color:var(--shell-color);line-height:1.15}.cui[data-highlighted=true] .cuz,.cui[data-selected=true] .cuz{color:var(--shell-color-accent)}.cuo{font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);text-decoration:line-through}.cue{font-size:var(--shell-font-size-sm);color:var(--shell-color-muted)}.cud{margin:0;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);line-height:1.45}.cux{display:flex;flex-direction:column;gap:var(--shell-gap-sm)}.cuf{display:flex;flex-direction:column;gap:var(--shell-gap-sm);margin:auto calc(-1 * var(--shell-padding-inline)) calc(-1 * var(--shell-padding-block));padding:var(--shell-padding);background:var(--shell-background-muted);border-top:1px solid var(--shell-border);border-radius:0 0 var(--shell-radius) var(--shell-radius)}.cuy{display:flex;flex-direction:column;gap:var(--shell-gap-sm);margin-top:auto}.cul{margin:0;font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);letter-spacing:.04em;text-transform:uppercase;color:var(--shell-color-muted)}.cuu{margin:0;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);line-height:1.4}.cun{display:flex;flex-direction:column;gap:var(--shell-gap-sm);margin:0;padding:0;list-style:none}.cuc{display:flex;align-items:flex-start;gap:var(--shell-gap-sm);font-size:var(--shell-font-size-sm);color:var(--shell-color);line-height:1.4}.cuk{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--shell-check-size);height:var(--shell-check-size);margin-top:.1em;color:var(--avatar-color);background:var(--shell-color-success);border-radius:50%}.cuw{width:60%;height:60%;display:block}}
 
@@ -52,7 +52,7 @@
 
 @layer elcrm-components{.cep{display:flex;flex-direction:column;gap:var(--shell-gap);padding:var(--section-padding);flex:1;min-width:0}.ceu{box-sizing:border-box;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:var(--section-padding)}.cek{box-sizing:border-box;width:100%;max-width:var(--section-auth-card-max-width);padding:var(--shell-gap-lg);background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);box-shadow:var(--shell-shadow);display:flex;flex-direction:column;gap:var(--shell-gap)}.ceh{display:flex;flex-direction:column;gap:var(--shell-gap-sm)}.cec{text-align:center;align-items:center}.cei{display:flex;margin-bottom:var(--shell-gap-sm)}.cec .cei{justify-content:center}.cet{margin:0;font-size:var(--section-title-size);font-weight:var(--shell-font-weight);letter-spacing:-.02em;color:var(--shell-color);line-height:1.25}.ced{font-size:var(--section-title-size-md)}.cee{margin:0;font-size:var(--shell-font-size);color:var(--shell-color-muted);line-height:1.45}.ceb{display:flex;flex-direction:column;gap:var(--shell-gap);width:100%;text-align:left}.ces{display:flex;flex-direction:column;gap:var(--shell-gap-sm);width:100%}.cel{display:flex;flex-direction:column;gap:var(--shell-gap);margin-bottom:var(--shell-gap-lg);padding-bottom:var(--shell-gap-lg);border-bottom:1px solid var(--shell-border)}.cel:last-of-type{margin-bottom:0;padding-bottom:0;border-bottom:none}.cel .cet{font-size:var(--shell-font-size);font-weight:var(--shell-font-weight)}}
 
-@layer elcrm-components{.c2r{box-sizing:border-box;display:flex;flex-direction:column;flex:1 1 auto;width:var(--sidebar-width, 248px);min-width:0;min-height:0;height:100%;max-height:100%;padding:var(--sidebar-pad-y, 16px) var(--sidebar-pad-x, 12px);gap:var(--shell-gap-sm, 8px);color:var(--shell-color);align-self:stretch}.c2b{display:flex;flex-direction:row;align-items:center;gap:var(--shell-gap);padding:4px 8px;min-width:0}.c2x{flex-shrink:0;margin-left:auto}.c2g{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--shell-gap-sm);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}.c2s{box-sizing:border-box;flex-shrink:0;padding:8px}.c2p{--sidebar-plain: 1}.c2r:not(.c2p) .c2s{background:var(--sidebar-block-bg);border:1px solid var(--sidebar-block-border);border-radius:var(--sidebar-block-radius);box-shadow:var(--sidebar-block-shadow)}.c2h{margin:2px 10px 6px;font-size:var(--sidebar-group-font-size);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--shell-color-muted)}.c2n{margin:0;padding:0;list-style:none}.c2n>li{list-style:none}.c2n .c2i:is(button){position:relative;display:flex;width:100%;box-sizing:border-box;flex-direction:row;align-items:center;gap:8px;margin:0 0 1px;padding:var(--sidebar-item-padding);border:0;border-radius:8px;background:transparent;color:var(--shell-color-muted);font-family:inherit;font-size:var(--sidebar-item-font-size);font-weight:500;line-height:1.25;letter-spacing:0;text-align:left;cursor:pointer}.c2n .c2i:is(button):hover{color:var(--shell-color);background:var(--shell-background-hover)}.c2n .c2i:is(button).c2a,.c2n .c2i:is(button)[aria-current=page],.c2n .c2i:is(button)[data-active=true],.c2n .c2i:is(button).c2a:hover{color:var(--sidebar-item-active);background:var(--sidebar-item-active-bg)}.c2o{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size);color:inherit}.c2o :is(svg){display:block;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size)}.c2a .c2o{color:var(--sidebar-icon-active)}.c2l{flex:1;min-width:0}.c2d{flex-shrink:0;min-width:16px;height:16px;padding:0 4px;font-size:10px}.c2f{margin-top:auto}.c2q{display:flex;width:100%;min-width:0}.c2q>*{display:flex;width:100%;min-width:0}.c2w{display:flex;width:100%;min-width:0;align-items:center}.c2u{display:flex;align-items:center;width:100%;min-width:0;gap:var(--shell-gap-sm);margin:0;padding:0;border:none;background:transparent;font:inherit;color:inherit;cursor:pointer;text-align:left}.c2k{flex-shrink:0;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size);color:var(--shell-color-muted)}.c2v{margin-top:var(--shell-gap-sm);font-size:11px;color:var(--shell-color-muted);text-align:center}@media (max-width: 900px){.c2r{width:72px;padding:12px 8px}.c2l,.c2h,.c2v{display:none}.c2b{flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:4px 0}.c2x{margin-left:0}.c2s{padding:6px}.c2n .c2i{justify-content:center;align-items:center;gap:0;width:100%;min-height:40px;padding:10px 0}.c2n .c2d{position:absolute;top:4px;right:4px;min-width:14px;height:14px;padding:0 4px;font-size:.625rem;line-height:14px;pointer-events:none}}}
+@layer elcrm-components{.c2r{box-sizing:border-box;display:flex;flex-direction:column;flex:1 1 auto;width:var(--sidebar-width, 248px);min-width:0;min-height:0;height:100%;max-height:100%;padding:var(--sidebar-pad-y, 16px) var(--sidebar-pad-x, 12px);gap:var(--shell-gap-sm, 8px);color:var(--shell-color);align-self:stretch}.c2b{display:flex;flex-direction:row;align-items:center;gap:var(--shell-gap);padding:4px 8px;min-width:0}.c2x{flex-shrink:0;margin-left:auto}.c2g{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--shell-gap-sm);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}.c2s{box-sizing:border-box;flex-shrink:0;padding:8px}.c2p{--sidebar-plain: 1}.c2r:not(.c2p) .c2s{background:var(--sidebar-block-bg);border:1px solid var(--sidebar-block-border);border-radius:var(--sidebar-block-radius);box-shadow:var(--sidebar-block-shadow)}.c2h{margin:2px 10px 6px;font-size:var(--sidebar-group-font-size);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--shell-color-muted)}.c2n{margin:0;padding:0;list-style:none}.c2n>li{list-style:none}.c2n .c2i:is(button){position:relative;display:flex;width:100%;box-sizing:border-box;flex-direction:row;align-items:center;gap:8px;margin:0 0 1px;padding:var(--sidebar-item-padding);border:0;border-radius:8px;background:transparent;color:var(--shell-color-muted);font-family:inherit;font-size:var(--sidebar-item-font-size);font-weight:500;line-height:1.25;letter-spacing:0;text-align:left;cursor:pointer}.c2n .c2i:is(button):hover{color:var(--shell-color);background:var(--shell-background-hover)}.c2n .c2i:is(button).c2a,.c2n .c2i:is(button)[aria-current=page],.c2n .c2i:is(button)[data-active=true],.c2n .c2i:is(button).c2a:hover{color:var(--sidebar-item-active);background:var(--sidebar-item-active-bg)}.c2o{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size);color:inherit}.c2o :is(svg){display:block;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size)}.c2a .c2o{color:var(--sidebar-icon-active)}.c2l{flex:1;min-width:0}.c2d{flex-shrink:0;min-width:16px;height:16px;padding:0 4px;font-size:10px}.c2f{margin-top:auto}.c2q{display:flex;width:100%;min-width:0;flex:0 0 auto;height:auto;align-items:center}.c2q>*{display:flex;width:100%;min-width:0;height:auto;align-items:center}.c2w{display:flex;width:100%;min-width:0;align-items:center}.c2u{display:flex;align-items:center;width:100%;min-width:0;gap:var(--shell-gap-sm);margin:0;padding:0;border:none;background:transparent;font:inherit;color:inherit;cursor:pointer;text-align:left}.c2k{flex-shrink:0;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size);color:var(--shell-color-muted)}.c2v{margin-top:var(--shell-gap-sm);font-size:11px;color:var(--shell-color-muted);text-align:center}@media (max-width: 900px){.c2r{width:72px;padding:12px 8px}.c2l,.c2h,.c2v{display:none}.c2b{flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:4px 0}.c2x{margin-left:0}.c2s{padding:6px}.c2n .c2i{justify-content:center;align-items:center;gap:0;width:100%;min-height:40px;padding:10px 0}.c2n .c2d{position:absolute;top:4px;right:4px;min-width:14px;height:14px;padding:0 4px;font-size:.625rem;line-height:14px;pointer-events:none}}}
 
 @layer elcrm-components{.c1r{box-sizing:border-box;min-width:0;gap:var(--shell-gap)}.c1c,.c1g{width:100%}.c1c{display:flex;flex-direction:column}.c1h{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;width:auto;max-width:100%}.c1g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--stack-grid-min)),1fr))}.c1n{display:grid;width:100%;align-items:stretch;grid-template-columns:var(--stack-columns-template)}}
 

package/dist/index.d.ts

@@ -74,7 +74,7 @@ export type { ChatFrameProps } from './ChatList';
 export { Sidebar } from './Sidebar';
 export type { SidebarProps, SidebarGroup, SidebarItem, SidebarVariant, } from './Sidebar';
 export { Popover } from './Popover';
-export type { PopoverProps } from './Popover';
+export type { PopoverProps, PopoverPlacement } from './Popover';
 export { acquireOverlayZIndex, releaseOverlayZIndex, peekOverlayZIndex, } from './overlayZ';
 export { createLazyResolver } from './lazyRoute';
 export type { LazyRouteChunk } from './lazyRoute';

package/dist/index.es.d.ts

@@ -74,7 +74,7 @@ export type { ChatFrameProps } from './ChatList';
 export { Sidebar } from './Sidebar';
 export type { SidebarProps, SidebarGroup, SidebarItem, SidebarVariant, } from './Sidebar';
 export { Popover } from './Popover';
-export type { PopoverProps } from './Popover';
+export type { PopoverProps, PopoverPlacement } from './Popover';
 export { acquireOverlayZIndex, releaseOverlayZIndex, peekOverlayZIndex, } from './overlayZ';
 export { createLazyResolver } from './lazyRoute';
 export type { LazyRouteChunk } from './lazyRoute';

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import { L as x } from "./Layout-mi6Ghayv.js";
-import { H as i } from "./Header-Cf28eyjW.js";
+import { H as i } from "./Header-DZQopVNy.js";
 import { F as c } from "./Footer-qxUlnPR9.js";
 import { L as u } from "./List-BgKkYaGO.js";
 import { I as S } from "./Item-D4okhsfW.js";
@@ -13,7 +13,7 @@ import { R as g } from "./Row-DsQOVn18.js";
 import { C as F } from "./Column-BiogBDf8.js";
 import { S as H, s as M } from "./Stack-XkmPSswj.js";
 import { M as Z } from "./Menu-DuXQv-zT.js";
-import { D as z } from "./Dropdown-C6qlqMLV.js";
+import { D as z } from "./Dropdown-B9AodUFf.js";
 import { B as E } from "./Breadcrumb-CAM_e9LN.js";
 import { L as j } from "./Loading-DkkG7RcE.js";
 import { S as K } from "./Section-Crxk2J-E.js";
@@ -33,8 +33,8 @@ import { P as Pr } from "./PageShell-D9EZiO8o.js";
 import { C as Ar, a as Br } from "./ChatSplit-DNnu3TNq.js";
 import { C as Ir } from "./ChatFrame-BW2TmCkZ.js";
 import { C as Rr } from "./ChatMessages-B8rdXiK-.js";
-import { S as Gr } from "./Sidebar-D7CTdu37.js";
-import { P as gr, a as kr, p as Fr, r as Nr } from "./Popover-5dFP4TXx.js";
+import { S as Gr } from "./Sidebar-BSOLtF8H.js";
+import { P as gr, a as kr, p as Fr, r as Nr } from "./Popover-D5RymtcJ.js";
 import { lazy as e } from "react";
 import { c as Mr } from "./cx-CcykAxZN.js";
 function s(a) {

package/dist/tokens.css

@@ -32,6 +32,8 @@
   --header-shadow: none;
   --header-margin: 0;
   --header-z: 20;
+  /* shorthand: толщина + стиль + цвет, все стороны. Только снизу — `none` и линия через --header-shadow */
+  --header-border: 1px solid var(--shell-border);
 
   /* —— section / nav-sections —— */
   --section-padding: 1.5rem 1.75rem 2.5rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elcrm/components",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Shell UI elCRM: Layout, Header, Sidebar, Popover, PageHead, PageShell, Section, Stack, Stat, ActionGroup, TextGroup, ItemColumn и др.",
   "type": "module",
   "author": "MaSkal <dev@elcrm.online>",

package/dist/Header-Cf28eyjW.js

@@ -1,23 +0,0 @@
-import e from "react";
-import { c as o } from "./cx-CcykAxZN.js";
-import './Header.css';const u = "chr", i = "chb", d = "chn", h = "chs", E = "cha", l = {
-  r: u,
-  b: i,
-  n: d,
-  s: h,
-  a: E
-};
-function f({
-  brand: c,
-  nav: n,
-  search: s,
-  actions: t,
-  children: a,
-  className: r,
-  ...m
-}) {
-  return /* @__PURE__ */ e.createElement("header", { className: o(l.r, r), ...m }, c != null ? /* @__PURE__ */ e.createElement("div", { className: l.b }, c) : null, n != null ? /* @__PURE__ */ e.createElement("div", { className: l.n }, n) : null, s != null ? /* @__PURE__ */ e.createElement("div", { className: l.s }, s) : null, t != null ? /* @__PURE__ */ e.createElement("div", { className: l.a }, t) : null, a);
-}
-export {
-  f as H
-};

package/dist/Popover-5dFP4TXx.js

@@ -1,149 +0,0 @@
-import l, { useRef as g, useId as j, useState as H, useLayoutEffect as S, useEffect as W } from "react";
-import { createPortal as G } from "react-dom";
-import { c as C } from "./cx-CcykAxZN.js";
-import { u as J } from "./useControllableValue-CWqH1kpM.js";
-import './Popover.css';const B = 1e3, Q = 10;
-function L() {
-  const e = globalThis;
-  return e.elcrm || (e.elcrm = {}), e.elcrm.overlayZ || (e.elcrm.overlayZ = { seq: 0, active: /* @__PURE__ */ new Set() }), e.elcrm.overlayZ;
-}
-function U() {
-  const e = L();
-  e.seq += 1;
-  const n = B + e.seq * Q;
-  return e.active.add(n), n;
-}
-function T(e) {
-  const n = L();
-  n.active.delete(e), n.active.size === 0 && (n.seq = 0);
-}
-function re() {
-  const e = L();
-  return e.active.size === 0 ? B : Math.max(...e.active);
-}
-const X = "c3r", Y = "c3t", _ = "c3p", b = {
-  r: X,
-  t: Y,
-  p: _
-};
-function $(e, n, v, w) {
-  if (!l.isValidElement(e)) return e;
-  const u = e.props.onClick;
-  return l.cloneElement(e, {
-    "aria-haspopup": "menu",
-    "aria-expanded": n,
-    "aria-controls": n ? v : void 0,
-    onClick: (p) => {
-      u == null || u(p), w();
-    }
-  });
-}
-function se({
-  trigger: e,
-  children: n,
-  open: v,
-  defaultOpen: w = !1,
-  onOpenChange: u,
-  align: p = "end",
-  disabled: M = !1,
-  label: N,
-  role: V = "menu",
-  className: D,
-  panelClassName: A
-}) {
-  const h = g(null), R = g(null), E = j(), [o = !1, F] = J(
-    v,
-    w,
-    u
-  ), [i, z] = H(null), [a, P] = H(null), x = g(null);
-  x.current = a;
-  const y = (t) => {
-    M && t || F(t);
-  };
-  S(() => {
-    if (o) {
-      a == null && P(U());
-      return;
-    }
-    a != null && (T(a), P(null));
-  }, [o, a]), W(() => () => {
-    x.current != null && T(x.current);
-  }, []);
-  const Z = () => {
-    const t = h.current;
-    if (!t) return;
-    const r = t.getBoundingClientRect(), s = 8, c = window.innerHeight - r.bottom - s - 8, d = r.top - s - 8, m = c >= 160 || c >= d, O = Math.min(420, Math.max(120, m ? c : d)), f = Math.max(200, r.width), q = p === "end" ? Math.max(8, Math.min(r.right - f, window.innerWidth - f - 8)) : Math.max(8, Math.min(r.left, window.innerWidth - f - 8));
-    z(
-      m ? { top: r.bottom + s, left: q, minWidth: f, maxHeight: O } : {
-        bottom: window.innerHeight - r.top + s,
-        left: q,
-        minWidth: f,
-        maxHeight: O
-      }
-    );
-  };
-  S(() => {
-    if (!o) {
-      z(null);
-      return;
-    }
-    Z();
-    const t = () => Z();
-    return window.addEventListener("resize", t), window.addEventListener("scroll", t, !0), () => {
-      window.removeEventListener("resize", t), window.removeEventListener("scroll", t, !0);
-    };
-  }, [o, p]), W(() => {
-    if (!o) return;
-    const t = (s) => {
-      var d, m;
-      const c = s.target;
-      (d = h.current) != null && d.contains(c) || (m = R.current) != null && m.contains(c) || y(!1);
-    }, r = (s) => {
-      s.key === "Escape" && y(!1);
-    };
-    return document.addEventListener("mousedown", t), document.addEventListener("keydown", r), () => {
-      document.removeEventListener("mousedown", t), document.removeEventListener("keydown", r);
-    };
-  }, [o]);
-  const K = {
-    position: "fixed",
-    zIndex: a ?? 1e3,
-    ...i ? {
-      ...i.top != null ? { top: i.top } : { bottom: i.bottom },
-      left: i.left,
-      minWidth: i.minWidth,
-      maxHeight: i.maxHeight
-    } : { visibility: "hidden", pointerEvents: "none" }
-  }, k = o ? /* @__PURE__ */ l.createElement(
-    "div",
-    {
-      ref: R,
-      id: E,
-      role: V,
-      "aria-label": N,
-      className: C(b.p, A),
-      style: K,
-      onMouseDown: (t) => t.stopPropagation()
-    },
-    n
-  ) : null, I = () => {
-    M || y(!o);
-  };
-  return /* @__PURE__ */ l.createElement("div", { ref: h, className: C(b.r, D) }, /* @__PURE__ */ l.createElement(
-    "div",
-    {
-      className: b.t,
-      "aria-haspopup": "menu",
-      "aria-expanded": o,
-      "aria-controls": o ? E : void 0,
-      onClick: l.isValidElement(e) ? void 0 : I
-    },
-    $(e, o, E, I)
-  ), k && typeof document < "u" ? G(k, document.body) : null);
-}
-export {
-  se as P,
-  U as a,
-  re as p,
-  T as r
-};