@react-fabric/core 1.0.0-beta.47 → 1.0.0-beta.49

package/css/components/_divider.css

@@ -22,11 +22,17 @@
  */
 
 @layer components {
-  .fabric-divider--vertical {
-    margin-inline: 0.25rem;
-  }
+  .fabric-divider {
+    hr {
+      margin: 0;
+    }
+
+    .fabric-divider-label--vertical {
+      padding-inline: 0.25rem;
+    }
 
-  .fabric-divider--horizontal {
-    margin-block: 0.25rem;
+    .fabric-divider-label--horizontal {
+      padding-block: 0.25rem;
+    }
   }
 }

package/css/theme/_utilities.css

@@ -40,7 +40,7 @@
 @variant dark (&:where([data-color-scheme="dark"], [data-color-scheme="dark"] *));
 
 @utility area-* {
-  grid-area: --value([*]);
+  grid-area: --value([ *]);
 }
 
 @utility area-content {
@@ -89,12 +89,8 @@
   flex: 1 1 100%;
 }
 
-@utility rounded {
-  border-radius: var(--rounding);
-}
-
-@utility rounded-capped {
-  border-radius: var(--rounding-cap);
+@utility font-smallcaps {
+  font-variant: small-caps;
 }
 
 @utility scroll-hide {

package/css/theme/index.css

@@ -39,6 +39,7 @@
   --breakpoint-xs: 320px;
   --aspect-portrait: 3 / 4;
   --aspect-screen: 4 / 3;
+  --radius: var(--rounding);
   --radius-capped: var(--rounding-cap);
   --shadow-paper: 0 1px 3px 0 var(--fabric-shadow);
 }

package/dist/cjs/components/callout/Callout.js

@@ -11,6 +11,7 @@ var _excluded = ["children", "color", "legend", "title", "icon", "border", "onCl
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var colors = {
+  none: "bg-base text-tint-900 border-tint-100",
   tint: "bg-tint-50/50 text-tint-800 border-tint-300",
   primary: "bg-primary-50/50 text-primary-800 border-primary-300",
   accent: "bg-accent-50/50 text-accent-800 border-accent-300",

package/dist/cjs/components/collapsable/Collapsable.js

@@ -62,7 +62,7 @@ var Collapsable = function Collapsable(_ref) {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       role: "none",
       ref: headRef,
-      className: classNames("fabric-collapsableHead", "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70", headerClassName, stickyHeader && "bg-base sticky top-0 px-2 py-1 z-10", iconAlign === "end" ? "flex-row-reverse" : "flex-row"),
+      className: classNames("fabric-collapsableHead", "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70", headerClassName, stickyHeader && "bg-base sticky top-0 py-1 z-10", iconAlign === "end" ? "flex-row-reverse" : "flex-row"),
       onClick: function onClick() {
         return !disabled && setOpenState(!openState);
       },
@@ -71,7 +71,7 @@ var Collapsable = function Collapsable(_ref) {
         icon: openState ? iconOpen : iconClosed,
         rtlFlip: true
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "flex-1 px-2",
+        className: "flex-1",
         children: head
       })]
     }), openState && /*#__PURE__*/jsxRuntime.jsx("div", {

package/dist/cjs/components/divider/Divider.js

@@ -34,9 +34,9 @@ var Divider = function Divider(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "tint-300" : _ref$color,
     vertical = _ref.vertical,
-    labelClassName = _ref.labelClassName;
-    _ref.fill;
-    var _ref$align = _ref.align,
+    labelClassName = _ref.labelClassName,
+    style = _ref.style,
+    _ref$align = _ref.align,
     align = _ref$align === void 0 ? "start" : _ref$align,
     className = _ref.className;
   var Rule = react.useCallback(function (_ref2) {
@@ -45,17 +45,18 @@ var Divider = function Divider(_ref) {
     return /*#__PURE__*/jsxRuntime.jsx("hr", {
       style: {
         flex: flex,
-        borderColor: getColor.getColor(color)
+        borderColor: getColor.getColor(color),
+        borderStyle: style
       },
       className: classNames(className, vertical && "vertical", !flex && "self-stretch", vertical ? "fabric-divider--vertical" : "fabric-divider--horizontal")
     });
   }, [color, vertical]);
   return children ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classNames("flex flex-nowrap items-center", vertical && "flex-col", className),
+    className: classNames("flex flex-nowrap items-center fabric-divider", vertical && "flex-col", className),
     children: [/*#__PURE__*/jsxRuntime.jsx(Rule, {
       flex: align === "start" ? "0 0 1rem" : "1 1 1em"
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames("px-2 whitespace-nowrap", vertical ? "fabric-divider--vertical" : "fabric-divider--horizontal", labelClassName, "rounded-full text-[0.75em]", vertical && "origin-center -rotate-90 z-1"),
+      className: classNames("px-2 whitespace-nowrap", vertical ? "fabric-divider-label--vertical" : "fabric-divider-label--horizontal", labelClassName, "rounded-full text-[0.75em]", vertical && "origin-center -rotate-90 z-1"),
       children: children
     }), /*#__PURE__*/jsxRuntime.jsx(Rule, {
       flex: align === "end" ? "0 0 1rem" : "1 1 1em"

package/dist/cjs/components/icon/Icon.js

@@ -8,7 +8,7 @@ var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 
-var _excluded = ["ref", "icon", "bg", "color", "size", "rtlFlip", "animate", "rounded", "viewBox", "className", "onClick"];
+var _excluded = ["ref", "icon", "bg", "color", "size", "rtlFlip", "animate", "rounded", "disabled", "viewBox", "className", "onClick"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SvgTextSize = ["", ".875em", ".525em", ".35em", ".25em"];
@@ -33,6 +33,7 @@ var Icon = function Icon(_ref) {
     rtlFlip = _ref.rtlFlip,
     animate = _ref.animate,
     rounded = _ref.rounded,
+    disabled = _ref.disabled,
     _ref$viewBox = _ref.viewBox,
     viewBox = _ref$viewBox === void 0 ? "0 0 24 24" : _ref$viewBox,
     className = _ref.className,
@@ -94,7 +95,7 @@ var Icon = function Icon(_ref) {
     ref: ref
   }, rest), {}, {
     role: "presentation",
-    className: classNames("fabric-icon", "select-none overflow-hidden box-content leading-none not-italic text-center", !rounded && "rounded", rounded && "rounded-full", animate && "animate-".concat(animate), className),
+    className: classNames("fabric-icon", "select-none overflow-hidden box-content leading-none not-italic text-center", !rounded && "rounded", rounded && "rounded-full", animate && "animate-".concat(animate), !!onClick && disabled && "opacity-30 pointer-events-none", className),
     onClick: onClick,
     "data-flip": rtlFlip,
     style: styles,

package/dist/cjs/components/menu/Menu.js

@@ -14,7 +14,7 @@ var nodeCheck = require('../../utils/nodeCheck.js');
 var MenuItem = require('./MenuItem.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["children", "minimal", "menuClassName", "onClick", "ref"];
+var _excluded = ["children", "minimal", "menuClassName", "onClick", "trigger", "ref"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // FIXME: refactor menu implementation to differentiate between static and floating menus, implement context wrapper for each menu level
@@ -25,6 +25,8 @@ var MenuComponent = function MenuComponent(_ref) {
     minimal = _ref.minimal,
     menuClassName = _ref.menuClassName,
     onClick = _ref.onClick,
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === void 0 ? "hover" : _ref$trigger,
     ref = _ref.ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = react$1.useState(false),
@@ -46,6 +48,7 @@ var MenuComponent = function MenuComponent(_ref) {
       open: !isNested || isOpen,
       onOpenChange: function onOpenChange(open, event, reason) {
         isNested && setIsOpen(open);
+        if (reason === "outside-press" && trigger === "click") tree === null || tree === void 0 || tree.events.emit("close");
       },
       placement: isNested ? "right-start" : "bottom-start",
       middleware: [react.offset({
@@ -58,6 +61,7 @@ var MenuComponent = function MenuComponent(_ref) {
     refs = _useFloating.refs,
     context = _useFloating.context;
   var hover = react.useHover(context, {
+    enabled: trigger === "hover",
     delay: {
       open: 75
     },
@@ -67,8 +71,8 @@ var MenuComponent = function MenuComponent(_ref) {
   });
   var click = react.useClick(context, {
     event: "mousedown",
-    toggle: !isNested,
-    ignoreMouse: isNested
+    toggle: trigger === "click" || !isNested,
+    ignoreMouse: trigger === "hover" && !isNested
   });
   var role = react.useRole(context, {
     role: "menu"

package/dist/cjs/components/navigator/Navigator.js

@@ -7,9 +7,10 @@ var react = require('react');
 var HotKey = require('../../hotkeys/HotKey.js');
 var icons = require('../../types/icons.js');
 var Icon = require('../icon/Icon.js');
+var utilities = require('@react-fabric/utilities');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["className", "onNavigate", "color", "children"];
+var _excluded = ["className", "onNavigate", "color", "children", "length", "current", "disableKeyHandlers"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Navigator = function Navigator(_ref) {
@@ -17,21 +18,24 @@ var Navigator = function Navigator(_ref) {
     onNavigate = _ref.onNavigate,
     color = _ref.color,
     children = _ref.children,
+    length = _ref.length,
+    current = _ref.current,
+    disableKeyHandlers = _ref.disableKeyHandlers,
     aria = _objectWithoutProperties(_ref, _excluded);
   var navPrev = react.useCallback(function () {
-    return onNavigate(-1);
-  }, [onNavigate]);
+    return (utilities.isEmpty(current) || current !== 0) && onNavigate(-1);
+  }, [onNavigate, current]);
   var navNext = react.useCallback(function () {
-    return onNavigate(+1);
-  }, [onNavigate]);
+    return (utilities.isEmpty(current) || current + 1 < (length !== null && length !== void 0 ? length : 0)) && onNavigate(+1);
+  }, [onNavigate, current, length]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
     "data-ref": "navigator",
     className: classNames(className, "inline-flex items-center leading-none")
   }, aria), {}, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
+    children: [!disableKeyHandlers && /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
       keyCombo: "left",
       handler: navPrev
-    }), /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
+    }), !disableKeyHandlers && /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
       keyCombo: "right",
       handler: navNext
     }), /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
@@ -41,8 +45,9 @@ var Navigator = function Navigator(_ref) {
       "aria-label": "previous",
       "data-ref": "previous",
       icon: icons.CoreIcons.chevronLeft,
+      disabled: !utilities.isEmpty(current) && current === 0,
       onClick: function onClick(e) {
-        return [e.stopPropagation(), onNavigate(-1)];
+        return [e.stopPropagation(), navPrev()];
       }
     }), children, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
       rtlFlip: true,
@@ -51,8 +56,9 @@ var Navigator = function Navigator(_ref) {
       "aria-label": "next",
       "data-ref": "next",
       icon: icons.CoreIcons.chevronRight,
+      disabled: !utilities.isEmpty(current) && current + 1 === length,
       onClick: function onClick(e) {
-        return [e.stopPropagation(), onNavigate(1)];
+        return [e.stopPropagation(), navNext()];
       }
     })]
   }));

package/dist/cjs/core/responsive/Responsive.js

@@ -7,7 +7,7 @@ var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["children", "fullWidth", "className", "gutter"],
   _excluded2 = ["children", "gutter", "noWrap", "orient", "align", "justify", "className"],
-  _excluded3 = ["children", "flex", "align", "className", "stretchContent"];
+  _excluded3 = ["children", "flex", "align", "truncate", "className", "stretchContent"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -48,11 +48,12 @@ var Col = function Col(_ref3) {
   var children = _ref3.children,
     flex = _ref3.flex,
     align = _ref3.align,
+    truncate = _ref3.truncate,
     className = _ref3.className,
     stretchContent = _ref3.stretchContent,
     aria = _objectWithoutProperties(_ref3, _excluded3);
   return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
-    className: classNames("fabric-col", className, stretchContent && "stretchContent", flex === "fill" && "flex-1", flex === "full" && "flex-full", flex === "auto" && "flex-auto", flex === "initial" && "flex-initial", flex === "content" && "flex-none", align && "self-".concat(align))
+    className: classNames("fabric-col", className, stretchContent && "stretchContent", flex === "fill" && "flex-1", flex === "full" && "flex-full", flex === "auto" && "flex-auto", flex === "initial" && "flex-initial", flex === "content" && "flex-none", align && "self-".concat(align), truncate && "truncate")
   }, aria), {}, {
     children: children
   }));

package/dist/cjs/types/icons.js

@@ -66,9 +66,10 @@ exports.CoreIcons = void 0;
   _CoreIcons.sortAsc = "M19 7H22L18 3L14 7H17V21H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z";
   _CoreIcons.refresh = "M19.547 14.667c-0.736 2.083-2.245 3.67-4.094 4.553s-4.031 1.061-6.114 0.325-3.67-2.245-4.553-4.094-1.061-4.031-0.325-6.114 2.245-3.67 4.094-4.553 4.031-1.061 6.114-0.325c1.188 0.42 2.209 1.088 2.987 1.882l2.824 2.659h-3.48c-0.552 0-1 0.448-1 1s0.448 1 1 1h5.997c0.004 0 0.009 0 0.013 0 0.137-0.001 0.267-0.030 0.386-0.082 0.119-0.051 0.229-0.126 0.324-0.225 0.012-0.012 0.023-0.025 0.034-0.038 0.076-0.087 0.134-0.184 0.175-0.287s0.065-0.213 0.069-0.328c0.002-0.014 0.002-0.028 0.002-0.042v-5.998c0-0.552-0.448-1-1-1s-1 0.448-1 1v3.685l-2.916-2.745c-0.993-1.012-2.274-1.846-3.748-2.366-2.604-0.921-5.336-0.698-7.644 0.405s-4.197 3.088-5.117 5.692-0.696 5.335 0.406 7.643 3.088 4.197 5.692 5.117 5.335 0.697 7.643-0.406 4.197-3.088 5.117-5.692c0.184-0.521-0.089-1.092-0.61-1.276s-1.092 0.089-1.276 0.61z";
   _CoreIcons.search = "M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z";
+  _CoreIcons.ellipsis = "M14 12c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 5c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 19c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414z";
   _CoreIcons.filter = "M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z";
   _CoreIcons.funnel = "M19.845 4l-6.609 7.814c-0.147 0.173-0.236 0.399-0.236 0.646v6.922l-2-1v-5.922c0.001-0.227-0.077-0.457-0.236-0.646l-6.609-7.814zM22 2h-20c-0.552 0-1 0.448-1 1 0 0.247 0.089 0.473 0.236 0.646l7.764 9.18v6.174c0 0.389 0.222 0.727 0.553 0.894l4 2c0.494 0.247 1.095 0.047 1.342-0.447 0.072-0.146 0.106-0.301 0.105-0.447v-8.174l7.764-9.18c0.357-0.422 0.304-1.053-0.118-1.409-0.189-0.16-0.419-0.238-0.646-0.237z";
-  _CoreIcons.ellipsis = "M14 12c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 5c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 19c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414z";
+  _CoreIcons.funnelFull = "M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z";
   _CoreIcons.funnelPlus = "M15 17H18V14H20V17H23V19H20V22H18V19H15V17M13 19.88C13.04 20.18 12.94 20.5 12.72 20.71C12.32 21.1 11.69 21.1 11.3 20.71L7.29 16.7C7.06 16.47 6.96 16.16 7 15.87V10.75L2.21 4.62C1.87 4.19 1.95 3.56 2.38 3.22C2.57 3.08 2.78 3 3 3V3H17V3C17.22 3 17.43 3.08 17.62 3.22C18.05 3.56 18.13 4.19 17.79 4.62L13 10.75V19.88M5.04 5L9 10.07V15.58L11 17.58V10.05L14.96 5H5.04Z";
   _CoreIcons.funnelRemove = "M14.73,20.83L17.58,18L14.73,15.17L16.15,13.76L19,16.57L21.8,13.76L23.22,15.17L20.41,18L23.22,20.83L21.8,22.24L19,19.4L16.15,22.24L14.73,20.83M13,19.88C13.04,20.18 12.94,20.5 12.71,20.71C12.32,21.1 11.69,21.1 11.3,20.71L7.29,16.7C7.06,16.47 6.96,16.16 7,15.87V10.75L2.21,4.62C1.87,4.19 1.95,3.56 2.38,3.22C2.57,3.08 2.78,3 3,3V3H17V3C17.22,3 17.43,3.08 17.62,3.22C18.05,3.56 18.13,4.19 17.79,4.62L13,10.75V19.88M5.04,5L9,10.06V15.58L11,17.58V10.05L14.96,5H5.04Z";
   _CoreIcons.funnelMinus = "M15 17H23V19H15V17M13 19.88C13.04 20.18 12.94 20.5 12.72 20.71C12.32 21.1 11.69 21.1 11.3 20.71L7.29 16.7C7.06 16.47 6.96 16.16 7 15.87V10.75L2.21 4.62C1.87 4.19 1.95 3.56 2.38 3.22C2.57 3.08 2.78 3 3 3V3H17V3C17.22 3 17.43 3.08 17.62 3.22C18.05 3.56 18.13 4.19 17.79 4.62L13 10.75V19.88M5.04 5L9 10.07V15.58L11 17.58V10.05L14.96 5H5.04Z";

package/dist/esm/components/callout/Callout.js

@@ -11,6 +11,7 @@ var _excluded = ["children", "color", "legend", "title", "icon", "border", "onCl
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var colors = {
+  none: "bg-base text-tint-900 border-tint-100",
   tint: "bg-tint-50/50 text-tint-800 border-tint-300",
   primary: "bg-primary-50/50 text-primary-800 border-primary-300",
   accent: "bg-accent-50/50 text-accent-800 border-accent-300",

package/dist/esm/components/collapsable/Collapsable.js

@@ -62,7 +62,7 @@ var Collapsable = function Collapsable(_ref) {
     children: [/*#__PURE__*/jsxs("div", {
       role: "none",
       ref: headRef,
-      className: classNames("fabric-collapsableHead", "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70", headerClassName, stickyHeader && "bg-base sticky top-0 px-2 py-1 z-10", iconAlign === "end" ? "flex-row-reverse" : "flex-row"),
+      className: classNames("fabric-collapsableHead", "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70", headerClassName, stickyHeader && "bg-base sticky top-0 py-1 z-10", iconAlign === "end" ? "flex-row-reverse" : "flex-row"),
       onClick: function onClick() {
         return !disabled && setOpenState(!openState);
       },
@@ -71,7 +71,7 @@ var Collapsable = function Collapsable(_ref) {
         icon: openState ? iconOpen : iconClosed,
         rtlFlip: true
       }), /*#__PURE__*/jsx("div", {
-        className: "flex-1 px-2",
+        className: "flex-1",
         children: head
       })]
     }), openState && /*#__PURE__*/jsx("div", {

package/dist/esm/components/divider/Divider.js

@@ -34,9 +34,9 @@ var Divider = function Divider(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "tint-300" : _ref$color,
     vertical = _ref.vertical,
-    labelClassName = _ref.labelClassName;
-    _ref.fill;
-    var _ref$align = _ref.align,
+    labelClassName = _ref.labelClassName,
+    style = _ref.style,
+    _ref$align = _ref.align,
     align = _ref$align === void 0 ? "start" : _ref$align,
     className = _ref.className;
   var Rule = useCallback(function (_ref2) {
@@ -45,17 +45,18 @@ var Divider = function Divider(_ref) {
     return /*#__PURE__*/jsx("hr", {
       style: {
         flex: flex,
-        borderColor: getColor(color)
+        borderColor: getColor(color),
+        borderStyle: style
       },
       className: classNames(className, vertical && "vertical", !flex && "self-stretch", vertical ? "fabric-divider--vertical" : "fabric-divider--horizontal")
     });
   }, [color, vertical]);
   return children ? /*#__PURE__*/jsxs("div", {
-    className: classNames("flex flex-nowrap items-center", vertical && "flex-col", className),
+    className: classNames("flex flex-nowrap items-center fabric-divider", vertical && "flex-col", className),
     children: [/*#__PURE__*/jsx(Rule, {
       flex: align === "start" ? "0 0 1rem" : "1 1 1em"
     }), /*#__PURE__*/jsx("div", {
-      className: classNames("px-2 whitespace-nowrap", vertical ? "fabric-divider--vertical" : "fabric-divider--horizontal", labelClassName, "rounded-full text-[0.75em]", vertical && "origin-center -rotate-90 z-1"),
+      className: classNames("px-2 whitespace-nowrap", vertical ? "fabric-divider-label--vertical" : "fabric-divider-label--horizontal", labelClassName, "rounded-full text-[0.75em]", vertical && "origin-center -rotate-90 z-1"),
       children: children
     }), /*#__PURE__*/jsx(Rule, {
       flex: align === "end" ? "0 0 1rem" : "1 1 1em"

package/dist/esm/components/icon/Icon.js

@@ -8,7 +8,7 @@ import { useMemo } from 'react';
 import { jsx } from 'react/jsx-runtime';
 import { getColor } from '../../utils/getColor.js';
 
-var _excluded = ["ref", "icon", "bg", "color", "size", "rtlFlip", "animate", "rounded", "viewBox", "className", "onClick"];
+var _excluded = ["ref", "icon", "bg", "color", "size", "rtlFlip", "animate", "rounded", "disabled", "viewBox", "className", "onClick"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SvgTextSize = ["", ".875em", ".525em", ".35em", ".25em"];
@@ -33,6 +33,7 @@ var Icon = function Icon(_ref) {
     rtlFlip = _ref.rtlFlip,
     animate = _ref.animate,
     rounded = _ref.rounded,
+    disabled = _ref.disabled,
     _ref$viewBox = _ref.viewBox,
     viewBox = _ref$viewBox === void 0 ? "0 0 24 24" : _ref$viewBox,
     className = _ref.className,
@@ -94,7 +95,7 @@ var Icon = function Icon(_ref) {
     ref: ref
   }, rest), {}, {
     role: "presentation",
-    className: classNames("fabric-icon", "select-none overflow-hidden box-content leading-none not-italic text-center", !rounded && "rounded", rounded && "rounded-full", animate && "animate-".concat(animate), className),
+    className: classNames("fabric-icon", "select-none overflow-hidden box-content leading-none not-italic text-center", !rounded && "rounded", rounded && "rounded-full", animate && "animate-".concat(animate), !!onClick && disabled && "opacity-30 pointer-events-none", className),
     onClick: onClick,
     "data-flip": rtlFlip,
     style: styles,

package/dist/esm/components/menu/Menu.js

@@ -14,7 +14,7 @@ import { nodeCheck } from '../../utils/nodeCheck.js';
 import { MenuItem } from './MenuItem.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["children", "minimal", "menuClassName", "onClick", "ref"];
+var _excluded = ["children", "minimal", "menuClassName", "onClick", "trigger", "ref"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // FIXME: refactor menu implementation to differentiate between static and floating menus, implement context wrapper for each menu level
@@ -25,6 +25,8 @@ var MenuComponent = function MenuComponent(_ref) {
     minimal = _ref.minimal,
     menuClassName = _ref.menuClassName,
     onClick = _ref.onClick,
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === void 0 ? "hover" : _ref$trigger,
     ref = _ref.ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
@@ -46,6 +48,7 @@ var MenuComponent = function MenuComponent(_ref) {
       open: !isNested || isOpen,
       onOpenChange: function onOpenChange(open, event, reason) {
         isNested && setIsOpen(open);
+        if (reason === "outside-press" && trigger === "click") tree === null || tree === void 0 || tree.events.emit("close");
       },
       placement: isNested ? "right-start" : "bottom-start",
       middleware: [offset({
@@ -58,6 +61,7 @@ var MenuComponent = function MenuComponent(_ref) {
     refs = _useFloating.refs,
     context = _useFloating.context;
   var hover = useHover(context, {
+    enabled: trigger === "hover",
     delay: {
       open: 75
     },
@@ -67,8 +71,8 @@ var MenuComponent = function MenuComponent(_ref) {
   });
   var click = useClick(context, {
     event: "mousedown",
-    toggle: !isNested,
-    ignoreMouse: isNested
+    toggle: trigger === "click" || !isNested,
+    ignoreMouse: trigger === "hover" && !isNested
   });
   var role = useRole(context, {
     role: "menu"

package/dist/esm/components/navigator/Navigator.js

@@ -7,9 +7,10 @@ import { useCallback } from 'react';
 import { HotKey } from '../../hotkeys/HotKey.js';
 import { CoreIcons } from '../../types/icons.js';
 import { Icon } from '../icon/Icon.js';
+import { isEmpty } from '@react-fabric/utilities';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["className", "onNavigate", "color", "children"];
+var _excluded = ["className", "onNavigate", "color", "children", "length", "current", "disableKeyHandlers"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Navigator = function Navigator(_ref) {
@@ -17,21 +18,24 @@ var Navigator = function Navigator(_ref) {
     onNavigate = _ref.onNavigate,
     color = _ref.color,
     children = _ref.children,
+    length = _ref.length,
+    current = _ref.current,
+    disableKeyHandlers = _ref.disableKeyHandlers,
     aria = _objectWithoutProperties(_ref, _excluded);
   var navPrev = useCallback(function () {
-    return onNavigate(-1);
-  }, [onNavigate]);
+    return (isEmpty(current) || current !== 0) && onNavigate(-1);
+  }, [onNavigate, current]);
   var navNext = useCallback(function () {
-    return onNavigate(+1);
-  }, [onNavigate]);
+    return (isEmpty(current) || current + 1 < (length !== null && length !== void 0 ? length : 0)) && onNavigate(+1);
+  }, [onNavigate, current, length]);
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
     "data-ref": "navigator",
     className: classNames(className, "inline-flex items-center leading-none")
   }, aria), {}, {
-    children: [/*#__PURE__*/jsx(HotKey, {
+    children: [!disableKeyHandlers && /*#__PURE__*/jsx(HotKey, {
       keyCombo: "left",
       handler: navPrev
-    }), /*#__PURE__*/jsx(HotKey, {
+    }), !disableKeyHandlers && /*#__PURE__*/jsx(HotKey, {
       keyCombo: "right",
       handler: navNext
     }), /*#__PURE__*/jsx(Icon, {
@@ -41,8 +45,9 @@ var Navigator = function Navigator(_ref) {
       "aria-label": "previous",
       "data-ref": "previous",
       icon: CoreIcons.chevronLeft,
+      disabled: !isEmpty(current) && current === 0,
       onClick: function onClick(e) {
-        return [e.stopPropagation(), onNavigate(-1)];
+        return [e.stopPropagation(), navPrev()];
       }
     }), children, /*#__PURE__*/jsx(Icon, {
       rtlFlip: true,
@@ -51,8 +56,9 @@ var Navigator = function Navigator(_ref) {
       "aria-label": "next",
       "data-ref": "next",
       icon: CoreIcons.chevronRight,
+      disabled: !isEmpty(current) && current + 1 === length,
       onClick: function onClick(e) {
-        return [e.stopPropagation(), onNavigate(1)];
+        return [e.stopPropagation(), navNext()];
       }
     })]
   }));

package/dist/esm/core/responsive/Responsive.js

@@ -7,7 +7,7 @@ import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["children", "fullWidth", "className", "gutter"],
   _excluded2 = ["children", "gutter", "noWrap", "orient", "align", "justify", "className"],
-  _excluded3 = ["children", "flex", "align", "className", "stretchContent"];
+  _excluded3 = ["children", "flex", "align", "truncate", "className", "stretchContent"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -48,11 +48,12 @@ var Col = function Col(_ref3) {
   var children = _ref3.children,
     flex = _ref3.flex,
     align = _ref3.align,
+    truncate = _ref3.truncate,
     className = _ref3.className,
     stretchContent = _ref3.stretchContent,
     aria = _objectWithoutProperties(_ref3, _excluded3);
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
-    className: classNames("fabric-col", className, stretchContent && "stretchContent", flex === "fill" && "flex-1", flex === "full" && "flex-full", flex === "auto" && "flex-auto", flex === "initial" && "flex-initial", flex === "content" && "flex-none", align && "self-".concat(align))
+    className: classNames("fabric-col", className, stretchContent && "stretchContent", flex === "fill" && "flex-1", flex === "full" && "flex-full", flex === "auto" && "flex-auto", flex === "initial" && "flex-initial", flex === "content" && "flex-none", align && "self-".concat(align), truncate && "truncate")
   }, aria), {}, {
     children: children
   }));

package/dist/esm/types/icons.js

@@ -66,9 +66,10 @@ var CoreIcons;
   _CoreIcons.sortAsc = "M19 7H22L18 3L14 7H17V21H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z";
   _CoreIcons.refresh = "M19.547 14.667c-0.736 2.083-2.245 3.67-4.094 4.553s-4.031 1.061-6.114 0.325-3.67-2.245-4.553-4.094-1.061-4.031-0.325-6.114 2.245-3.67 4.094-4.553 4.031-1.061 6.114-0.325c1.188 0.42 2.209 1.088 2.987 1.882l2.824 2.659h-3.48c-0.552 0-1 0.448-1 1s0.448 1 1 1h5.997c0.004 0 0.009 0 0.013 0 0.137-0.001 0.267-0.030 0.386-0.082 0.119-0.051 0.229-0.126 0.324-0.225 0.012-0.012 0.023-0.025 0.034-0.038 0.076-0.087 0.134-0.184 0.175-0.287s0.065-0.213 0.069-0.328c0.002-0.014 0.002-0.028 0.002-0.042v-5.998c0-0.552-0.448-1-1-1s-1 0.448-1 1v3.685l-2.916-2.745c-0.993-1.012-2.274-1.846-3.748-2.366-2.604-0.921-5.336-0.698-7.644 0.405s-4.197 3.088-5.117 5.692-0.696 5.335 0.406 7.643 3.088 4.197 5.692 5.117 5.335 0.697 7.643-0.406 4.197-3.088 5.117-5.692c0.184-0.521-0.089-1.092-0.61-1.276s-1.092 0.089-1.276 0.61z";
   _CoreIcons.search = "M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z";
+  _CoreIcons.ellipsis = "M14 12c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 5c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 19c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414z";
   _CoreIcons.filter = "M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z";
   _CoreIcons.funnel = "M19.845 4l-6.609 7.814c-0.147 0.173-0.236 0.399-0.236 0.646v6.922l-2-1v-5.922c0.001-0.227-0.077-0.457-0.236-0.646l-6.609-7.814zM22 2h-20c-0.552 0-1 0.448-1 1 0 0.247 0.089 0.473 0.236 0.646l7.764 9.18v6.174c0 0.389 0.222 0.727 0.553 0.894l4 2c0.494 0.247 1.095 0.047 1.342-0.447 0.072-0.146 0.106-0.301 0.105-0.447v-8.174l7.764-9.18c0.357-0.422 0.304-1.053-0.118-1.409-0.189-0.16-0.419-0.238-0.646-0.237z";
-  _CoreIcons.ellipsis = "M14 12c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 5c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 19c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414z";
+  _CoreIcons.funnelFull = "M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z";
   _CoreIcons.funnelPlus = "M15 17H18V14H20V17H23V19H20V22H18V19H15V17M13 19.88C13.04 20.18 12.94 20.5 12.72 20.71C12.32 21.1 11.69 21.1 11.3 20.71L7.29 16.7C7.06 16.47 6.96 16.16 7 15.87V10.75L2.21 4.62C1.87 4.19 1.95 3.56 2.38 3.22C2.57 3.08 2.78 3 3 3V3H17V3C17.22 3 17.43 3.08 17.62 3.22C18.05 3.56 18.13 4.19 17.79 4.62L13 10.75V19.88M5.04 5L9 10.07V15.58L11 17.58V10.05L14.96 5H5.04Z";
   _CoreIcons.funnelRemove = "M14.73,20.83L17.58,18L14.73,15.17L16.15,13.76L19,16.57L21.8,13.76L23.22,15.17L20.41,18L23.22,20.83L21.8,22.24L19,19.4L16.15,22.24L14.73,20.83M13,19.88C13.04,20.18 12.94,20.5 12.71,20.71C12.32,21.1 11.69,21.1 11.3,20.71L7.29,16.7C7.06,16.47 6.96,16.16 7,15.87V10.75L2.21,4.62C1.87,4.19 1.95,3.56 2.38,3.22C2.57,3.08 2.78,3 3,3V3H17V3C17.22,3 17.43,3.08 17.62,3.22C18.05,3.56 18.13,4.19 17.79,4.62L13,10.75V19.88M5.04,5L9,10.06V15.58L11,17.58V10.05L14.96,5H5.04Z";
   _CoreIcons.funnelMinus = "M15 17H23V19H15V17M13 19.88C13.04 20.18 12.94 20.5 12.72 20.71C12.32 21.1 11.69 21.1 11.3 20.71L7.29 16.7C7.06 16.47 6.96 16.16 7 15.87V10.75L2.21 4.62C1.87 4.19 1.95 3.56 2.38 3.22C2.57 3.08 2.78 3 3 3V3H17V3C17.22 3 17.43 3.08 17.62 3.22C18.05 3.56 18.13 4.19 17.79 4.62L13 10.75V19.88M5.04 5L9 10.07V15.58L11 17.58V10.05L14.96 5H5.04Z";

package/dist/types/components/callout/Callout.d.ts

@@ -4,7 +4,7 @@ export interface CalloutProps extends AriaProps, ChildrenProp, CssProp, TestProp
     /**
      * callout color
      */
-    color?: ColorState;
+    color?: ColorState | "none";
     /**
      * legend title
      */

package/dist/types/components/card/FlipContent.d.ts

@@ -0,0 +1,7 @@
+import { type ChildrenProp, type RefProp } from "../../types";
+export interface FlipContentRef {
+    flipCard: () => void;
+}
+export interface Props extends ChildrenProp, RefProp<FlipContentRef> {
+}
+export declare const FlipContent: ({ ref, children }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/divider/Divider.d.ts

@@ -1,9 +1,5 @@
 import { type ChildProp, type ColorType, type CssProp, type PaletteType } from "../../types";
 export interface DividerProps extends CssProp, Partial<ChildProp> {
-    /**
-     * apply text bg
-     */
-    fill?: boolean;
     /**
      * vertical rule
      */
@@ -20,5 +16,9 @@ export interface DividerProps extends CssProp, Partial<ChildProp> {
      * text alignment
      */
     align?: "start" | "end" | "center";
+    /**
+     * divider style
+     */
+    style?: "solid" | "dashed" | "dotted";
 }
-export declare const Divider: ({ children, color, vertical, labelClassName, fill, align, className, }: DividerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Divider: ({ children, color, vertical, labelClassName, style, align, className, }: DividerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/icon/Icon.d.ts

@@ -33,6 +33,7 @@ export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
      * apply animation
      */
     animate?: "spin" | "pulse" | "bounce";
+    disabled?: boolean;
     /**
      * click handler
      */
@@ -41,4 +42,4 @@ export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
 /**
  * An icon is a display component for svg icon path / image
  */
-export declare const Icon: ({ ref, icon, bg, color, size, rtlFlip, animate, rounded, viewBox, className, onClick, ...rest }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Icon: ({ ref, icon, bg, color, size, rtlFlip, animate, rounded, disabled, viewBox, className, onClick, ...rest }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/menu/types.d.ts

@@ -51,6 +51,7 @@ export interface MenuRootProps extends CssProp {
 export interface MenuInnerProps extends MenuItemProps {
     label: string;
     minimal?: never;
+    trigger?: "hover" | "click";
     /**
      * floating menu className
      */

package/dist/types/components/navigator/Navigator.d.ts

@@ -1,5 +1,8 @@
 import { type AriaProps, type ChildProp, type ColorType, type CssProp, type PaletteType, type TestProps } from "../../types";
 export interface NavigatorProps extends CssProp, AriaProps, TestProps, Partial<ChildProp> {
+    length?: number;
+    current?: number;
+    disableKeyHandlers?: boolean;
     /**
      * navigator button color
      */
@@ -9,4 +12,4 @@ export interface NavigatorProps extends CssProp, AriaProps, TestProps, Partial<C
      */
     onNavigate: (dir: -1 | 1) => void;
 }
-export declare const Navigator: ({ className, onNavigate, color, children, ...aria }: NavigatorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Navigator: ({ className, onNavigate, color, children, length, current, disableKeyHandlers, ...aria }: NavigatorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/core/responsive/Responsive.d.ts

@@ -44,10 +44,14 @@ export interface ColProps extends AriaProps, CssProp, TestProps, Partial<Childre
      * stretch inner content
      */
     stretchContent?: boolean;
+    /**
+     * truncate text
+     */
+    truncate?: boolean;
 }
 /**
  * Responsive layout container
  */
 export declare const Container: ({ children, fullWidth, className, gutter, ...aria }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Row: ({ children, gutter, noWrap, orient, align, justify, className, ...aria }: RowProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Col: ({ children, flex, align, className, stretchContent, ...aria }: ColProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Col: ({ children, flex, align, truncate, className, stretchContent, ...aria }: ColProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/types/icons.d.ts

@@ -48,9 +48,10 @@ export declare namespace CoreIcons {
     const sortAsc = "M19 7H22L18 3L14 7H17V21H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z";
     const refresh = "M19.547 14.667c-0.736 2.083-2.245 3.67-4.094 4.553s-4.031 1.061-6.114 0.325-3.67-2.245-4.553-4.094-1.061-4.031-0.325-6.114 2.245-3.67 4.094-4.553 4.031-1.061 6.114-0.325c1.188 0.42 2.209 1.088 2.987 1.882l2.824 2.659h-3.48c-0.552 0-1 0.448-1 1s0.448 1 1 1h5.997c0.004 0 0.009 0 0.013 0 0.137-0.001 0.267-0.030 0.386-0.082 0.119-0.051 0.229-0.126 0.324-0.225 0.012-0.012 0.023-0.025 0.034-0.038 0.076-0.087 0.134-0.184 0.175-0.287s0.065-0.213 0.069-0.328c0.002-0.014 0.002-0.028 0.002-0.042v-5.998c0-0.552-0.448-1-1-1s-1 0.448-1 1v3.685l-2.916-2.745c-0.993-1.012-2.274-1.846-3.748-2.366-2.604-0.921-5.336-0.698-7.644 0.405s-4.197 3.088-5.117 5.692-0.696 5.335 0.406 7.643 3.088 4.197 5.692 5.117 5.335 0.697 7.643-0.406 4.197-3.088 5.117-5.692c0.184-0.521-0.089-1.092-0.61-1.276s-1.092 0.089-1.276 0.61z";
     const search = "M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z";
+    const ellipsis = "M14 12c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 5c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 19c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414z";
     const filter = "M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z";
     const funnel = "M19.845 4l-6.609 7.814c-0.147 0.173-0.236 0.399-0.236 0.646v6.922l-2-1v-5.922c0.001-0.227-0.077-0.457-0.236-0.646l-6.609-7.814zM22 2h-20c-0.552 0-1 0.448-1 1 0 0.247 0.089 0.473 0.236 0.646l7.764 9.18v6.174c0 0.389 0.222 0.727 0.553 0.894l4 2c0.494 0.247 1.095 0.047 1.342-0.447 0.072-0.146 0.106-0.301 0.105-0.447v-8.174l7.764-9.18c0.357-0.422 0.304-1.053-0.118-1.409-0.189-0.16-0.419-0.238-0.646-0.237z";
-    const ellipsis = "M14 12c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 5c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 19c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414z";
+    const funnelFull = "M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z";
     const funnelPlus = "M15 17H18V14H20V17H23V19H20V22H18V19H15V17M13 19.88C13.04 20.18 12.94 20.5 12.72 20.71C12.32 21.1 11.69 21.1 11.3 20.71L7.29 16.7C7.06 16.47 6.96 16.16 7 15.87V10.75L2.21 4.62C1.87 4.19 1.95 3.56 2.38 3.22C2.57 3.08 2.78 3 3 3V3H17V3C17.22 3 17.43 3.08 17.62 3.22C18.05 3.56 18.13 4.19 17.79 4.62L13 10.75V19.88M5.04 5L9 10.07V15.58L11 17.58V10.05L14.96 5H5.04Z";
     const funnelRemove = "M14.73,20.83L17.58,18L14.73,15.17L16.15,13.76L19,16.57L21.8,13.76L23.22,15.17L20.41,18L23.22,20.83L21.8,22.24L19,19.4L16.15,22.24L14.73,20.83M13,19.88C13.04,20.18 12.94,20.5 12.71,20.71C12.32,21.1 11.69,21.1 11.3,20.71L7.29,16.7C7.06,16.47 6.96,16.16 7,15.87V10.75L2.21,4.62C1.87,4.19 1.95,3.56 2.38,3.22C2.57,3.08 2.78,3 3,3V3H17V3C17.22,3 17.43,3.08 17.62,3.22C18.05,3.56 18.13,4.19 17.79,4.62L13,10.75V19.88M5.04,5L9,10.06V15.58L11,17.58V10.05L14.96,5H5.04Z";
     const funnelMinus = "M15 17H23V19H15V17M13 19.88C13.04 20.18 12.94 20.5 12.72 20.71C12.32 21.1 11.69 21.1 11.3 20.71L7.29 16.7C7.06 16.47 6.96 16.16 7 15.87V10.75L2.21 4.62C1.87 4.19 1.95 3.56 2.38 3.22C2.57 3.08 2.78 3 3 3V3H17V3C17.22 3 17.43 3.08 17.62 3.22C18.05 3.56 18.13 4.19 17.79 4.62L13 10.75V19.88M5.04 5L9 10.07V15.58L11 17.58V10.05L14.96 5H5.04Z";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.47",
+  "version": "1.0.0-beta.49",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -35,10 +35,10 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.26.24",
-    "@react-fabric/utilities": "^1.0.0-beta.47",
+    "@floating-ui/react": "^0.27.9",
+    "@react-fabric/utilities": "^1.0.0-beta.49",
     "@tailwindcss/postcss": "~4.0.14",
-    "boring-avatars": "^1.10.2",
+    "boring-avatars": "^1.11.2",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
     "resize-observer-polyfill": "^1.5.1",
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "832a1bce055337127ba17c505731f419248cc15e"
+  "gitHead": "29b3ed65e9f9687d738dd7c6facdb9fedafb4219"
 }

package/src/components/callout/Callout.tsx

@@ -40,7 +40,7 @@ export interface CalloutProps
   /**
    * callout color
    */
-  color?: ColorState;
+  color?: ColorState | "none";
   /**
    * legend title
    */
@@ -64,6 +64,7 @@ export interface CalloutProps
 }
 
 const colors = {
+  none: "bg-base text-tint-900 border-tint-100",
   tint: "bg-tint-50/50 text-tint-800 border-tint-300",
   primary: "bg-primary-50/50 text-primary-800 border-primary-300",
   accent: "bg-accent-50/50 text-accent-800 border-accent-300",

package/src/components/card/FlipContent.tsx

@@ -0,0 +1,69 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2025 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  useImperativeHandle,
+  useState,
+} from "react";
+import { type ChildrenProp, type CssProp, type RefProp } from "../../types";
+
+export interface FlipContentRef {
+  flipCard: () => void;
+}
+
+export interface Props extends ChildrenProp, RefProp<FlipContentRef> {
+  //
+}
+
+export const FlipContent = ({ ref, children }: Props) => {
+  const [showBack, setShowBack] = useState(false);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      flipCard: () => setShowBack(!showBack),
+    }),
+    [showBack],
+  );
+
+  return (
+    <div className="relative flex-1" data-card-flip={showBack}>
+      {Children.map(
+        children,
+        (child, idx) =>
+          isValidElement<CssProp>(child) &&
+          cloneElement(child, {
+            className: classNames(
+              child.props?.className ?? "",
+              idx === 0 ? "bg-base relative" : "bg-base absolute inset-0",
+            ),
+            "data-card-flip-face": idx === 0 ? "front" : "back",
+          } as AnyObject),
+      )}
+    </div>
+  );
+};

package/src/components/collapsable/Collapsable.tsx

@@ -142,13 +142,13 @@ export const Collapsable = ({
           "fabric-collapsableHead",
           "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70",
           headerClassName,
-          stickyHeader && "bg-base sticky top-0 px-2 py-1 z-10",
+          stickyHeader && "bg-base sticky top-0 py-1 z-10",
           iconAlign === "end" ? "flex-row-reverse" : "flex-row",
         )}
         onClick={() => !disabled && setOpenState(!openState)}
       >
         <Icon size="1.125em" icon={openState ? iconOpen : iconClosed} rtlFlip />
-        <div className="flex-1 px-2">{head}</div>
+        <div className="flex-1">{head}</div>
       </div>
       {openState && (
         <div

package/src/components/divider/Divider.tsx

@@ -32,10 +32,6 @@ import {
 import { getColor } from "../../utils";
 
 export interface DividerProps extends CssProp, Partial<ChildProp> {
-  /**
-   * apply text bg
-   */
-  fill?: boolean;
   /**
    * vertical rule
    */
@@ -52,6 +48,10 @@ export interface DividerProps extends CssProp, Partial<ChildProp> {
    * text alignment
    */
   align?: "start" | "end" | "center";
+  /**
+   * divider style
+   */
+  style?: "solid" | "dashed" | "dotted";
 }
 
 export const Divider = ({
@@ -59,7 +59,7 @@ export const Divider = ({
   color = "tint-300",
   vertical,
   labelClassName,
-  fill,
+  style,
   align = "start",
   className,
 }: DividerProps) => {
@@ -67,7 +67,7 @@ export const Divider = ({
     ({ flex, className }: KeyValue) => {
       return (
         <hr
-          style={{ flex, borderColor: getColor(color) }}
+          style={{ flex, borderColor: getColor(color), borderStyle: style }}
           className={classNames(
             className,
             vertical && "vertical",
@@ -85,7 +85,7 @@ export const Divider = ({
   return children ? (
     <div
       className={classNames(
-        "flex flex-nowrap items-center",
+        "flex flex-nowrap items-center fabric-divider",
         vertical && "flex-col",
         className,
       )}
@@ -94,7 +94,9 @@ export const Divider = ({
       <div
         className={classNames(
           "px-2 whitespace-nowrap",
-          vertical ? "fabric-divider--vertical" : "fabric-divider--horizontal",
+          vertical
+            ? "fabric-divider-label--vertical"
+            : "fabric-divider-label--horizontal",
           labelClassName,
           "rounded-full text-[0.75em]",
           vertical && "origin-center -rotate-90 z-1",

package/src/components/icon/Icon.tsx

@@ -68,6 +68,7 @@ export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
    * apply animation
    */
   animate?: "spin" | "pulse" | "bounce";
+  disabled?: boolean;
   /**
    * click handler
    */
@@ -95,6 +96,7 @@ export const Icon = ({
   rtlFlip,
   animate,
   rounded,
+  disabled,
   viewBox = "0 0 24 24",
   className,
   onClick,
@@ -162,6 +164,7 @@ export const Icon = ({
         !rounded && "rounded",
         rounded && "rounded-full",
         animate && `animate-${animate}`,
+        !!onClick && disabled && "opacity-30 pointer-events-none",
         className,
       )}
       onClick={onClick}

package/src/components/menu/Menu.tsx

@@ -69,6 +69,8 @@ const MenuComponent = ({
   menuClassName,
   onClick,
   // @ts-expect-error ignore
+  trigger = "hover",
+  // @ts-expect-error ignore
   ref,
   ...rest
 }: Partial<MenuProps>) => {
@@ -89,6 +91,8 @@ const MenuComponent = ({
     open: !isNested || isOpen,
     onOpenChange(open, event, reason) {
       isNested && setIsOpen(open);
+      if (reason === "outside-press" && trigger === "click")
+        tree?.events.emit("close");
     },
     placement: isNested ? "right-start" : "bottom-start",
     middleware: [
@@ -100,13 +104,14 @@ const MenuComponent = ({
   });
 
   const hover = useHover(context, {
+    enabled: trigger === "hover",
     delay: { open: 75 },
     handleClose: safePolygon({ blockPointerEvents: true }),
   });
   const click = useClick(context, {
     event: "mousedown",
-    toggle: !isNested,
-    ignoreMouse: isNested,
+    toggle: trigger === "click" || !isNested,
+    ignoreMouse: trigger === "hover" && !isNested,
   });
   const role = useRole(context, { role: "menu" });
   const dismiss = useDismiss(context, { bubbles: true });

package/src/components/menu/types.ts

@@ -90,6 +90,7 @@ export interface MenuRootProps extends CssProp {
 export interface MenuInnerProps extends MenuItemProps {
   label: string;
   minimal?: never;
+  trigger?: "hover" | "click";
   /**
    * floating menu className
    */

package/src/components/navigator/Navigator.tsx

@@ -34,12 +34,16 @@ import {
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { Icon } from "../icon/Icon";
+import { isEmpty } from "@react-fabric/utilities";
 
 export interface NavigatorProps
   extends CssProp,
     AriaProps,
     TestProps,
     Partial<ChildProp> {
+  length?: number;
+  current?: number;
+  disableKeyHandlers?: boolean;
   /**
    * navigator button color
    */
@@ -55,18 +59,27 @@ export const Navigator = ({
   onNavigate,
   color,
   children,
+  length,
+  current,
+  disableKeyHandlers,
   ...aria
 }: NavigatorProps) => {
-  const navPrev = useCallback(() => onNavigate(-1), [onNavigate]);
-  const navNext = useCallback(() => onNavigate(+1), [onNavigate]);
+  const navPrev = useCallback(
+    () => (isEmpty(current) || current !== 0) && onNavigate(-1),
+    [onNavigate, current],
+  );
+  const navNext = useCallback(
+    () => (isEmpty(current) || current + 1 < (length ?? 0)) && onNavigate(+1),
+    [onNavigate, current, length],
+  );
   return (
     <div
       data-ref="navigator"
       className={classNames(className, "inline-flex items-center leading-none")}
       {...aria}
     >
-      <HotKey keyCombo="left" handler={navPrev} />
-      <HotKey keyCombo="right" handler={navNext} />
+      {!disableKeyHandlers && <HotKey keyCombo="left" handler={navPrev} />}
+      {!disableKeyHandlers && <HotKey keyCombo="right" handler={navNext} />}
       <Icon
         rtlFlip
         color={color}
@@ -74,7 +87,8 @@ export const Navigator = ({
         aria-label="previous"
         data-ref="previous"
         icon={CoreIcons.chevronLeft}
-        onClick={(e) => [e.stopPropagation(), onNavigate(-1)]}
+        disabled={!isEmpty(current) && current === 0}
+        onClick={(e) => [e.stopPropagation(), navPrev()]}
       />
       {children}
       <Icon
@@ -84,7 +98,8 @@ export const Navigator = ({
         aria-label="next"
         data-ref="next"
         icon={CoreIcons.chevronRight}
-        onClick={(e) => [e.stopPropagation(), onNavigate(1)]}
+        disabled={!isEmpty(current) && current + 1 === length}
+        onClick={(e) => [e.stopPropagation(), navNext()]}
       />
     </div>
   );

package/src/core/responsive/Responsive.tsx

@@ -85,6 +85,10 @@ export interface ColProps
    * stretch inner content
    */
   stretchContent?: boolean;
+  /**
+   * truncate text
+   */
+  truncate?: boolean;
 }
 
 /**
@@ -148,6 +152,7 @@ export const Col = ({
   children,
   flex,
   align,
+  truncate,
   className,
   stretchContent,
   ...aria
@@ -164,6 +169,7 @@ export const Col = ({
         flex === "initial" && "flex-initial",
         flex === "content" && "flex-none",
         align && `self-${align}`,
+        truncate && "truncate",
       )}
       {...aria}
     >

package/src/types/icons.ts

@@ -124,11 +124,13 @@ export module CoreIcons {
     "M19.547 14.667c-0.736 2.083-2.245 3.67-4.094 4.553s-4.031 1.061-6.114 0.325-3.67-2.245-4.553-4.094-1.061-4.031-0.325-6.114 2.245-3.67 4.094-4.553 4.031-1.061 6.114-0.325c1.188 0.42 2.209 1.088 2.987 1.882l2.824 2.659h-3.48c-0.552 0-1 0.448-1 1s0.448 1 1 1h5.997c0.004 0 0.009 0 0.013 0 0.137-0.001 0.267-0.030 0.386-0.082 0.119-0.051 0.229-0.126 0.324-0.225 0.012-0.012 0.023-0.025 0.034-0.038 0.076-0.087 0.134-0.184 0.175-0.287s0.065-0.213 0.069-0.328c0.002-0.014 0.002-0.028 0.002-0.042v-5.998c0-0.552-0.448-1-1-1s-1 0.448-1 1v3.685l-2.916-2.745c-0.993-1.012-2.274-1.846-3.748-2.366-2.604-0.921-5.336-0.698-7.644 0.405s-4.197 3.088-5.117 5.692-0.696 5.335 0.406 7.643 3.088 4.197 5.692 5.117 5.335 0.697 7.643-0.406 4.197-3.088 5.117-5.692c0.184-0.521-0.089-1.092-0.61-1.276s-1.092 0.089-1.276 0.61z";
   export const search =
     "M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z";
+  export const ellipsis =
+    "M14 12c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 5c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 19c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414z";
   export const filter = "M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z";
   export const funnel =
     "M19.845 4l-6.609 7.814c-0.147 0.173-0.236 0.399-0.236 0.646v6.922l-2-1v-5.922c0.001-0.227-0.077-0.457-0.236-0.646l-6.609-7.814zM22 2h-20c-0.552 0-1 0.448-1 1 0 0.247 0.089 0.473 0.236 0.646l7.764 9.18v6.174c0 0.389 0.222 0.727 0.553 0.894l4 2c0.494 0.247 1.095 0.047 1.342-0.447 0.072-0.146 0.106-0.301 0.105-0.447v-8.174l7.764-9.18c0.357-0.422 0.304-1.053-0.118-1.409-0.189-0.16-0.419-0.238-0.646-0.237z";
-  export const ellipsis =
-    "M14 12c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 5c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 19c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414z";
+  export const funnelFull =
+    "M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z";
   export const funnelPlus =
     "M15 17H18V14H20V17H23V19H20V22H18V19H15V17M13 19.88C13.04 20.18 12.94 20.5 12.72 20.71C12.32 21.1 11.69 21.1 11.3 20.71L7.29 16.7C7.06 16.47 6.96 16.16 7 15.87V10.75L2.21 4.62C1.87 4.19 1.95 3.56 2.38 3.22C2.57 3.08 2.78 3 3 3V3H17V3C17.22 3 17.43 3.08 17.62 3.22C18.05 3.56 18.13 4.19 17.79 4.62L13 10.75V19.88M5.04 5L9 10.07V15.58L11 17.58V10.05L14.96 5H5.04Z";
   export const funnelRemove =