@homecode/ui 5.12.0 → 5.14.1

package/dist/esm/src/components/Dialogue/Dialogue.js

@@ -1,9 +1,9 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import cn from 'classnames';
 import { useState, useRef, useId, useEffect } from 'react';
-import { createPortal } from 'react-dom';
 import { Card, CardHeader, CardContent, CardFooter } from '../Card/Card.js';
 import { Icon } from '../Icon/Icon.js';
+import { Portal } from '../Portal/Portal.js';
 import { isBrowser } from '../../tools/env.js';
 import S from './Dialogue.styl.js';
 
@@ -99,11 +99,7 @@ function Dialogue({ open, onOpenChange, disabled, trigger, title, subtitle, icon
                         ? `min(${String(maxHeight)}, calc(100% - var(--p-5)))`
                         : undefined,
                 }, children: [(title || subtitle || icon) && (jsx(CardHeader, { icon: icon, title: title, description: subtitle, titleId: titleId, descriptionId: descriptionId })), jsx("button", { className: S.dialogClose, onClick: handleCloseClick, "aria-label": "Close dialog", type: "button", children: jsx(Icon, { type: "close", size: "m" }) }), content && (jsx(CardContent, { className: contentClassName, noScroll: noScroll, autoScrollBottom: autoScrollBottom, children: content })), footer && (jsx(CardFooter, { className: FOOTER_ALIGN_CLASS[footerAlignment], children: footer }))] })] }));
-    return (jsxs(Fragment, { children: [trigger && jsx("div", { onClick: onTriggerClick, children: trigger }), open &&
-                !disabled &&
-                isMounted &&
-                isBrowser &&
-                createPortal(dialogueContent, document.body)] }));
+    return (jsxs(Fragment, { children: [trigger && jsx("div", { onClick: onTriggerClick, children: trigger }), open && !disabled && isMounted && isBrowser && (jsx(Portal, { children: dialogueContent }))] }));
 }
 
 export { Dialogue, S as DialogueStyles };

package/dist/esm/src/components/Dialogue/Dialogue.styl.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Dialogue_dialogOverlay__jjBIa{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:var(--decent-color-alpha-900);inset:0;opacity:0;position:fixed;transition:opacity .2s ease-out;z-index:50}.Dialogue_dialogOverlay__jjBIa.Dialogue_isOpen__gISMb{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialogue_fadeIn__RSEB2;animation-timing-function:ease-out;opacity:1}.Dialogue_dialogContent__-Lxde{border-radius:var(--border-radius-l);box-shadow:0 10px 20px rgba(0,0,0,.3),0 0 0 2px var(--decent-color-alpha-800);display:flex;flex-direction:column;left:50%;max-height:calc(100% - var(--p-5));opacity:0;position:fixed;top:50%;transform:translateX(-50%) translateY(-50%) scale(.95);transition:opacity .2s ease-out,transform .2s ease-out;width:-moz-fit-content;width:fit-content;z-index:50}.Dialogue_dialogContent__-Lxde.Dialogue_isOpen__gISMb{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialogue_dialogueIn__M0tLL;animation-timing-function:ease-out;opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}.Dialogue_dialogContent__-Lxde.Dialogue_isClosed__lHYyZ{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialogue_dialogueOut__6bLTY;animation-timing-function:ease-in;opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-50%) scale(.95)}@media (max-width:700px){.Dialogue_dialogContent__-Lxde{max-width:calc(100% - var(--p-5));width:calc(100% - var(--p-5))}}.Dialogue_dialogContent__-Lxde:has(.Dialogue_dialogClose__5q12n) [data-slot=card-header]{padding-right:calc(2rem + var(--p-3))}.Dialogue_size-default__X1sdB{max-width:40rem}.Dialogue_size-login__GyixB{max-width:24rem}.Dialogue_size-wide__HQbiX{max-width:calc(100% - var(--p-5))}@media (min-width:700px){.Dialogue_size-wide__HQbiX{max-width:80rem}}.Dialogue_dialogClose__5q12n{align-items:center;background-color:transparent;border:none;border-radius:var(--border-radius-s);box-shadow:inset 0 0 0 2px none;color:var(--accent-color);cursor:pointer;display:flex;height:2rem;justify-content:center;opacity:.3;position:absolute;right:var(--p-3);top:var(--p-3);transform-origin:center;transition:opacity .2s ease,transform .2s ease;width:2rem;z-index:10}.Dialogue_dialogClose__5q12n:focus-visible,.Dialogue_dialogClose__5q12n:hover{opacity:1;transform:scale(1.1)}.Dialogue_dialogClose__5q12n:focus-visible{box-shadow:0 0 0 2px var(--active-color)}.Dialogue_dialogClose__5q12n:disabled{pointer-events:none}.Dialogue_footerAlignLeft__xQUD8{justify-content:flex-start}.Dialogue_footerAlignCenter__yq9Mu{justify-content:center}.Dialogue_footerAlignRight__Yo7hG{justify-content:flex-end}@keyframes Dialogue_fadeIn__RSEB2{0%{opacity:0}to{opacity:1}}@keyframes Dialogue_dialogueIn__M0tLL{0%{opacity:0;transform:translateX(-50%) translateY(-50%) scale(.95)}to{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}}@keyframes Dialogue_dialogueOut__6bLTY{0%{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}to{opacity:0;transform:translateX(-50%) translateY(-50%) scale(.95)}}";
+var css_248z = ".Dialogue_dialogOverlay__jjBIa{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:var(--decent-color-alpha-900);inset:0;opacity:0;position:fixed;transition:opacity .2s ease-out;z-index:10}.Dialogue_dialogOverlay__jjBIa.Dialogue_isOpen__gISMb{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialogue_fadeIn__RSEB2;animation-timing-function:ease-out;opacity:1}.Dialogue_dialogContent__-Lxde{border-radius:var(--border-radius-l);box-shadow:0 10px 20px rgba(0,0,0,.3),0 0 0 2px var(--decent-color-alpha-800);display:flex;flex-direction:column;left:50%;max-height:calc(100% - var(--p-5));opacity:0;position:fixed;top:50%;transform:translateX(-50%) translateY(-50%) scale(.95);transition:opacity .2s ease-out,transform .2s ease-out;width:-moz-fit-content;width:fit-content;z-index:10}.Dialogue_dialogContent__-Lxde.Dialogue_isOpen__gISMb{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialogue_dialogueIn__M0tLL;animation-timing-function:ease-out;opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}.Dialogue_dialogContent__-Lxde.Dialogue_isClosed__lHYyZ{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialogue_dialogueOut__6bLTY;animation-timing-function:ease-in;opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-50%) scale(.95)}@media (max-width:700px){.Dialogue_dialogContent__-Lxde{max-width:calc(100% - var(--p-5));width:calc(100% - var(--p-5))}}.Dialogue_dialogContent__-Lxde:has(.Dialogue_dialogClose__5q12n) [data-slot=card-header]{padding-right:calc(2rem + var(--p-3))}.Dialogue_size-default__X1sdB{max-width:40rem}.Dialogue_size-login__GyixB{max-width:24rem}.Dialogue_size-wide__HQbiX{max-width:calc(100% - var(--p-5))}@media (min-width:700px){.Dialogue_size-wide__HQbiX{max-width:80rem}}.Dialogue_dialogClose__5q12n{align-items:center;background-color:transparent;border:none;border-radius:var(--border-radius-s);box-shadow:inset 0 0 0 2px none;color:var(--accent-color);cursor:pointer;display:flex;height:2rem;justify-content:center;opacity:.3;position:absolute;right:var(--p-3);top:var(--p-3);transform-origin:center;transition:opacity .2s ease,transform .2s ease;width:2rem;z-index:10}.Dialogue_dialogClose__5q12n:focus-visible,.Dialogue_dialogClose__5q12n:hover{opacity:1;transform:scale(1.1)}.Dialogue_dialogClose__5q12n:focus-visible{box-shadow:0 0 0 2px var(--active-color)}.Dialogue_dialogClose__5q12n:disabled{pointer-events:none}.Dialogue_footerAlignLeft__xQUD8{justify-content:flex-start}.Dialogue_footerAlignCenter__yq9Mu{justify-content:center}.Dialogue_footerAlignRight__Yo7hG{justify-content:flex-end}@keyframes Dialogue_fadeIn__RSEB2{0%{opacity:0}to{opacity:1}}@keyframes Dialogue_dialogueIn__M0tLL{0%{opacity:0;transform:translateX(-50%) translateY(-50%) scale(.95)}to{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}}@keyframes Dialogue_dialogueOut__6bLTY{0%{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}to{opacity:0;transform:translateX(-50%) translateY(-50%) scale(.95)}}";
 var S = {"dialogOverlay":"Dialogue_dialogOverlay__jjBIa","isOpen":"Dialogue_isOpen__gISMb","fadeIn":"Dialogue_fadeIn__RSEB2","dialogContent":"Dialogue_dialogContent__-Lxde","dialogueIn":"Dialogue_dialogueIn__M0tLL","isClosed":"Dialogue_isClosed__lHYyZ","dialogueOut":"Dialogue_dialogueOut__6bLTY","dialogClose":"Dialogue_dialogClose__5q12n","size-default":"Dialogue_size-default__X1sdB","size-login":"Dialogue_size-login__GyixB","size-wide":"Dialogue_size-wide__HQbiX","footerAlignLeft":"Dialogue_footerAlignLeft__xQUD8","footerAlignCenter":"Dialogue_footerAlignCenter__yq9Mu","footerAlignRight":"Dialogue_footerAlignRight__Yo7hG"};
 styleInject(css_248z);
 

package/dist/esm/src/components/NestedMenu/NestedMenu.js

@@ -1,11 +1,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import cn from 'classnames';
-import { useRef, useState, useEffect, useLayoutEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { Icon } from '../Icon/Icon.js';
+import { Popup } from '../Popup/Popup.js';
 import S from './NestedMenu.styl.js';
 
 const MOBILE_MQ = '(max-width: 720px)';
 const HOVER_MQ = '(hover: hover) and (pointer: fine)';
+const ICON_SIZE = { xs: 'xs', s: 'xs', m: 'xs', l: 's', xl: 'm' };
 function useMedia(query) {
     const [matches, setMatches] = useState(() => typeof window !== 'undefined' && window.matchMedia(query).matches);
     useEffect(() => {
@@ -27,14 +29,13 @@ function NestedMenuItemRow({ children, className, danger, disabled, href, target
     }
     return (jsx("button", { type: "button", className: classes, disabled: disabled, onClick: onClick, children: children }));
 }
-function NestedMenuComponent({ trigger, items, open, onOpenChange, align = 'end', className, }) {
-    const rootRef = useRef(null);
+function NestedMenuComponent({ trigger, items, open, onOpenChange, align = 'end', size = 'm', className, popupProps, }) {
     const [activeId, setActiveId] = useState(null);
-    const [flipLeft, setFlipLeft] = useState(false);
-    const hoverTimer = useRef(0);
     const stacked = useMedia(MOBILE_MQ);
     const canHover = useMedia(HOVER_MQ);
     const active = items.find(item => item.id === activeId);
+    const iconSize = ICON_SIZE[size];
+    const contentClass = cn(S.content, S[`size-${size}`]);
     function close() {
         onOpenChange(false);
         setActiveId(null);
@@ -54,40 +55,9 @@ function NestedMenuComponent({ trigger, items, open, onOpenChange, align = 'end'
             if (e.key === 'Escape')
                 close();
         };
-        const onPointer = (e) => {
-            if (!rootRef.current?.contains(e.target))
-                close();
-        };
         document.addEventListener('keydown', onKey);
-        document.addEventListener('pointerdown', onPointer);
-        return () => {
-            document.removeEventListener('keydown', onKey);
-            document.removeEventListener('pointerdown', onPointer);
-        };
+        return () => document.removeEventListener('keydown', onKey);
     }, [open]);
-    useLayoutEffect(() => {
-        if (!open || !rootRef.current)
-            return;
-        const rect = rootRef.current.getBoundingClientRect();
-        setFlipLeft(window.innerWidth - rect.right < 280);
-    }, [open, activeId]);
-    useEffect(() => () => window.clearTimeout(hoverTimer.current), []);
-    function onItemEnter(id) {
-        if (!canHover || stacked)
-            return;
-        window.clearTimeout(hoverTimer.current);
-        const item = items.find(entry => entry.id === id);
-        if (item?.disabled || !item?.submenu) {
-            setActiveId(null);
-            return;
-        }
-        openSub(id, false);
-    }
-    function onItemLeave() {
-        if (!canHover || stacked)
-            return;
-        hoverTimer.current = window.setTimeout(() => setActiveId(null), 160);
-    }
     function onItemClick(id) {
         const item = items.find(entry => entry.id === id);
         if (!item || item.disabled)
@@ -97,18 +67,47 @@ function NestedMenuComponent({ trigger, items, open, onOpenChange, align = 'end'
             close();
             return;
         }
-        if (activeId === id && !stacked) {
+        if (!item.submenu)
+            return;
+        if (activeId === id && !stacked && !canHover) {
             setActiveId(null);
             return;
         }
         openSub(id, true);
     }
+    function renderItemButton(item) {
+        return (jsxs("button", { type: "button", className: cn(S.item, activeId === item.id && S.itemActive, item.danger && S.itemDanger, item.disabled && S.itemDisabled, item.wrap && S.multiline, item.className), role: "menuitem", disabled: item.disabled, "aria-haspopup": item.submenu ? 'menu' : undefined, "aria-expanded": item.submenu ? activeId === item.id : undefined, onClick: () => onItemClick(item.id), children: [item.icon && (jsx("span", { className: S.icon, "aria-hidden": true, children: item.icon })), jsx("span", { className: S.label, children: item.label }), item.hint != null && item.hint !== '' && (jsx("span", { className: S.hint, children: item.hint })), item.submenu && (jsx(Icon, { className: S.chevron, type: "chevronRight", size: iconSize }))] }));
+    }
     function renderItems() {
-        return items.map(item => (jsxs("div", { className: S.itemWrap, onMouseEnter: () => onItemEnter(item.id), onMouseLeave: onItemLeave, children: [jsxs("button", { type: "button", className: cn(S.item, activeId === item.id && S.itemActive, item.danger && S.itemDanger, item.disabled && S.itemDisabled, item.wrap && S.multiline, item.className), role: "menuitem", disabled: item.disabled, "aria-haspopup": item.submenu ? 'menu' : undefined, "aria-expanded": item.submenu ? activeId === item.id : undefined, onClick: () => onItemClick(item.id), children: [item.icon && (jsx("span", { className: S.icon, "aria-hidden": true, children: item.icon })), jsx("span", { className: S.label, children: item.label }), item.hint != null && item.hint !== '' && (jsx("span", { className: S.hint, children: item.hint })), item.submenu && (jsx(Icon, { className: S.chevron, type: "chevronRight", size: "xs" }))] }), !stacked && activeId === item.id && item.submenu && (jsx("div", { className: cn(S.submenu, flipLeft && S.submenuLeft), role: "menu", onMouseEnter: () => {
-                        window.clearTimeout(hoverTimer.current);
-                    }, children: item.submenu }))] }, item.id)));
+        return items.map(item => {
+            if (item.submenu && !stacked) {
+                return (jsx(Popup, { ...popupProps, className: cn(S.itemPopup, popupProps?.className), size: size, hoverControl: canHover, isOpen: activeId === item.id, onOpen: () => openSub(item.id, true), onClose: () => {
+                        setActiveId(current => (current === item.id ? null : current));
+                    }, direction: align === 'end' ? 'left-top' : 'right-top', trigger: renderItemButton(item), triggerProps: {
+                        ...popupProps?.triggerProps,
+                        className: cn(S.itemTrigger, popupProps?.triggerProps?.className),
+                    }, contentProps: {
+                        ...popupProps?.contentProps,
+                        className: cn(contentClass, popupProps?.contentProps?.className),
+                    }, content: jsx("div", { className: S.list, role: "menu", children: item.submenu }) }, item.id));
+            }
+            return (jsx("div", { className: S.itemWrap, onPointerEnter: () => {
+                    if (canHover && !stacked)
+                        setActiveId(null);
+                }, children: renderItemButton(item) }, item.id));
+        });
     }
-    return (jsxs("div", { ref: rootRef, className: cn(S.root, className), children: [jsx("div", { className: S.trigger, onClick: () => onOpenChange(!open), children: trigger }), open && (jsxs("div", { className: cn(S.popup, align === 'end' && S.alignEnd), role: "menu", children: [stacked && active && (jsxs("div", { className: S.stacked, children: [jsxs("button", { type: "button", className: S.back, onClick: () => setActiveId(null), children: [jsx(Icon, { type: "chevronLeft", size: "xs" }), jsx("span", { className: S.label, children: active.label })] }), jsx("div", { className: S.stackedBody, children: active.submenu })] })), (!stacked || !active) && renderItems()] }))] }));
+    return (jsx(Popup, { ...popupProps, className: cn(S.root, className, popupProps?.className), size: size, isOpen: open, onOpen: () => onOpenChange(true), onClose: () => {
+            onOpenChange(false);
+            setActiveId(null);
+        }, direction: align === 'end' ? 'bottom-left' : 'bottom-right', trigger: trigger, triggerProps: {
+            ...popupProps?.triggerProps,
+            className: cn(S.trigger, popupProps?.triggerProps?.className),
+            onClick: () => onOpenChange(!open),
+        }, contentProps: {
+            ...popupProps?.contentProps,
+            className: cn(contentClass, popupProps?.contentProps?.className),
+        }, content: jsx("div", { className: S.list, role: "menu", children: stacked && active ? (jsxs("div", { className: S.stacked, children: [jsxs("button", { type: "button", className: S.back, onClick: () => setActiveId(null), children: [jsx(Icon, { type: "chevronLeft", size: iconSize }), jsx("span", { className: S.label, children: active.label })] }), jsx("div", { className: S.stackedBody, children: active.submenu })] })) : (renderItems()) }) }));
 }
 const NestedMenu = Object.assign(NestedMenuComponent, {
     Item: NestedMenuItemRow,

package/dist/esm/src/components/NestedMenu/NestedMenu.styl.js

@@ -1,7 +1,7 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".NestedMenu_root__ybyGA{display:inline-flex;position:relative}.NestedMenu_trigger__zBeNI{display:inline-flex}.NestedMenu_popup__q0uYO{background:var(--decent-color);border:1px solid var(--accent-color-alpha-200);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:1px;left:0;max-width:280px;min-width:200px;padding:4px;position:absolute;top:calc(100% + 6px);z-index:20}.NestedMenu_alignEnd__L4AZi{left:auto;right:0}.NestedMenu_itemWrap__Qmc0B{position:relative}.NestedMenu_back__dNsDV,.NestedMenu_item__tgbZm,.NestedMenu_row__48g5c{align-items:center;background:none;border:none;border-radius:6px;color:inherit;cursor:pointer;display:flex;font:inherit;font-size:13px;font-weight:500;gap:8px;letter-spacing:.01em;line-height:1.3;padding:6px 10px;text-align:left;text-decoration:none;width:100%}.NestedMenu_back__dNsDV:hover,.NestedMenu_item__tgbZm:hover,.NestedMenu_row__48g5c:hover{background:var(--accent-color-alpha-50)}.NestedMenu_back__dNsDV.NestedMenu_itemActive__RfPZH,.NestedMenu_item__tgbZm.NestedMenu_itemActive__RfPZH,.NestedMenu_row__48g5c.NestedMenu_itemActive__RfPZH{background:var(--accent-color-alpha-100)}.NestedMenu_back__dNsDV.NestedMenu_itemDisabled__evVk1,.NestedMenu_back__dNsDV:disabled,.NestedMenu_item__tgbZm.NestedMenu_itemDisabled__evVk1,.NestedMenu_item__tgbZm:disabled,.NestedMenu_row__48g5c.NestedMenu_itemDisabled__evVk1,.NestedMenu_row__48g5c:disabled{cursor:default;opacity:.55;pointer-events:none}.NestedMenu_itemDanger__oAJbP{color:var(--active-color)}.NestedMenu_itemDanger__oAJbP .NestedMenu_icon__4g2Yp{color:inherit;opacity:1}.NestedMenu_icon__4g2Yp{display:inline-flex;flex-shrink:0;opacity:.55}.NestedMenu_icon__4g2Yp svg{display:block}.NestedMenu_label__Jnm6l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.NestedMenu_hint__hotNP{flex-shrink:0;font-weight:400;opacity:.5}.NestedMenu_multiline__MDdk-{grid-row-gap:2px;align-items:start;display:grid;grid-template-columns:auto minmax(0,1fr);min-width:252px;row-gap:2px}.NestedMenu_multiline__MDdk- .NestedMenu_label__Jnm6l{overflow:visible;text-overflow:clip}.NestedMenu_multiline__MDdk- .NestedMenu_hint__hotNP{grid-column:2;min-width:0;white-space:normal}.NestedMenu_chevron__8i-Po{flex-shrink:0;opacity:.45}.NestedMenu_row__48g5c svg{color:var(--active-color);flex-shrink:0}.NestedMenu_submenu__Tx1Ll{background:var(--decent-color);border:1px solid var(--accent-color-alpha-200);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.45);left:calc(100% + 6px);max-height:min(360px,calc(100vh - 24px));max-width:280px;min-width:220px;overflow-x:hidden;overflow-y:auto;padding:4px;position:absolute;top:-4px;z-index:21}.NestedMenu_submenu__Tx1Ll:before{bottom:0;content:\"\";left:-6px;position:absolute;top:0;width:6px}.NestedMenu_submenuLeft__y18Nb{left:auto;right:calc(100% + 6px)}.NestedMenu_submenuLeft__y18Nb:before{left:auto;right:-6px}.NestedMenu_stacked__rMiOi{display:flex;flex-direction:column;max-height:min(360px,calc(100vh - 24px));overflow-y:auto}.NestedMenu_back__dNsDV{font-weight:650;margin-bottom:2px}.NestedMenu_stackedBody__Fbkma{min-width:0}";
-var S = {"root":"NestedMenu_root__ybyGA","trigger":"NestedMenu_trigger__zBeNI","popup":"NestedMenu_popup__q0uYO","alignEnd":"NestedMenu_alignEnd__L4AZi","itemWrap":"NestedMenu_itemWrap__Qmc0B","item":"NestedMenu_item__tgbZm","row":"NestedMenu_row__48g5c","back":"NestedMenu_back__dNsDV","itemActive":"NestedMenu_itemActive__RfPZH","itemDisabled":"NestedMenu_itemDisabled__evVk1","itemDanger":"NestedMenu_itemDanger__oAJbP","icon":"NestedMenu_icon__4g2Yp","label":"NestedMenu_label__Jnm6l","hint":"NestedMenu_hint__hotNP","multiline":"NestedMenu_multiline__MDdk-","chevron":"NestedMenu_chevron__8i-Po","submenu":"NestedMenu_submenu__Tx1Ll","submenuLeft":"NestedMenu_submenuLeft__y18Nb","stacked":"NestedMenu_stacked__rMiOi","stackedBody":"NestedMenu_stackedBody__Fbkma"};
+var css_248z = ".NestedMenu_root__ybyGA,.NestedMenu_trigger__zBeNI{display:inline-flex}.NestedMenu_content__OyLXN{box-sizing:border-box;max-width:280px;min-width:200px;padding:4px}.NestedMenu_list__Q55Aa{display:flex;flex-direction:column;gap:1px}.NestedMenu_itemPopup__kMaxU{display:block;width:100%}.NestedMenu_itemTrigger__a7XHw{cursor:inherit;display:block;width:100%}.NestedMenu_itemWrap__Qmc0B{position:relative}.NestedMenu_back__dNsDV,.NestedMenu_item__tgbZm,.NestedMenu_row__48g5c{align-items:center;background:none;border:none;border-radius:6px;color:inherit;cursor:pointer;display:flex;font:inherit;font-weight:500;gap:8px;letter-spacing:.01em;line-height:1.3;text-align:left;text-decoration:none;width:100%}.NestedMenu_back__dNsDV:hover,.NestedMenu_item__tgbZm:hover,.NestedMenu_row__48g5c:hover{background:var(--accent-color-alpha-50)}.NestedMenu_back__dNsDV.NestedMenu_itemActive__RfPZH,.NestedMenu_item__tgbZm.NestedMenu_itemActive__RfPZH,.NestedMenu_row__48g5c.NestedMenu_itemActive__RfPZH{background:var(--accent-color-alpha-100)}.NestedMenu_back__dNsDV.NestedMenu_itemDisabled__evVk1,.NestedMenu_back__dNsDV:disabled,.NestedMenu_item__tgbZm.NestedMenu_itemDisabled__evVk1,.NestedMenu_item__tgbZm:disabled,.NestedMenu_row__48g5c.NestedMenu_itemDisabled__evVk1,.NestedMenu_row__48g5c:disabled{cursor:default;opacity:.55;pointer-events:none}.NestedMenu_itemDanger__oAJbP{color:var(--active-color)}.NestedMenu_itemDanger__oAJbP .NestedMenu_icon__4g2Yp{color:inherit;opacity:1}.NestedMenu_icon__4g2Yp{display:inline-flex;flex-shrink:0;opacity:.55}.NestedMenu_icon__4g2Yp svg{display:block}.NestedMenu_label__Jnm6l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.NestedMenu_hint__hotNP{flex-shrink:0;font-weight:400;opacity:.5}.NestedMenu_multiline__MDdk-{grid-row-gap:2px;align-items:start;display:grid;grid-template-columns:auto minmax(0,1fr);min-width:252px;row-gap:2px}.NestedMenu_multiline__MDdk- .NestedMenu_label__Jnm6l{overflow:visible;text-overflow:clip}.NestedMenu_multiline__MDdk- .NestedMenu_hint__hotNP{grid-column:2;min-width:0;white-space:normal}.NestedMenu_chevron__8i-Po{flex-shrink:0;opacity:.45}.NestedMenu_row__48g5c svg{color:var(--active-color);flex-shrink:0}.NestedMenu_stacked__rMiOi{display:flex;flex-direction:column;max-height:min(360px,calc(100vh - 24px));overflow-y:auto}.NestedMenu_back__dNsDV{font-weight:650;margin-bottom:2px}.NestedMenu_stackedBody__Fbkma{min-width:0}.NestedMenu_size-s__2n2te .NestedMenu_back__dNsDV,.NestedMenu_size-s__2n2te .NestedMenu_item__tgbZm,.NestedMenu_size-s__2n2te .NestedMenu_row__48g5c,.NestedMenu_size-xs__yUJ0q .NestedMenu_back__dNsDV,.NestedMenu_size-xs__yUJ0q .NestedMenu_item__tgbZm,.NestedMenu_size-xs__yUJ0q .NestedMenu_row__48g5c{font-size:12px;gap:6px;padding:4px 8px}.NestedMenu_size-s__2n2te.NestedMenu_content__OyLXN,.NestedMenu_size-xs__yUJ0q.NestedMenu_content__OyLXN{min-width:176px;padding:3px}.NestedMenu_size-s__2n2te .NestedMenu_back__dNsDV svg,.NestedMenu_size-s__2n2te .NestedMenu_chevron__8i-Po,.NestedMenu_size-s__2n2te .NestedMenu_icon__4g2Yp svg,.NestedMenu_size-s__2n2te .NestedMenu_row__48g5c svg,.NestedMenu_size-xs__yUJ0q .NestedMenu_back__dNsDV svg,.NestedMenu_size-xs__yUJ0q .NestedMenu_chevron__8i-Po,.NestedMenu_size-xs__yUJ0q .NestedMenu_icon__4g2Yp svg,.NestedMenu_size-xs__yUJ0q .NestedMenu_row__48g5c svg{height:10px;width:10px}.NestedMenu_size-m__B8zm5 .NestedMenu_back__dNsDV,.NestedMenu_size-m__B8zm5 .NestedMenu_item__tgbZm,.NestedMenu_size-m__B8zm5 .NestedMenu_row__48g5c{font-size:13px;padding:6px 10px}.NestedMenu_size-l__1FrvQ .NestedMenu_back__dNsDV,.NestedMenu_size-l__1FrvQ .NestedMenu_item__tgbZm,.NestedMenu_size-l__1FrvQ .NestedMenu_row__48g5c{font-size:16px;gap:10px;padding:10px 14px}.NestedMenu_size-l__1FrvQ.NestedMenu_content__OyLXN{max-width:320px;min-width:240px;padding:6px}.NestedMenu_size-l__1FrvQ .NestedMenu_back__dNsDV svg,.NestedMenu_size-l__1FrvQ .NestedMenu_chevron__8i-Po,.NestedMenu_size-l__1FrvQ .NestedMenu_icon__4g2Yp svg,.NestedMenu_size-l__1FrvQ .NestedMenu_row__48g5c svg{height:18px;width:18px}.NestedMenu_size-xl__jiXmT .NestedMenu_back__dNsDV,.NestedMenu_size-xl__jiXmT .NestedMenu_item__tgbZm,.NestedMenu_size-xl__jiXmT .NestedMenu_row__48g5c{font-size:18px;gap:12px;padding:12px 16px}.NestedMenu_size-xl__jiXmT.NestedMenu_content__OyLXN{max-width:360px;min-width:260px;padding:8px}.NestedMenu_size-xl__jiXmT .NestedMenu_back__dNsDV svg,.NestedMenu_size-xl__jiXmT .NestedMenu_chevron__8i-Po,.NestedMenu_size-xl__jiXmT .NestedMenu_icon__4g2Yp svg,.NestedMenu_size-xl__jiXmT .NestedMenu_row__48g5c svg{height:22px;width:22px}";
+var S = {"root":"NestedMenu_root__ybyGA","trigger":"NestedMenu_trigger__zBeNI","content":"NestedMenu_content__OyLXN","list":"NestedMenu_list__Q55Aa","itemPopup":"NestedMenu_itemPopup__kMaxU","itemTrigger":"NestedMenu_itemTrigger__a7XHw","itemWrap":"NestedMenu_itemWrap__Qmc0B","item":"NestedMenu_item__tgbZm","row":"NestedMenu_row__48g5c","back":"NestedMenu_back__dNsDV","itemActive":"NestedMenu_itemActive__RfPZH","itemDisabled":"NestedMenu_itemDisabled__evVk1","itemDanger":"NestedMenu_itemDanger__oAJbP","icon":"NestedMenu_icon__4g2Yp","label":"NestedMenu_label__Jnm6l","hint":"NestedMenu_hint__hotNP","multiline":"NestedMenu_multiline__MDdk-","chevron":"NestedMenu_chevron__8i-Po","stacked":"NestedMenu_stacked__rMiOi","stackedBody":"NestedMenu_stackedBody__Fbkma","size-xs":"NestedMenu_size-xs__yUJ0q","size-s":"NestedMenu_size-s__2n2te","size-m":"NestedMenu_size-m__B8zm5","size-l":"NestedMenu_size-l__1FrvQ","size-xl":"NestedMenu_size-xl__jiXmT"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/src/components/Popup/Popup.helpers.js

@@ -118,10 +118,6 @@ const getPopupId = (elem, attr = 'data-popup-id') => {
     const id = elem.getAttribute(attr);
     return id ? parseInt(id, 10) : null;
 };
-function isLastChild(rootId, id) {
-    const ids = childs[rootId];
-    return ids && ids[ids.length - 1] === id;
-}
 function setChild(rootId, id) {
     if (!childs[rootId])
         childs[rootId] = [];
@@ -133,4 +129,4 @@ function unsetChild(rootId, id) {
         delete childs[rootId];
 }
 
-export { ZERO_BOUNDARY_FIT, childs, constrainAxisShift, domRectToEdges, edgesWidth, fitRectToBoundary, getId, getPopupId, intersectEdges, isEditable, isLastChild, popupBoundaryEdges, popupBoundaryPadding, setChild, shiftMarginsIntoBounds, shrinkEdgesUniform, unsetChild, viewportClientRectEdges };
+export { ZERO_BOUNDARY_FIT, childs, constrainAxisShift, domRectToEdges, edgesWidth, fitRectToBoundary, getId, getPopupId, intersectEdges, isEditable, popupBoundaryEdges, popupBoundaryPadding, setChild, shiftMarginsIntoBounds, shrinkEdgesUniform, unsetChild, viewportClientRectEdges };

package/dist/esm/src/components/Popup/Popup.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ZERO_BOUNDARY_FIT, getId, getPopupId, popupBoundaryEdges, popupBoundaryPadding, edgesWidth, fitRectToBoundary, isLastChild, unsetChild, childs, isEditable, setChild } from './Popup.helpers.js';
+import { ZERO_BOUNDARY_FIT, getId, getPopupId, popupBoundaryEdges, popupBoundaryPadding, edgesWidth, fitRectToBoundary, childs, isEditable, setChild, unsetChild } from './Popup.helpers.js';
 import { observe, unobserve } from '../../tools/resizeObserver.js';
 import { Component, createRef } from 'react';
 import { Paranja } from '../Paranja/Paranja.js';
@@ -8,7 +8,6 @@ import { config } from '../../tools/config.js';
 import S from './Popup.styl.js';
 import Time from 'timen';
 import cn from 'classnames';
-import debounce from '../../tools/debounce.js';
 import { getCoords } from '../../tools/dom.js';
 import { isBrowser } from '../../tools/env.js';
 import throttle from '../../tools/throttle.js';
@@ -16,6 +15,7 @@ import throttle from '../../tools/throttle.js';
 const ANIMATION_DURATION = 100;
 const OFFSET_GAP = 10;
 const BOUNDARY_FIT_EPSILON = 1;
+const HOVER_CLOSE_DELAY = 160;
 class Popup extends Component {
     rootElem = createRef();
     triggerElem = createRef();
@@ -33,11 +33,12 @@ class Popup extends Component {
     };
     focused = false;
     isOpening = false;
+    openedByHover = false;
     pointerPressed = false;
-    subscribedHoverControl = false;
     subscribedSizeChange = false;
     pointerDownTarget = null;
     isPointerPressedInside = false;
+    hoverCloseUnsub = null;
     id;
     parentPopupContent;
     timers = Time.create();
@@ -63,7 +64,7 @@ class Popup extends Component {
         this.id = getId();
     }
     componentDidMount() {
-        const { hoverControl, focusControl } = this.props;
+        const { focusControl } = this.props;
         const vv = isBrowser ? window.visualViewport : null;
         if (vv) {
             vv.addEventListener('resize', this.onBoundaryGeometryChange);
@@ -81,8 +82,6 @@ class Popup extends Component {
             document.addEventListener('keydown', this.onDocKeyDown, true);
             document.addEventListener('keyup', this.onDocKeyUp);
         }
-        if (hoverControl)
-            this.subscribeHoverControl();
         this.subscribeScroll();
         if (this.state.isOpen &&
             this.state.isContentVisible &&
@@ -95,15 +94,11 @@ class Popup extends Component {
             this.scheduleComputeShift();
     }, 100);
     componentDidUpdate(prevProps, prevState) {
-        const { isOpen, disabled, hoverControl } = this.props;
+        const { isOpen, disabled } = this.props;
         if (disabled !== prevProps.disabled) {
             this.setState({ isOpen: false }); // close when receive disabled=true
             return;
         }
-        if (!prevProps.hoverControl && hoverControl)
-            this.subscribeHoverControl();
-        if (prevProps.hoverControl && !hoverControl)
-            this.unsubscribeHoverControl();
         if (typeof isOpen === 'boolean' && isOpen !== prevProps.isOpen) {
             isOpen ? this.open() : this.close();
         }
@@ -138,7 +133,7 @@ class Popup extends Component {
         if (this.scrollParent) {
             this.scrollParent.removeEventListener('scroll', this.close);
         }
-        this.unsubscribeHoverControl();
+        this.cancelHoverClose();
         this.unsubscribeSizeChange();
         this.unsubscribeScroll();
     }
@@ -162,20 +157,6 @@ class Popup extends Component {
         unobserve(this.triggerElem.current);
         unobserve(this.containerElem);
     }
-    subscribeHoverControl() {
-        if (this.subscribedHoverControl)
-            return;
-        this.subscribedHoverControl = true;
-        document.addEventListener('pointermove', this.checkHover);
-        document.addEventListener('pointerup', this.checkHover);
-    }
-    unsubscribeHoverControl() {
-        if (!this.subscribedHoverControl)
-            return;
-        this.subscribedHoverControl = false;
-        document.removeEventListener('pointermove', this.checkHover);
-        document.removeEventListener('pointerup', this.checkHover);
-    }
     updateBounds() {
         if (!this.containerElem)
             return;
@@ -268,33 +249,6 @@ class Popup extends Component {
             this.setState({ boundaryFit });
         }
     }
-    checkHover = debounce((e) => {
-        if (this.isPointerPressedInside)
-            return;
-        const { isOpen, rootPopupId } = this.state;
-        const overTrigger = this.isPointerOver(e.target, S.trigger);
-        const overContent = this.isPointerOver(e.target, S.content);
-        if (!isOpen) {
-            if (overTrigger)
-                this.open();
-            return;
-        }
-        // isOpen
-        if (overTrigger || overContent)
-            return;
-        if (typeof rootPopupId === 'number') {
-            if (isLastChild(rootPopupId, this.id)) {
-                this.close();
-                unsetChild(rootPopupId, this.id);
-            }
-        }
-        else {
-            const isOverAnyPopupContent = e.target.closest(`.${S.content}`);
-            if (!isOverAnyPopupContent || !childs[this.id]?.length) {
-                this.close();
-            }
-        }
-    }, 100);
     isControllable = () => typeof this.props.isOpen === 'boolean';
     isLastClickInside = () => this.pointerDownTarget &&
         (this.pointerDownTarget.closest(`.${S.trigger}`) ||
@@ -305,12 +259,81 @@ class Popup extends Component {
         this.timers.after(100, () => (this.pointerDownTarget = null));
     };
     onDocPointerUp = (e) => {
-        if (!this.isPointerPressedInside)
-            this.close();
+        const pressedInside = this.isPointerPressedInside;
         this.isPointerPressedInside = false;
+        if (!this.state.isOpen || pressedInside)
+            return;
+        if (this.isHoverInside(e.target))
+            return;
+        this.close();
     };
     isPointerOver(target, elem) {
-        return target.closest(`.${elem}[data-popup-id="${this.id}"]`);
+        return (target instanceof Element &&
+            target.closest(`.${elem}[data-popup-id="${this.id}"]`));
+    }
+    isHoverInside(target) {
+        return (this.isPointerOver(target, S.trigger) ||
+            this.isPointerOver(target, S.content));
+    }
+    isRelatedHover(target) {
+        if (!(target instanceof Element))
+            return false;
+        if (this.isHoverInside(target))
+            return true;
+        const popupEl = target.closest('[data-popup-id]');
+        if (!popupEl)
+            return false;
+        const id = getPopupId(popupEl);
+        if (id == null || id === this.id)
+            return false;
+        if (childs[this.id]?.includes(id))
+            return true;
+        const { rootPopupId } = this.state;
+        return rootPopupId != null && childs[rootPopupId]?.includes(id);
+    }
+    cancelHoverClose() {
+        this.hoverCloseUnsub?.();
+        this.hoverCloseUnsub = null;
+    }
+    scheduleHoverClose() {
+        this.cancelHoverClose();
+        this.hoverCloseUnsub = Time.after(HOVER_CLOSE_DELAY, () => {
+            this.hoverCloseUnsub = null;
+            this.close();
+        });
+    }
+    onHoverEnter = () => {
+        if (!this.props.hoverControl)
+            return;
+        this.cancelHoverClose();
+        if (!this.state.isOpen) {
+            this.openedByHover = true;
+            this.open();
+        }
+    };
+    onHoverLeave = (e) => {
+        if (!this.props.hoverControl)
+            return;
+        if (this.isRelatedHover(e.relatedTarget)) {
+            this.cancelHoverClose();
+            return;
+        }
+        this.scheduleHoverClose();
+    };
+    bindHoverHandlers(props = {}) {
+        const enter = props.onPointerEnter;
+        const leave = props.onPointerLeave;
+        return {
+            ...props,
+            onPointerEnter: (e) => {
+                this.onHoverEnter();
+                enter?.(e);
+            },
+            onPointerLeave: (e) => {
+                this.onHoverLeave(e);
+                leave?.(e);
+            },
+        };
     }
     onScroll = throttle(e => {
         if (!this.state.isOpen) {
@@ -347,8 +370,12 @@ class Popup extends Component {
     };
     onTriggerPointerUp = e => {
         this.pointerPressed = false;
-        if (e.traget === this.pointerDownTarget)
-            this.toggle();
+        if (e.target !== this.pointerDownTarget)
+            return;
+        // Hover already opened — don't toggle shut on the same pointer.
+        if (this.state.isOpen && this.openedByHover)
+            return;
+        this.toggle();
     };
     onFocus = e => {
         this.focused = true;
@@ -393,8 +420,13 @@ class Popup extends Component {
     };
     close = () => {
         this.isOpening = false;
+        this.openedByHover = false;
+        this.cancelHoverClose();
         if (!this.state.isOpen)
             return;
+        const { rootPopupId } = this.state;
+        if (rootPopupId)
+            unsetChild(rootPopupId, this.id);
         this.unsubscribeSizeChange();
         this.changeState(false, this.afterClose);
     };
@@ -438,9 +470,17 @@ class Popup extends Component {
         if (!disableTrigger) {
             triggerProps.role = 'button';
             if (hoverControl) {
-                Object.assign(triggerProps, {
-                    onPointerDown: this.onTriggerPointerDown,
-                    onPointerUp: this.onTriggerPointerUp,
+                const userDown = triggerProps.onPointerDown;
+                const userUp = triggerProps.onPointerUp;
+                Object.assign(triggerProps, this.bindHoverHandlers(triggerProps), {
+                    onPointerDown: e => {
+                        this.onTriggerPointerDown(e);
+                        userDown?.(e);
+                    },
+                    onPointerUp: e => {
+                        this.onTriggerPointerUp(e);
+                        userUp?.(e);
+                    },
                 });
             }
             if (focusControl) {
@@ -453,7 +493,10 @@ class Popup extends Component {
         return (jsx("div", { className: classesTrigger, ...triggerProps, suppressHydrationWarning: true, "data-popup-id": this.id, ref: this.triggerElem, children: trigger }));
     }
     renderContent() {
-        const { content, contentProps = {}, wrapperProps = {}, size, disabled, inline, outlined, animated, paranja, blur, round, elevation, } = this.props;
+        const { content, wrapperProps = {}, size, disabled, inline, outlined, animated, paranja, blur, round, elevation, hoverControl, } = this.props;
+        const contentProps = hoverControl
+            ? this.bindHoverHandlers(this.props.contentProps ?? {})
+            : (this.props.contentProps ?? {});
         const { isOpen, isContentVisible, animating, direction, triggerBounds, rootPopupId, boundaryFit, } = this.state;
         if (disabled)
             return null;
@@ -471,6 +514,15 @@ class Popup extends Component {
                 ...(shiftTf ? { transform: shiftTf } : {}),
             };
         }
+        // Nested popups portal as siblings of the parent wrapper. A transform on
+        // the parent creates a stacking context, so the child needs a higher
+        // z-index or it paints under the parent (looks like it never opened).
+        if (rootPopupId) {
+            wrapperProps.style = {
+                ...wrapperProps.style,
+                zIndex: 12,
+            };
+        }
         const contentNode = (jsx("div", { ...wrapperProps, className: wrapperClasses, children: jsxs("div", { ...contentProps, ref: this.onContainerElemRef, className: classes, suppressHydrationWarning: true, "data-popup-id": this.id, "data-root-popup-id": rootPopupId, style: {
                     ...(contentProps.style ?? {}),
                     ...(boundaryFit.maxWidth !== null && boundaryFit.maxWidth > 0

package/dist/esm/src/components/Popup/Popup.styl.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Popup_root__uQ-fP{display:inline-block;position:relative}.Popup_contentWrapper__2yi-2{opacity:0;pointer-events:none;position:absolute}.Popup_contentWrapper__2yi-2.Popup_animating__kR0qF{transition:opacity .1s ease-out}.Popup_contentWrapper__2yi-2.Popup_isOpen__BRIdP{opacity:1;pointer-events:all}.Popup_contentWrapper__2yi-2.Popup_inline__1-l1S.Popup_isOpen__BRIdP{position:relative}.Popup_contentWrapper__2yi-2:not(.Popup_inline__1-l1S),.Popup_contentWrapper__2yi-2:not(.Popup_inline__1-l1S)>.Popup_content__e8Qyu{position:absolute}.Popup_trigger__jQNaQ{cursor:pointer}.Popup_trigger__jQNaQ.Popup_isOpen__BRIdP{position:relative;z-index:11}.Popup_trigger__jQNaQ.Popup_disabled__DlE9y{opacity:.4;pointer-events:none}.Popup_content__e8Qyu{-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:var(--decent-color);box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50);box-sizing:border-box;max-width:min(min(560px,70vw),calc(100svw - 16px));min-width:100%;overflow:hidden;position:relative;transform-origin:top center;z-index:11}.Popup_content__e8Qyu:before{background-color:var(--accent-color-alpha-50);bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}.Popup_content__e8Qyu.Popup_blur__1hfU8{-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);background-color:var(--decent-color-alpha-500)}.Popup_content__e8Qyu.Popup_size-xs__7QR-d{border-radius:4px}.Popup_content__e8Qyu.Popup_size-xs__7QR-d.Popup_round__7rD1m{border-radius:12px}.Popup_content__e8Qyu.Popup_size-s__UmixP{border-radius:4px}.Popup_content__e8Qyu.Popup_size-s__UmixP.Popup_round__7rD1m{border-radius:16px}.Popup_content__e8Qyu.Popup_size-m__FYpTL{border-radius:6px}.Popup_content__e8Qyu.Popup_size-m__FYpTL.Popup_round__7rD1m{border-radius:20px}.Popup_content__e8Qyu.Popup_size-l__BTS57{border-radius:8px}.Popup_content__e8Qyu.Popup_size-l__BTS57.Popup_round__7rD1m{border-radius:24px}.Popup_content__e8Qyu.Popup_size-xl__fSfCc{border-radius:10px}.Popup_content__e8Qyu.Popup_size-xl__fSfCc.Popup_round__7rD1m{border-radius:28px}.Popup_content__e8Qyu.Popup_elevation-1__vmP3e{box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50),0 0 var(--p-3) 2px var(--decent-color-alpha-500)}.Popup_content__e8Qyu.Popup_elevation-2__Ci4sI{box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50),0 0 var(--p-5) 2px var(--decent-color-alpha-500)}.Popup_content__e8Qyu.Popup_outlined__g3cJV:after{border-radius:inherit;bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}.Popup_isOpen__BRIdP .Popup_content__e8Qyu{opacity:1;pointer-events:all;transform:scaleX(1)}.Popup_animating__kR0qF{transition:70ms ease-out;transition-property:transform,opacity,margin}.Popup_axis-top__BaLgG{bottom:100%}.Popup_axis-bottom__hZwwr{top:100%}.Popup_axis-right__LMYVy{left:100%}.Popup_axis-left__SFKm-{right:100%}.Popup_float-top__8SQAu{bottom:0}.Popup_float-right__mdm-3{left:0}.Popup_float-bottom__7flve{top:0}.Popup_float-left__tz7fX{right:0}.Popup_axis-bottom__hZwwr,.Popup_axis-top__BaLgG{transform:scaleY(.5)}.Popup_axis-bottom__hZwwr.Popup_float-middle__Dmnn1,.Popup_axis-top__BaLgG.Popup_float-middle__Dmnn1{left:50%;transform:translateX(-50%) scaleY(.5)}.Popup_isOpen__BRIdP .Popup_axis-bottom__hZwwr.Popup_float-middle__Dmnn1,.Popup_isOpen__BRIdP .Popup_axis-top__BaLgG.Popup_float-middle__Dmnn1{transform:translateX(-50%) scaleX(1)}.Popup_axis-left__SFKm-,.Popup_axis-right__LMYVy{transform:scaleX(.5)}.Popup_axis-left__SFKm-.Popup_float-middle__Dmnn1,.Popup_axis-right__LMYVy.Popup_float-middle__Dmnn1{top:50%;transform:translateY(-50%) scaleX(.5)}.Popup_isOpen__BRIdP .Popup_axis-left__SFKm-.Popup_float-middle__Dmnn1,.Popup_isOpen__BRIdP .Popup_axis-right__LMYVy.Popup_float-middle__Dmnn1{transform:translateY(-50%) scaleX(1)}.Popup_axis-top__BaLgG.Popup_float-middle__Dmnn1{transform-origin:bottom center}.Popup_axis-top__BaLgG.Popup_float-right__mdm-3{transform-origin:bottom left}.Popup_axis-top__BaLgG.Popup_float-left__tz7fX{transform-origin:bottom right}.Popup_axis-bottom__hZwwr.Popup_float-middle__Dmnn1{transform-origin:top center}.Popup_axis-bottom__hZwwr.Popup_float-right__mdm-3{transform-origin:top left}.Popup_axis-bottom__hZwwr.Popup_float-left__tz7fX{transform-origin:top right}.Popup_axis-right__LMYVy.Popup_float-middle__Dmnn1{transform-origin:center left}.Popup_axis-right__LMYVy.Popup_float-top__8SQAu{transform-origin:bottom left}.Popup_axis-right__LMYVy.Popup_float-bottom__7flve{transform-origin:top left}.Popup_axis-left__SFKm-.Popup_float-middle__Dmnn1{transform-origin:center right}.Popup_axis-left__SFKm-.Popup_float-top__8SQAu{transform-origin:bottom right}.Popup_axis-left__SFKm-.Popup_float-bottom__7flve{transform-origin:top right}";
+var css_248z = ".Popup_root__uQ-fP{display:inline-block;position:relative}.Popup_contentWrapper__2yi-2{opacity:0;pointer-events:none;position:absolute}.Popup_contentWrapper__2yi-2.Popup_animating__kR0qF{transition:opacity .1s ease-out}.Popup_contentWrapper__2yi-2.Popup_isOpen__BRIdP{opacity:1;z-index:11}.Popup_contentWrapper__2yi-2.Popup_inline__1-l1S.Popup_isOpen__BRIdP{position:relative}.Popup_contentWrapper__2yi-2:not(.Popup_inline__1-l1S),.Popup_contentWrapper__2yi-2:not(.Popup_inline__1-l1S)>.Popup_content__e8Qyu{position:absolute}.Popup_trigger__jQNaQ{cursor:pointer}.Popup_trigger__jQNaQ.Popup_isOpen__BRIdP{position:relative;z-index:11}.Popup_trigger__jQNaQ.Popup_disabled__DlE9y{opacity:.4;pointer-events:none}.Popup_content__e8Qyu{-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:var(--decent-color);box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50);box-sizing:border-box;max-width:min(min(560px,70vw),calc(100svw - 16px));min-width:100%;overflow:hidden;position:relative;transform-origin:top center;z-index:11}.Popup_content__e8Qyu:before{background-color:var(--accent-color-alpha-50);bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}.Popup_content__e8Qyu.Popup_blur__1hfU8{-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);background-color:var(--decent-color-alpha-500)}.Popup_content__e8Qyu.Popup_size-xs__7QR-d{border-radius:4px}.Popup_content__e8Qyu.Popup_size-xs__7QR-d.Popup_round__7rD1m{border-radius:12px}.Popup_content__e8Qyu.Popup_size-s__UmixP{border-radius:4px}.Popup_content__e8Qyu.Popup_size-s__UmixP.Popup_round__7rD1m{border-radius:16px}.Popup_content__e8Qyu.Popup_size-m__FYpTL{border-radius:6px}.Popup_content__e8Qyu.Popup_size-m__FYpTL.Popup_round__7rD1m{border-radius:20px}.Popup_content__e8Qyu.Popup_size-l__BTS57{border-radius:8px}.Popup_content__e8Qyu.Popup_size-l__BTS57.Popup_round__7rD1m{border-radius:24px}.Popup_content__e8Qyu.Popup_size-xl__fSfCc{border-radius:10px}.Popup_content__e8Qyu.Popup_size-xl__fSfCc.Popup_round__7rD1m{border-radius:28px}.Popup_content__e8Qyu.Popup_elevation-1__vmP3e{box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50),0 0 var(--p-3) 2px var(--decent-color-alpha-500)}.Popup_content__e8Qyu.Popup_elevation-2__Ci4sI{box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50),0 0 var(--p-5) 2px var(--decent-color-alpha-500)}.Popup_content__e8Qyu.Popup_outlined__g3cJV:after{border-radius:inherit;bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}.Popup_isOpen__BRIdP .Popup_content__e8Qyu{opacity:1;pointer-events:all;transform:scaleX(1)}.Popup_animating__kR0qF{transition:70ms ease-out;transition-property:transform,opacity,margin}.Popup_axis-top__BaLgG{bottom:100%}.Popup_axis-bottom__hZwwr{top:100%}.Popup_axis-right__LMYVy{left:100%}.Popup_axis-left__SFKm-{right:100%}.Popup_float-top__8SQAu{bottom:0}.Popup_float-right__mdm-3{left:0}.Popup_float-bottom__7flve{top:0}.Popup_float-left__tz7fX{right:0}.Popup_axis-bottom__hZwwr,.Popup_axis-top__BaLgG{transform:scaleY(.5)}.Popup_axis-bottom__hZwwr.Popup_float-middle__Dmnn1,.Popup_axis-top__BaLgG.Popup_float-middle__Dmnn1{left:50%;transform:translateX(-50%) scaleY(.5)}.Popup_isOpen__BRIdP .Popup_axis-bottom__hZwwr.Popup_float-middle__Dmnn1,.Popup_isOpen__BRIdP .Popup_axis-top__BaLgG.Popup_float-middle__Dmnn1{transform:translateX(-50%) scaleX(1)}.Popup_axis-left__SFKm-,.Popup_axis-right__LMYVy{transform:scaleX(.5)}.Popup_axis-left__SFKm-.Popup_float-middle__Dmnn1,.Popup_axis-right__LMYVy.Popup_float-middle__Dmnn1{top:50%;transform:translateY(-50%) scaleX(.5)}.Popup_isOpen__BRIdP .Popup_axis-left__SFKm-.Popup_float-middle__Dmnn1,.Popup_isOpen__BRIdP .Popup_axis-right__LMYVy.Popup_float-middle__Dmnn1{transform:translateY(-50%) scaleX(1)}.Popup_axis-top__BaLgG.Popup_float-middle__Dmnn1{transform-origin:bottom center}.Popup_axis-top__BaLgG.Popup_float-right__mdm-3{transform-origin:bottom left}.Popup_axis-top__BaLgG.Popup_float-left__tz7fX{transform-origin:bottom right}.Popup_axis-bottom__hZwwr.Popup_float-middle__Dmnn1{transform-origin:top center}.Popup_axis-bottom__hZwwr.Popup_float-right__mdm-3{transform-origin:top left}.Popup_axis-bottom__hZwwr.Popup_float-left__tz7fX{transform-origin:top right}.Popup_axis-right__LMYVy.Popup_float-middle__Dmnn1{transform-origin:center left}.Popup_axis-right__LMYVy.Popup_float-top__8SQAu{transform-origin:bottom left}.Popup_axis-right__LMYVy.Popup_float-bottom__7flve{transform-origin:top left}.Popup_axis-left__SFKm-.Popup_float-middle__Dmnn1{transform-origin:center right}.Popup_axis-left__SFKm-.Popup_float-top__8SQAu{transform-origin:bottom right}.Popup_axis-left__SFKm-.Popup_float-bottom__7flve{transform-origin:top right}";
 var S = {"root":"Popup_root__uQ-fP","contentWrapper":"Popup_contentWrapper__2yi-2","animating":"Popup_animating__kR0qF","isOpen":"Popup_isOpen__BRIdP","inline":"Popup_inline__1-l1S","content":"Popup_content__e8Qyu","trigger":"Popup_trigger__jQNaQ","disabled":"Popup_disabled__DlE9y","blur":"Popup_blur__1hfU8","size-xs":"Popup_size-xs__7QR-d","round":"Popup_round__7rD1m","size-s":"Popup_size-s__UmixP","size-m":"Popup_size-m__FYpTL","size-l":"Popup_size-l__BTS57","size-xl":"Popup_size-xl__fSfCc","elevation-1":"Popup_elevation-1__vmP3e","elevation-2":"Popup_elevation-2__Ci4sI","outlined":"Popup_outlined__g3cJV","axis-top":"Popup_axis-top__BaLgG","axis-bottom":"Popup_axis-bottom__hZwwr","axis-right":"Popup_axis-right__LMYVy","axis-left":"Popup_axis-left__SFKm-","float-top":"Popup_float-top__8SQAu","float-right":"Popup_float-right__mdm-3","float-bottom":"Popup_float-bottom__7flve","float-left":"Popup_float-left__tz7fX","float-middle":"Popup_float-middle__Dmnn1"};
 styleInject(css_248z);
 

package/dist/esm/src/components/Tabs/Tabs.js

@@ -1,14 +1,14 @@
 import { useState, useEffect, useCallback, createElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import cn from 'classnames';
-import { Scroll } from '../Scroll/Scroll.js';
 import { Button } from '../Button/Button.js';
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';
 import S from './Tabs.styl.js';
+import { Scroll } from '../Scroll/Scroll.js';
+import cn from 'classnames';
 
 const isId = id => ['string', 'number'].includes(typeof id);
 function Tabs(props) {
-    const { size = 'm', className, tabsWrapperClassName, tabsClassName, contentClassName, items, hideTabsIfSingle = false, allowEmpty = false, onChange, renderAll, activeId: initialId, children, ...rest } = props;
+    const { size = 'm', variant = 'default', className, tabsWrapperClassName, tabsInnerClassName, tabsClassName, contentClassName, items, hideTabsIfSingle = false, allowEmpty = false, onChange, renderAll, activeId: initialId, children, ...rest } = props;
     const [activeId, setActiveId] = useState(isId(initialId) ? initialId : allowEmpty ? null : items[0].id);
     useEffect(() => {
         if (isId(initialId)) {
@@ -35,9 +35,9 @@ function Tabs(props) {
         if (renderAll || forceRender || isActive) {
             tabsContent.push(jsx("div", { className: cn(contentClassName, currContentClassName, !isActive && S.inactive), children: tabContent }, id));
         }
-        return (createElement(Button, { ...rest, className: cn(S.tab, rest.className), size: size, key: id, onClick: e => onTabClick(e, params), checked: isActive }, label));
+        return (createElement(Button, { ...rest, className: cn(S.tab, isActive && S.active, rest.className), size: size, key: id, onClick: e => onTabClick(e, params), checked: isActive }, label));
     });
-    const tabs = tabsButtons.length === 1 && hideTabsIfSingle ? null : (jsx(Scroll, { x: true, offset: { x: { before: 10, after: 10 } }, className: tabsWrapperClassName, innerClassName: cn(S.tabsScroll, S[`size-${size}`]), autoHide: true, fadeSize: size, size: size, children: jsx(ButtonGroup, { className: tabsClassName, ...rest, children: tabsButtons }) }));
+    const tabs = tabsButtons.length === 1 && hideTabsIfSingle ? null : (jsx(Scroll, { x: true, offset: { x: { before: 10, after: 10 } }, className: tabsWrapperClassName, innerClassName: cn(S.tabsScroll, S[`size-${size}`], tabsInnerClassName), autoHide: true, fadeSize: size, size: size, children: jsx(ButtonGroup, { className: cn(variant === 'links' && S['variant-links'], tabsClassName), ...rest, children: tabsButtons }) }));
     if (typeof children === 'function') {
         return children({
             tabs,

package/dist/esm/src/components/Tabs/Tabs.styl.js

@@ -1,7 +1,7 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = "div .Tabs_inactive__H0mPh{display:none}.Tabs_tabsScroll__7Dj0S{padding-bottom:var(--p-5)}.Tabs_size-xs__J0-xo.Tabs_tabsScroll__7Dj0S{padding-bottom:var(--p-3)}.Tabs_size-s__bz7NO.Tabs_tabsScroll__7Dj0S{padding-bottom:var(--p-4)}.Tabs_size-l__emJzX.Tabs_tabsScroll__7Dj0S{padding-bottom:calc(var(--p-5)*1.2)}.Tabs_size-xl__Kqzt-.Tabs_tabsScroll__7Dj0S{padding-bottom:calc(var(--p-5)*1.35)}.Tabs_tab__-oN-g{flex-shrink:0;white-space:nowrap}";
-var S = {"inactive":"Tabs_inactive__H0mPh","tabsScroll":"Tabs_tabsScroll__7Dj0S","size-xs":"Tabs_size-xs__J0-xo","size-s":"Tabs_size-s__bz7NO","size-l":"Tabs_size-l__emJzX","size-xl":"Tabs_size-xl__Kqzt-","tab":"Tabs_tab__-oN-g"};
+var css_248z = "div .Tabs_inactive__H0mPh{display:none}.Tabs_tabsScroll__7Dj0S{padding-bottom:var(--p-5)}.Tabs_size-xs__J0-xo.Tabs_tabsScroll__7Dj0S{padding-bottom:var(--p-3)}.Tabs_size-s__bz7NO.Tabs_tabsScroll__7Dj0S{padding-bottom:var(--p-4)}.Tabs_size-l__emJzX.Tabs_tabsScroll__7Dj0S{padding-bottom:calc(var(--p-5)*1.2)}.Tabs_size-xl__Kqzt-.Tabs_tabsScroll__7Dj0S{padding-bottom:calc(var(--p-5)*1.35)}.Tabs_tab__-oN-g{flex-shrink:0;white-space:nowrap}.Tabs_variant-links__-N1Ym>button:not(:first-child){border-radius:inherit;margin-left:0}.Tabs_variant-links__-N1Ym>button:not(:last-child){border-radius:inherit}.Tabs_variant-links__-N1Ym .Tabs_tab__-oN-g{background-color:transparent!important;box-shadow:none;padding:var(--p-3) var(--p-5)}.Tabs_variant-links__-N1Ym .Tabs_tab__-oN-g:focus,.Tabs_variant-links__-N1Ym .Tabs_tab__-oN-g:hover{background-color:transparent!important;box-shadow:0 2px 0 0 var(--active-color-alpha-100)}.Tabs_variant-links__-N1Ym .Tabs_tab__-oN-g.Tabs_active__nOA5N,.Tabs_variant-links__-N1Ym .Tabs_tab__-oN-g.Tabs_active__nOA5N:focus,.Tabs_variant-links__-N1Ym .Tabs_tab__-oN-g.Tabs_active__nOA5N:hover{background-color:transparent!important;box-shadow:0 2px 0 0 var(--active-color);color:inherit}";
+var S = {"inactive":"Tabs_inactive__H0mPh","tabsScroll":"Tabs_tabsScroll__7Dj0S","size-xs":"Tabs_size-xs__J0-xo","size-s":"Tabs_size-s__bz7NO","size-l":"Tabs_size-l__emJzX","size-xl":"Tabs_size-xl__Kqzt-","tab":"Tabs_tab__-oN-g","variant-links":"Tabs_variant-links__-N1Ym","active":"Tabs_active__nOA5N"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/src/components/TextShimmer/TextShimmer.js

@@ -8,12 +8,11 @@ function TextShimmerComponent({ children, as: Component = 'p', className, durati
         const raw = Math.min(48, 3.5 + Math.max(0, Math.min(1, spread / 10)) * 100.5);
         // Wide blend stops “vertical knife” artefacts when the ramp only spans few pixels inside the glyph mask.
         const ridgeHalf = Math.min(49, Math.max(36, raw + 17));
-        const baseColor = inverted
-            ? 'var(--txt-sh-highlight)'
-            : 'var(--txt-sh-fill)';
-        const bandColor = inverted
-            ? 'var(--txt-sh-fill)'
-            : 'var(--txt-sh-highlight)';
+        // Resolve on the gradient so ancestor --txt-sh-* inherit. --decent-color is the surface.
+        const fill = 'var(--txt-sh-fill, var(--text-shimmer-decent-tone, var(--accent-color)))';
+        const highlight = 'var(--txt-sh-highlight, var(--text-shimmer-accent-tone, var(--active-color)))';
+        const baseColor = inverted ? highlight : fill;
+        const bandColor = inverted ? fill : highlight;
         const backgroundGradient = `linear-gradient(90deg, ${baseColor} calc(50% - ${ridgeHalf}%), ${bandColor} 50%, ${baseColor} calc(50% + ${ridgeHalf}%))`;
         return { backgroundGradient };
     }, [spread, inverted]);

package/dist/esm/src/components/TextShimmer/TextShimmer.styl.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".TextShimmer_root__cnKtV{-webkit-text-fill-color:transparent;-webkit-font-smoothing:antialiased;--txt-sh-fill:var(--text-shimmer-decent-tone,var(--accent-color));--txt-sh-highlight:var(--text-shimmer-accent-tone,var(--decent-color));animation:TextShimmer_textShimmer__w7rQj 1s linear infinite;animation:TextShimmer_textShimmer__w7rQj var(--text-shimmer-duration,1s) linear infinite;-webkit-background-clip:text;background-clip:text;background-repeat:repeat-x;background-size:200% 100%;color:transparent!important;display:inline-block;position:relative}@keyframes TextShimmer_textShimmer__w7rQj{0%{background-position:100%}to{background-position:-100%}}";
+var css_248z = ".TextShimmer_root__cnKtV{-webkit-text-fill-color:transparent;-webkit-font-smoothing:antialiased;animation:TextShimmer_textShimmer__w7rQj 1s linear infinite;animation:TextShimmer_textShimmer__w7rQj var(--text-shimmer-duration,1s) linear infinite;-webkit-background-clip:text;background-clip:text;background-repeat:repeat-x;background-size:200% 100%;color:transparent!important;display:inline-block;position:relative}@keyframes TextShimmer_textShimmer__w7rQj{0%{background-position:100%}to{background-position:-100%}}";
 var S = {"root":"TextShimmer_root__cnKtV","textShimmer":"TextShimmer_textShimmer__w7rQj"};
 styleInject(css_248z);
 

package/dist/esm/types/src/components/NestedMenu/NestedMenu.d.ts

@@ -1,7 +1,7 @@
 import * as T from './NestedMenu.types';
 export declare function NestedMenuLabel({ children, className, }: T.NestedMenuLabelProps): import("react").JSX.Element;
 export declare function NestedMenuItemRow({ children, className, danger, disabled, href, target, rel, onClick, }: T.NestedMenuRowProps): import("react").JSX.Element;
-declare function NestedMenuComponent({ trigger, items, open, onOpenChange, align, className, }: T.Props): import("react").JSX.Element;
+declare function NestedMenuComponent({ trigger, items, open, onOpenChange, align, size, className, popupProps, }: T.Props): import("react").JSX.Element;
 export declare const NestedMenu: typeof NestedMenuComponent & {
     Item: typeof NestedMenuItemRow;
     Label: typeof NestedMenuLabel;

package/dist/esm/types/src/components/NestedMenu/NestedMenu.types.d.ts

@@ -1,4 +1,6 @@
 import { ReactNode } from 'react';
+import { Props as PopupProps } from 'uilib/components/Popup/Popup.types';
+import { Size } from 'uilib/types';
 export type NestedMenuItem = {
     id: string;
     label: ReactNode;
@@ -19,7 +21,9 @@ export type Props = {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     align?: 'start' | 'end';
+    size?: Size;
     className?: string;
+    popupProps?: Partial<PopupProps>;
 };
 export type NestedMenuProps = Props;
 export type NestedMenuRowProps = {

package/dist/esm/types/src/components/Popup/Popup.d.ts

@@ -10,11 +10,12 @@ export declare class Popup extends Component<T.Props, T.State> {
     onContainerElemRef: (elem: any) => void;
     focused: boolean;
     isOpening: boolean;
+    openedByHover: boolean;
     pointerPressed: boolean;
-    subscribedHoverControl: boolean;
     subscribedSizeChange: boolean;
     pointerDownTarget: any;
     isPointerPressedInside: boolean;
+    hoverCloseUnsub: (() => void) | null;
     id: any;
     parentPopupContent: any;
     timers: any;
@@ -36,8 +37,6 @@ export declare class Popup extends Component<T.Props, T.State> {
     subscribeScroll(): void;
     unsubscribeScroll(): void;
     unsubscribeSizeChange(): void;
-    subscribeHoverControl(): void;
-    unsubscribeHoverControl(): void;
     updateBounds(): void;
     updateBoundsThrottled: any;
     scheduleComputeShift(): void;
@@ -47,12 +46,21 @@ export declare class Popup extends Component<T.Props, T.State> {
         maxWidth: number | null;
     };
     setBoundaryFit(boundaryFit: H.BoundaryFit): void;
-    checkHover: any;
     isControllable: () => boolean;
     isLastClickInside: () => any;
     onDocPointerDown: (e: PointerEvent) => void;
     onDocPointerUp: (e: PointerEvent) => void;
-    isPointerOver(target: any, elem: any): any;
+    isPointerOver(target: any, elem: any): Element;
+    isHoverInside(target: any): Element;
+    isRelatedHover(target: any): boolean;
+    cancelHoverClose(): void;
+    scheduleHoverClose(): void;
+    onHoverEnter: () => void;
+    onHoverLeave: (e: PointerEvent) => void;
+    bindHoverHandlers(props?: Record<string, unknown>): {
+        onPointerEnter: (e: PointerEvent) => void;
+        onPointerLeave: (e: PointerEvent) => void;
+    };
     onScroll: any;
     onDocKeyDown: (e: KeyboardEvent) => void;
     onDocKeyUp: (e: KeyboardEvent) => void;

package/dist/esm/types/src/components/Tabs/Tabs.types.d.ts

@@ -1,6 +1,6 @@
-import { Size } from 'uilib/types';
 import { ButtonProps } from '../Button/Button';
 import { ReactNode } from 'react';
+import { Size } from 'uilib/types';
 type ID = string | number;
 export type Item = Omit<ButtonProps, 'children'> & {
     id: ID;
@@ -17,8 +17,10 @@ export type RenderProps = {
 };
 export type Props = {
     size?: Size;
+    variant?: 'default' | 'links';
     className?: string;
     tabsWrapperClassName?: string;
+    tabsInnerClassName?: string;
     tabsClassName?: string;
     contentClassName?: string;
     items: Item[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "5.12.0",
+  "version": "5.14.1",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",