@react-fabric/core 1.0.0-beta.39 → 1.0.0-beta.40

package/css/components/_panel.css

@@ -24,7 +24,7 @@
 @layer components {
   .fabric-panel {
     grid-template: "head" auto "content" 1fr / 1fr;
-    background-color: var(--color-bg);
+    background-color: var(--fabric-bg);
 
     & > * {
       background-color: transparent;

package/css/core/_content.css

@@ -23,14 +23,8 @@
 
 @layer components {
   .fabric-content {
-    --fabric-content: color-mix(
-      in lab,
-      var(--fabric-bg) 97%,
-      var(--color-tint)
-    );
-
     overflow: auto;
     padding: 1rem;
-    background-color: var(--fabric-content);
+    background-color: var(--bg-color-content);
   }
 }

package/css/reset/_theme.css

@@ -340,6 +340,7 @@
 
     /* bg */
     --bg-color-base: color-mix(in oklab, var(--fabric-bg) 99%, var(--color-tint));
+    --bg-color-content: color-mix(in lab, var(--fabric-bg) 97%, var(--color-tint));
     --bg-color-dimmed: color-mix(in oklab, var(--fabric-bg) 90%, var(--color-tint));
     --bg-color-muted: color-mix(in oklab, var(--fabric-bg) 80%, var(--color-tint));
     --bg-color-gray: color-mix(in oklab, var(--fabric-bg) 50%, var(--color-tint));

package/css/theme/_colors.css

@@ -22,7 +22,7 @@
  */
 
 @theme static {
-  --color-black: #232426;
+  --color-black: #121213;
   --color-white: #fffefd;
   --color-silver: #989da5;
   --color-steel: #7c99af;
@@ -317,4 +317,4 @@
   --color-wood-800: ;
   --color-wood-900: ;
   --color-wood-950: ;
-}
+}

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 {
@@ -195,6 +195,10 @@
   background-color: var(--bg-color-base);
 }
 
+@utility bg-content {
+  background-color: var(--bg-color-content);
+}
+
 @utility bg-dimmed {
   background-color: var(--bg-color-dimmed);
 }
@@ -349,7 +353,7 @@
 
 @utility gap-* {
   &:where(.fabric-row) {
-    --gutter: calc(var(--spacing) * --value(number));
+    --gutter: calc(var(--spacing) * --value(integer));
 
     gap: 0 !important;
   }

package/dist/cjs/components/animations/Animations.js

@@ -67,7 +67,7 @@ var AnimationBars = function AnimationBars(_ref2) {
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: classNames("absolute inset-0 z-10 flex justify-center items-center cursor-wait"),
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames("outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded"),
+      className: classNames("outline outline-tint-500/20 p-4 bg-tint-50/50 backdrop-blur-sm rounded"),
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
         className: classNames("fabric-bars"),
         style: {
@@ -87,7 +87,7 @@ var AnimationSpinner = function AnimationSpinner(_ref3) {
     className: classNames("absolute inset-0 z-10 flex justify-center items-center cursor-wait"),
     "data-ref": "spinner",
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames("outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded"),
+      className: classNames("outline outline-tint-500/20 p-4 bg-tint-50/50 backdrop-blur-sm rounded"),
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
         className: classNames("fabric-spinner"),
         style: {

package/dist/cjs/components/dropdown/DropdownTool.js

@@ -20,7 +20,7 @@ var DropdownTool = function DropdownTool(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs(Dropdown.Dropdown, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
       icon: icon !== null && icon !== void 0 ? icon : icons.CoreIcons.caretDown,
-      className: classNames(className, "outline bg-base/50 flex-content pointer-events-auto cursor-pointer", groupHover && "hidden group-hover/tool:inline-block data-[dropdown-open]:inline-block")
+      className: classNames("outline bg-tint-50/50 flex-content pointer-events-auto cursor-pointer", className, groupHover && "hidden group-hover/tool:inline-block data-[dropdown-open]:inline-block")
     }), children]
   }));
 };

package/dist/cjs/components/media/Media.js

@@ -8,6 +8,7 @@ var classNames = require('classnames');
 var react = require('react');
 var icons = require('../../types/icons.js');
 var Button = require('../button/Button.js');
+var Icon = require('../icon/Icon.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["src", "alt", "reel", "fit", "className"],
@@ -19,6 +20,10 @@ var cover = {
   cover: "object-cover",
   contain: "object-contain"
 };
+var loadIndicator = /*#__PURE__*/jsxRuntime.jsx("div", {
+  className: classNames("fabric-mediaPlaceholder", "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-gray animate-pulse"),
+  children: "\u25CF\u25CF\u25CF"
+});
 var Image = function Image(_ref) {
   var src = _ref.src,
     alt = _ref.alt,
@@ -31,28 +36,40 @@ var Image = function Image(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     colorSet = _useState2[0],
     setColorSet = _useState2[1];
-  var loadIndicator = react.useMemo(function () {
-    return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames("fabric-mediaPlaceholder", "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-gray animate-pulse"),
-      children: "\u25CF\u25CF\u25CF"
-    });
+  var _useState3 = react.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loaded = _useState4[0],
+    setLoaded = _useState4[1];
+  var _useState5 = react.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    errored = _useState6[0],
+    setErrored = _useState6[1];
+  react.useEffect(function () {
+    setLoaded(false);
+    setErrored(false);
   }, [src]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
     "data-ref": "image",
     className: classNames("fabric-mediaContainer", "relative overflow-hidden inline-block", reel && "fabric-mediaReel", className),
     "data-colorset": colorSet
   }, aria), {}, {
-    children: [loadIndicator, /*#__PURE__*/jsxRuntime.jsx("img", {
+    children: [!loaded && !errored && loadIndicator, !errored && /*#__PURE__*/jsxRuntime.jsx("img", {
       alt: alt !== null && alt !== void 0 ? alt : src,
       src: src,
       loading: "lazy",
       crossOrigin: "anonymous",
       className: classNames("fabric-media", "pointer-events-none w-full h-full", cover[fit]),
       onLoad: function onLoad(e) {
-        var _e$currentTarget$prev;
-        (_e$currentTarget$prev = e.currentTarget.previousElementSibling) === null || _e$currentTarget$prev === void 0 || _e$currentTarget$prev.remove();
+        setLoaded(true);
         setColorSet(utilities.getImageColorset(e.currentTarget));
+      },
+      onError: function onError() {
+        return setErrored(true);
       }
+    }), errored && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+      size: "2rem",
+      className: "absolute text-tint-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+      icon: icons.CoreIcons.mediaImageBroken
     })]
   }));
 };
@@ -67,14 +84,29 @@ var Video = function Video(_ref2) {
     className = _ref2.className,
     aria = _objectWithoutProperties(_ref2, _excluded2);
   var videoRef = react.useRef(null);
-  var _useState3 = react.useState(true),
-    _useState4 = _slicedToArray(_useState3, 2),
-    state = _useState4[0],
-    setState = _useState4[1];
-  var _useState5 = react.useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    volume = _useState6[0],
-    setVolume = _useState6[1];
+  var _useState7 = react.useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    loaded = _useState8[0],
+    setLoaded = _useState8[1];
+  var _useState9 = react.useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    errored = _useState10[0],
+    setErrored = _useState10[1];
+  react.useEffect(function () {
+    setLoaded(false);
+    setErrored(false);
+  }, [src]);
+  var _useState11 = react.useState(true),
+    _useState12 = _slicedToArray(_useState11, 2),
+    state = _useState12[0],
+    setState = _useState12[1];
+  var _useState13 = react.useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    volume = _useState14[0],
+    setVolume = _useState14[1];
+  react.useEffect(function () {
+    setErrored(false);
+  }, [src]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
     "data-ref": "video",
     className: classNames("fabric-mediaContainer", "relative overflow-hidden inline-block", reel && "fabric-mediaReel", className),
@@ -87,64 +119,69 @@ var Video = function Video(_ref2) {
       playOnHover && ((_videoRef$current2 = videoRef.current) === null || _videoRef$current2 === void 0 ? void 0 : _videoRef$current2.pause());
     }
   }, aria), {}, {
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames("fabric-mediaPlaceholder", "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-5xl animate-pulse"),
-      children: "\u25CF\u25CF\u25CF"
-    }), /*#__PURE__*/jsxRuntime.jsxs("video", {
-      loop: true,
-      ref: videoRef,
-      controls: false,
-      poster: poster,
-      autoPlay: autoPlay,
-      className: classNames("fabric-media", "pointer-events-none w-full h-full", fit && "object-".concat(fit)),
-      onPlay: function onPlay() {
-        return setState(true);
-      },
-      onPause: function onPause() {
-        return setState(false);
-      },
-      onVolumeChange: function onVolumeChange(e) {
-        return setVolume(!!e.currentTarget.volume);
-      },
-      onLoadedData: function onLoadedData(e) {
-        var _e$currentTarget$prev2;
-        e.currentTarget.volume = 0;
-        (_e$currentTarget$prev2 = e.currentTarget.previousElementSibling) === null || _e$currentTarget$prev2 === void 0 || _e$currentTarget$prev2.remove();
-      },
-      children: [/*#__PURE__*/jsxRuntime.jsx("source", {
-        src: src
-      }), /*#__PURE__*/jsxRuntime.jsx("track", {
-        kind: "captions"
-      })]
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      "data-inner-clickable": true,
-      className: classNames("fabric-mediaControls", "absolute bottom-6 end-6 rounded-full flex flex-col"),
-      children: [/*#__PURE__*/jsxRuntime.jsx(Button.Button, {
-        rounded: true,
-        variant: "link",
-        className: "fabric-mediaControlPlaceholder",
-        icon: icons.CoreIcons.ellipsis,
-        "aria-label": "controls"
-      }), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
-        rounded: true,
-        variant: "link",
-        "aria-label": "controls",
-        className: "fabric-mediaControlAction",
-        onClick: function onClick() {
-          videoRef.current && (videoRef.current.volume = videoRef.current.volume ? 0 : 1);
+    children: [!loaded && !errored && loadIndicator, !errored && /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsxs("video", {
+        loop: true,
+        ref: videoRef,
+        controls: false,
+        poster: poster,
+        autoPlay: autoPlay,
+        className: classNames("fabric-media", "pointer-events-none w-full h-full", fit && "object-".concat(fit)),
+        onPlay: function onPlay() {
+          return setState(true);
+        },
+        onPause: function onPause() {
+          return setState(false);
+        },
+        onVolumeChange: function onVolumeChange(e) {
+          return setVolume(!!e.currentTarget.volume);
+        },
+        onLoadedData: function onLoadedData(e) {
+          e.currentTarget.volume = 0;
+          setLoaded(true);
         },
-        icon: volume ? icons.CoreIcons.volumeOn : icons.CoreIcons.volumeOff
-      }), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
-        rounded: true,
-        variant: "link",
-        "aria-label": "controls",
-        className: "fabric-mediaControlAction",
-        onClick: function onClick() {
-          var _videoRef$current3, _videoRef$current4, _videoRef$current5;
-          (_videoRef$current3 = videoRef.current) !== null && _videoRef$current3 !== void 0 && _videoRef$current3.paused ? (_videoRef$current4 = videoRef.current) === null || _videoRef$current4 === void 0 ? void 0 : _videoRef$current4.play() : (_videoRef$current5 = videoRef.current) === null || _videoRef$current5 === void 0 ? void 0 : _videoRef$current5.pause();
+        onError: function onError() {
+          return setErrored(true);
         },
-        icon: state ? icons.CoreIcons.pause : icons.CoreIcons.play
+        children: [/*#__PURE__*/jsxRuntime.jsx("source", {
+          src: src
+        }), /*#__PURE__*/jsxRuntime.jsx("track", {
+          kind: "captions"
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        "data-inner-clickable": true,
+        className: classNames("fabric-mediaControls", "absolute bottom-6 end-6 rounded-full flex flex-col"),
+        children: [/*#__PURE__*/jsxRuntime.jsx(Button.Button, {
+          rounded: true,
+          variant: "link",
+          className: "fabric-mediaControlPlaceholder",
+          icon: icons.CoreIcons.ellipsis,
+          "aria-label": "controls"
+        }), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
+          rounded: true,
+          variant: "link",
+          "aria-label": "controls",
+          className: "fabric-mediaControlAction",
+          onClick: function onClick() {
+            videoRef.current && (videoRef.current.volume = videoRef.current.volume ? 0 : 1);
+          },
+          icon: volume ? icons.CoreIcons.volumeOn : icons.CoreIcons.volumeOff
+        }), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
+          rounded: true,
+          variant: "link",
+          "aria-label": "controls",
+          className: "fabric-mediaControlAction",
+          onClick: function onClick() {
+            var _videoRef$current3, _videoRef$current4, _videoRef$current5;
+            (_videoRef$current3 = videoRef.current) !== null && _videoRef$current3 !== void 0 && _videoRef$current3.paused ? (_videoRef$current4 = videoRef.current) === null || _videoRef$current4 === void 0 ? void 0 : _videoRef$current4.play() : (_videoRef$current5 = videoRef.current) === null || _videoRef$current5 === void 0 ? void 0 : _videoRef$current5.pause();
+          },
+          icon: state ? icons.CoreIcons.pause : icons.CoreIcons.play
+        })]
       })]
+    }), errored && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+      size: "2rem",
+      className: "absolute text-tint-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+      icon: icons.CoreIcons.mediaVideoBroken
     })]
   }));
 };

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

@@ -205,6 +205,11 @@ var MenuComponent = function MenuComponent(_ref) {
 var Menu = function Menu(props) {
   var parentId = react.useFloatingParentNodeId();
   var tree = react.useFloatingTree();
+  if (tree) {
+    return /*#__PURE__*/jsxRuntime.jsx(MenuComponent, _objectSpread(_objectSpread({}, props), {}, {
+      menuClassName: props.className
+    }));
+  }
   if (parentId === null) {
     return /*#__PURE__*/jsxRuntime.jsx(react.FloatingTree, {
       children: /*#__PURE__*/jsxRuntime.jsx(MenuComponent, _objectSpread(_objectSpread({}, props), {}, {
@@ -212,11 +217,6 @@ var Menu = function Menu(props) {
       }))
     });
   }
-  if (tree) {
-    return /*#__PURE__*/jsxRuntime.jsx(MenuComponent, _objectSpread(_objectSpread({}, props), {}, {
-      menuClassName: props.className
-    }));
-  }
   return /*#__PURE__*/jsxRuntime.jsx(MenuComponent, _objectSpread({}, props));
 };
 

package/dist/cjs/components/tabpanel/Tab.js

@@ -80,7 +80,7 @@ var Tab = function Tab(_ref) {
         placement: minimal ? "end" : "",
         className: classNames("me-1", badgeProps.className)
       })), actions && active && /*#__PURE__*/jsxRuntime.jsx(DropdownTool.DropdownTool, {
-        className: "bg-base/20 me-1 z-5",
+        className: "bg-tint-50/20 me-1 z-5",
         children: actions
       }), onClose && /*#__PURE__*/jsxRuntime.jsx("span", {
         role: "none",

package/dist/cjs/hotkeys/HotKeyLabel.js

@@ -44,7 +44,7 @@ var HotKeyLabel = function HotKeyLabel(_ref) {
     }, "label")];
   }, [keyCombo], "HotKey label");
   return /*#__PURE__*/jsxRuntime.jsx("kbd", {
-    className: "hotkey-label inline-flex gap-1 select-none self-center font-mono items-center text-[0.625rem] leading-4 bg-tint-500/10 text-base/50 whitespace-nowrap rounded px-2 mx-1",
+    className: "hotkey-label inline-flex gap-1 select-none self-center font-mono items-center text-[0.625rem] leading-4 bg-tint-500/20 text-tint-900/65 whitespace-nowrap rounded px-2 mx-1",
     children: label
   });
 };

package/dist/cjs/hotkeys/HotKeyWrapper.js

@@ -46,7 +46,9 @@ var HotKeyWrapper = /*#__PURE__*/react.memo(function (_ref) {
         ctrl = _ref4.ctrl,
         meta = _ref4.meta,
         shift = _ref4.shift;
-      return (key.toLowerCase() === keyCode.toLowerCase() || key.toLowerCase() === code.toLowerCase()) && alt === altKey && ctrl === ctrlKey && meta === metaKey && shift === shiftKey;
+      return (key.toLowerCase() === keyCode.toLowerCase() || key.toLowerCase() === code.toLowerCase() ||
+      // work around for macos alt+key issue
+      "key".concat(key.toLowerCase()) === code.toLowerCase()) && alt === altKey && ctrl === ctrlKey && meta === metaKey && shift === shiftKey;
     });
     if (find !== null && find !== void 0 && find.handler) {
       find.handler();

package/dist/cjs/overlays/alert/Alert.js

@@ -101,7 +101,7 @@ var Alert = function Alert(_ref) {
       style: {
         zIndex: "var(--z-overlay-mask)"
       },
-      className: "bg-base/50 backdrop-blur-sm grid place-items-center",
+      className: "bg-tint-100/50 backdrop-blur-sm grid place-items-center",
       children: /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
         context: context,
         children: /*#__PURE__*/jsxRuntime.jsxs("dialog", _objectSpread(_objectSpread({

package/dist/cjs/overlays/flyout/Flyout.js

@@ -94,7 +94,7 @@ var Flyout = function Flyout(_ref) {
       style: {
         zIndex: "var(--z-overlay-mask)"
       },
-      className: "bg-base/10 backdrop-blur-sm transition-all",
+      className: "bg-tint-100/10 backdrop-blur-sm transition-all",
       children: children
     });
   }, [hideMask, handleClose]);
@@ -115,6 +115,7 @@ var Flyout = function Flyout(_ref) {
           children: /*#__PURE__*/jsxRuntime.jsxs(HotKeyWrapper.HotKeyWrapper, {
             children: [/*#__PURE__*/jsxRuntime.jsxs(HeadFoot.Header, {
               flex: true,
+              align: "center",
               className: classNames("fabric-flyoutHeader", headerClassName),
               children: [utilities.isString(icon) && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
                 icon: icon,

package/dist/cjs/overlays/modal/Modal.js

@@ -80,7 +80,7 @@ var Modal = function Modal(_ref) {
       style: {
         zIndex: "var(--z-overlay-mask)"
       },
-      className: "bg-base/20 backdrop-blur-sm grid place-items-center",
+      className: "bg-tint-100/20 backdrop-blur-sm grid place-items-center",
       children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
         context: context,
         children: /*#__PURE__*/jsxRuntime.jsx("dialog", _objectSpread(_objectSpread(_objectSpread({
@@ -96,6 +96,7 @@ var Modal = function Modal(_ref) {
           children: /*#__PURE__*/jsxRuntime.jsxs(HotKeyWrapper.HotKeyWrapper, {
             children: [/*#__PURE__*/jsxRuntime.jsxs(HeadFoot.Header, {
               flex: true,
+              align: "center",
               className: classNames("fabric-modalHeader", headerClassName),
               children: [utilities.isString(icon) && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
                 icon: icon,

package/dist/esm/components/animations/Animations.js

@@ -67,7 +67,7 @@ var AnimationBars = function AnimationBars(_ref2) {
   return /*#__PURE__*/jsx("div", {
     className: classNames("absolute inset-0 z-10 flex justify-center items-center cursor-wait"),
     children: /*#__PURE__*/jsx("div", {
-      className: classNames("outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded"),
+      className: classNames("outline outline-tint-500/20 p-4 bg-tint-50/50 backdrop-blur-sm rounded"),
       children: /*#__PURE__*/jsx("div", {
         className: classNames("fabric-bars"),
         style: {
@@ -87,7 +87,7 @@ var AnimationSpinner = function AnimationSpinner(_ref3) {
     className: classNames("absolute inset-0 z-10 flex justify-center items-center cursor-wait"),
     "data-ref": "spinner",
     children: /*#__PURE__*/jsx("div", {
-      className: classNames("outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded"),
+      className: classNames("outline outline-tint-500/20 p-4 bg-tint-50/50 backdrop-blur-sm rounded"),
       children: /*#__PURE__*/jsx("div", {
         className: classNames("fabric-spinner"),
         style: {

package/dist/esm/components/dropdown/DropdownTool.js

@@ -20,7 +20,7 @@ var DropdownTool = function DropdownTool(_ref) {
   return /*#__PURE__*/jsxs(Dropdown, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsx(Icon, {
       icon: icon !== null && icon !== void 0 ? icon : CoreIcons.caretDown,
-      className: classNames(className, "outline bg-base/50 flex-content pointer-events-auto cursor-pointer", groupHover && "hidden group-hover/tool:inline-block data-[dropdown-open]:inline-block")
+      className: classNames("outline bg-tint-50/50 flex-content pointer-events-auto cursor-pointer", className, groupHover && "hidden group-hover/tool:inline-block data-[dropdown-open]:inline-block")
     }), children]
   }));
 };

package/dist/esm/components/media/Media.js

@@ -5,9 +5,10 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { getImageColorset } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useState, useMemo, useRef } from 'react';
+import { useState, useEffect, useRef, Fragment } from 'react';
 import { CoreIcons } from '../../types/icons.js';
 import { Button } from '../button/Button.js';
+import { Icon } from '../icon/Icon.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var _excluded = ["src", "alt", "reel", "fit", "className"],
@@ -19,6 +20,10 @@ var cover = {
   cover: "object-cover",
   contain: "object-contain"
 };
+var loadIndicator = /*#__PURE__*/jsx("div", {
+  className: classNames("fabric-mediaPlaceholder", "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-gray animate-pulse"),
+  children: "\u25CF\u25CF\u25CF"
+});
 var Image = function Image(_ref) {
   var src = _ref.src,
     alt = _ref.alt,
@@ -31,28 +36,40 @@ var Image = function Image(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     colorSet = _useState2[0],
     setColorSet = _useState2[1];
-  var loadIndicator = useMemo(function () {
-    return /*#__PURE__*/jsx("div", {
-      className: classNames("fabric-mediaPlaceholder", "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-gray animate-pulse"),
-      children: "\u25CF\u25CF\u25CF"
-    });
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loaded = _useState4[0],
+    setLoaded = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    errored = _useState6[0],
+    setErrored = _useState6[1];
+  useEffect(function () {
+    setLoaded(false);
+    setErrored(false);
   }, [src]);
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
     "data-ref": "image",
     className: classNames("fabric-mediaContainer", "relative overflow-hidden inline-block", reel && "fabric-mediaReel", className),
     "data-colorset": colorSet
   }, aria), {}, {
-    children: [loadIndicator, /*#__PURE__*/jsx("img", {
+    children: [!loaded && !errored && loadIndicator, !errored && /*#__PURE__*/jsx("img", {
       alt: alt !== null && alt !== void 0 ? alt : src,
       src: src,
       loading: "lazy",
       crossOrigin: "anonymous",
       className: classNames("fabric-media", "pointer-events-none w-full h-full", cover[fit]),
       onLoad: function onLoad(e) {
-        var _e$currentTarget$prev;
-        (_e$currentTarget$prev = e.currentTarget.previousElementSibling) === null || _e$currentTarget$prev === void 0 || _e$currentTarget$prev.remove();
+        setLoaded(true);
         setColorSet(getImageColorset(e.currentTarget));
+      },
+      onError: function onError() {
+        return setErrored(true);
       }
+    }), errored && /*#__PURE__*/jsx(Icon, {
+      size: "2rem",
+      className: "absolute text-tint-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+      icon: CoreIcons.mediaImageBroken
     })]
   }));
 };
@@ -67,14 +84,29 @@ var Video = function Video(_ref2) {
     className = _ref2.className,
     aria = _objectWithoutProperties(_ref2, _excluded2);
   var videoRef = useRef(null);
-  var _useState3 = useState(true),
-    _useState4 = _slicedToArray(_useState3, 2),
-    state = _useState4[0],
-    setState = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    volume = _useState6[0],
-    setVolume = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    loaded = _useState8[0],
+    setLoaded = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    errored = _useState10[0],
+    setErrored = _useState10[1];
+  useEffect(function () {
+    setLoaded(false);
+    setErrored(false);
+  }, [src]);
+  var _useState11 = useState(true),
+    _useState12 = _slicedToArray(_useState11, 2),
+    state = _useState12[0],
+    setState = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    volume = _useState14[0],
+    setVolume = _useState14[1];
+  useEffect(function () {
+    setErrored(false);
+  }, [src]);
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
     "data-ref": "video",
     className: classNames("fabric-mediaContainer", "relative overflow-hidden inline-block", reel && "fabric-mediaReel", className),
@@ -87,64 +119,69 @@ var Video = function Video(_ref2) {
       playOnHover && ((_videoRef$current2 = videoRef.current) === null || _videoRef$current2 === void 0 ? void 0 : _videoRef$current2.pause());
     }
   }, aria), {}, {
-    children: [/*#__PURE__*/jsx("div", {
-      className: classNames("fabric-mediaPlaceholder", "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-5xl animate-pulse"),
-      children: "\u25CF\u25CF\u25CF"
-    }), /*#__PURE__*/jsxs("video", {
-      loop: true,
-      ref: videoRef,
-      controls: false,
-      poster: poster,
-      autoPlay: autoPlay,
-      className: classNames("fabric-media", "pointer-events-none w-full h-full", fit && "object-".concat(fit)),
-      onPlay: function onPlay() {
-        return setState(true);
-      },
-      onPause: function onPause() {
-        return setState(false);
-      },
-      onVolumeChange: function onVolumeChange(e) {
-        return setVolume(!!e.currentTarget.volume);
-      },
-      onLoadedData: function onLoadedData(e) {
-        var _e$currentTarget$prev2;
-        e.currentTarget.volume = 0;
-        (_e$currentTarget$prev2 = e.currentTarget.previousElementSibling) === null || _e$currentTarget$prev2 === void 0 || _e$currentTarget$prev2.remove();
-      },
-      children: [/*#__PURE__*/jsx("source", {
-        src: src
-      }), /*#__PURE__*/jsx("track", {
-        kind: "captions"
-      })]
-    }), /*#__PURE__*/jsxs("div", {
-      "data-inner-clickable": true,
-      className: classNames("fabric-mediaControls", "absolute bottom-6 end-6 rounded-full flex flex-col"),
-      children: [/*#__PURE__*/jsx(Button, {
-        rounded: true,
-        variant: "link",
-        className: "fabric-mediaControlPlaceholder",
-        icon: CoreIcons.ellipsis,
-        "aria-label": "controls"
-      }), /*#__PURE__*/jsx(Button, {
-        rounded: true,
-        variant: "link",
-        "aria-label": "controls",
-        className: "fabric-mediaControlAction",
-        onClick: function onClick() {
-          videoRef.current && (videoRef.current.volume = videoRef.current.volume ? 0 : 1);
+    children: [!loaded && !errored && loadIndicator, !errored && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsxs("video", {
+        loop: true,
+        ref: videoRef,
+        controls: false,
+        poster: poster,
+        autoPlay: autoPlay,
+        className: classNames("fabric-media", "pointer-events-none w-full h-full", fit && "object-".concat(fit)),
+        onPlay: function onPlay() {
+          return setState(true);
+        },
+        onPause: function onPause() {
+          return setState(false);
+        },
+        onVolumeChange: function onVolumeChange(e) {
+          return setVolume(!!e.currentTarget.volume);
+        },
+        onLoadedData: function onLoadedData(e) {
+          e.currentTarget.volume = 0;
+          setLoaded(true);
         },
-        icon: volume ? CoreIcons.volumeOn : CoreIcons.volumeOff
-      }), /*#__PURE__*/jsx(Button, {
-        rounded: true,
-        variant: "link",
-        "aria-label": "controls",
-        className: "fabric-mediaControlAction",
-        onClick: function onClick() {
-          var _videoRef$current3, _videoRef$current4, _videoRef$current5;
-          (_videoRef$current3 = videoRef.current) !== null && _videoRef$current3 !== void 0 && _videoRef$current3.paused ? (_videoRef$current4 = videoRef.current) === null || _videoRef$current4 === void 0 ? void 0 : _videoRef$current4.play() : (_videoRef$current5 = videoRef.current) === null || _videoRef$current5 === void 0 ? void 0 : _videoRef$current5.pause();
+        onError: function onError() {
+          return setErrored(true);
         },
-        icon: state ? CoreIcons.pause : CoreIcons.play
+        children: [/*#__PURE__*/jsx("source", {
+          src: src
+        }), /*#__PURE__*/jsx("track", {
+          kind: "captions"
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        "data-inner-clickable": true,
+        className: classNames("fabric-mediaControls", "absolute bottom-6 end-6 rounded-full flex flex-col"),
+        children: [/*#__PURE__*/jsx(Button, {
+          rounded: true,
+          variant: "link",
+          className: "fabric-mediaControlPlaceholder",
+          icon: CoreIcons.ellipsis,
+          "aria-label": "controls"
+        }), /*#__PURE__*/jsx(Button, {
+          rounded: true,
+          variant: "link",
+          "aria-label": "controls",
+          className: "fabric-mediaControlAction",
+          onClick: function onClick() {
+            videoRef.current && (videoRef.current.volume = videoRef.current.volume ? 0 : 1);
+          },
+          icon: volume ? CoreIcons.volumeOn : CoreIcons.volumeOff
+        }), /*#__PURE__*/jsx(Button, {
+          rounded: true,
+          variant: "link",
+          "aria-label": "controls",
+          className: "fabric-mediaControlAction",
+          onClick: function onClick() {
+            var _videoRef$current3, _videoRef$current4, _videoRef$current5;
+            (_videoRef$current3 = videoRef.current) !== null && _videoRef$current3 !== void 0 && _videoRef$current3.paused ? (_videoRef$current4 = videoRef.current) === null || _videoRef$current4 === void 0 ? void 0 : _videoRef$current4.play() : (_videoRef$current5 = videoRef.current) === null || _videoRef$current5 === void 0 ? void 0 : _videoRef$current5.pause();
+          },
+          icon: state ? CoreIcons.pause : CoreIcons.play
+        })]
       })]
+    }), errored && /*#__PURE__*/jsx(Icon, {
+      size: "2rem",
+      className: "absolute text-tint-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+      icon: CoreIcons.mediaVideoBroken
     })]
   }));
 };

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

@@ -205,6 +205,11 @@ var MenuComponent = function MenuComponent(_ref) {
 var Menu = function Menu(props) {
   var parentId = useFloatingParentNodeId();
   var tree = useFloatingTree();
+  if (tree) {
+    return /*#__PURE__*/jsx(MenuComponent, _objectSpread(_objectSpread({}, props), {}, {
+      menuClassName: props.className
+    }));
+  }
   if (parentId === null) {
     return /*#__PURE__*/jsx(FloatingTree, {
       children: /*#__PURE__*/jsx(MenuComponent, _objectSpread(_objectSpread({}, props), {}, {
@@ -212,11 +217,6 @@ var Menu = function Menu(props) {
       }))
     });
   }
-  if (tree) {
-    return /*#__PURE__*/jsx(MenuComponent, _objectSpread(_objectSpread({}, props), {}, {
-      menuClassName: props.className
-    }));
-  }
   return /*#__PURE__*/jsx(MenuComponent, _objectSpread({}, props));
 };
 

package/dist/esm/components/tabpanel/Tab.js

@@ -80,7 +80,7 @@ var Tab = function Tab(_ref) {
         placement: minimal ? "end" : "",
         className: classNames("me-1", badgeProps.className)
       })), actions && active && /*#__PURE__*/jsx(DropdownTool, {
-        className: "bg-base/20 me-1 z-5",
+        className: "bg-tint-50/20 me-1 z-5",
         children: actions
       }), onClose && /*#__PURE__*/jsx("span", {
         role: "none",

package/dist/esm/hotkeys/HotKeyLabel.js

@@ -44,7 +44,7 @@ var HotKeyLabel = function HotKeyLabel(_ref) {
     }, "label")];
   }, [keyCombo], "HotKey label");
   return /*#__PURE__*/jsx("kbd", {
-    className: "hotkey-label inline-flex gap-1 select-none self-center font-mono items-center text-[0.625rem] leading-4 bg-tint-500/10 text-base/50 whitespace-nowrap rounded px-2 mx-1",
+    className: "hotkey-label inline-flex gap-1 select-none self-center font-mono items-center text-[0.625rem] leading-4 bg-tint-500/20 text-tint-900/65 whitespace-nowrap rounded px-2 mx-1",
     children: label
   });
 };

package/dist/esm/hotkeys/HotKeyWrapper.js

@@ -46,7 +46,9 @@ var HotKeyWrapper = /*#__PURE__*/memo(function (_ref) {
         ctrl = _ref4.ctrl,
         meta = _ref4.meta,
         shift = _ref4.shift;
-      return (key.toLowerCase() === keyCode.toLowerCase() || key.toLowerCase() === code.toLowerCase()) && alt === altKey && ctrl === ctrlKey && meta === metaKey && shift === shiftKey;
+      return (key.toLowerCase() === keyCode.toLowerCase() || key.toLowerCase() === code.toLowerCase() ||
+      // work around for macos alt+key issue
+      "key".concat(key.toLowerCase()) === code.toLowerCase()) && alt === altKey && ctrl === ctrlKey && meta === metaKey && shift === shiftKey;
     });
     if (find !== null && find !== void 0 && find.handler) {
       find.handler();

package/dist/esm/overlays/alert/Alert.js

@@ -101,7 +101,7 @@ var Alert = function Alert(_ref) {
       style: {
         zIndex: "var(--z-overlay-mask)"
       },
-      className: "bg-base/50 backdrop-blur-sm grid place-items-center",
+      className: "bg-tint-100/50 backdrop-blur-sm grid place-items-center",
       children: /*#__PURE__*/jsx(FloatingFocusManager, {
         context: context,
         children: /*#__PURE__*/jsxs("dialog", _objectSpread(_objectSpread({

package/dist/esm/overlays/flyout/Flyout.js

@@ -94,7 +94,7 @@ var Flyout = function Flyout(_ref) {
       style: {
         zIndex: "var(--z-overlay-mask)"
       },
-      className: "bg-base/10 backdrop-blur-sm transition-all",
+      className: "bg-tint-100/10 backdrop-blur-sm transition-all",
       children: children
     });
   }, [hideMask, handleClose]);
@@ -115,6 +115,7 @@ var Flyout = function Flyout(_ref) {
           children: /*#__PURE__*/jsxs(HotKeyWrapper, {
             children: [/*#__PURE__*/jsxs(Header, {
               flex: true,
+              align: "center",
               className: classNames("fabric-flyoutHeader", headerClassName),
               children: [isString(icon) && /*#__PURE__*/jsx(Icon, {
                 icon: icon,

package/dist/esm/overlays/modal/Modal.js

@@ -80,7 +80,7 @@ var Modal = function Modal(_ref) {
       style: {
         zIndex: "var(--z-overlay-mask)"
       },
-      className: "bg-base/20 backdrop-blur-sm grid place-items-center",
+      className: "bg-tint-100/20 backdrop-blur-sm grid place-items-center",
       children: /*#__PURE__*/jsx(FloatingFocusManager, {
         context: context,
         children: /*#__PURE__*/jsx("dialog", _objectSpread(_objectSpread(_objectSpread({
@@ -96,6 +96,7 @@ var Modal = function Modal(_ref) {
           children: /*#__PURE__*/jsxs(HotKeyWrapper, {
             children: [/*#__PURE__*/jsxs(Header, {
               flex: true,
+              align: "center",
               className: classNames("fabric-modalHeader", headerClassName),
               children: [isString(icon) && /*#__PURE__*/jsx(Icon, {
                 icon: icon,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.39",
+  "version": "1.0.0-beta.40",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
-    "@react-fabric/utilities": "^1.0.0-beta.39",
+    "@react-fabric/utilities": "^1.0.0-beta.40",
     "@tailwindcss/postcss": "~4.0.14",
     "boring-avatars": "^1.10.2",
     "classnames": "^2.5.1",
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "e528b7401ec10034422e0b0c3c6c118f3b24452c"
+  "gitHead": "ede05c84683697d85e28a0ae380cb9b74d693f51"
 }

package/src/components/animations/Animations.tsx

@@ -118,7 +118,7 @@ export const AnimationBars = ({
     >
       <div
         className={classNames(
-          "outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded",
+          "outline outline-tint-500/20 p-4 bg-tint-50/50 backdrop-blur-sm rounded",
         )}
       >
         <div
@@ -146,7 +146,7 @@ export const AnimationSpinner = ({
     >
       <div
         className={classNames(
-          "outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded",
+          "outline outline-tint-500/20 p-4 bg-tint-50/50 backdrop-blur-sm rounded",
         )}
       >
         <div

package/src/components/dropdown/DropdownTool.tsx

@@ -47,8 +47,8 @@ export const DropdownTool = ({
       <Icon
         icon={icon ?? CoreIcons.caretDown}
         className={classNames(
+          "outline bg-tint-50/50 flex-content pointer-events-auto cursor-pointer",
           className,
-          "outline bg-base/50 flex-content pointer-events-auto cursor-pointer",
           groupHover &&
             "hidden group-hover/tool:inline-block data-[dropdown-open]:inline-block",
         )}

package/src/components/media/Media.tsx

@@ -23,10 +23,11 @@
 
 import { getImageColorset } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { useMemo, useRef, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { type AriaProps, type CssProp, type TestProps } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { Button } from "../button/Button";
+import { Icon } from "../icon/Icon";
 
 export interface BaseProps extends CssProp, TestProps, AriaProps {
   /**
@@ -70,6 +71,17 @@ export interface VideoProps extends BaseProps {
   playOnHover?: boolean;
 }
 
+const loadIndicator = (
+  <div
+    className={classNames(
+      "fabric-mediaPlaceholder",
+      "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-gray animate-pulse",
+    )}
+  >
+    ●●●
+  </div>
+);
+
 export const Image = ({
   src,
   alt,
@@ -79,19 +91,12 @@ export const Image = ({
   ...aria
 }: ImageProps) => {
   const [colorSet, setColorSet] = useState("light");
-  const loadIndicator = useMemo(
-    () => (
-      <div
-        className={classNames(
-          "fabric-mediaPlaceholder",
-          "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-gray animate-pulse",
-        )}
-      >
-        ●●●
-      </div>
-    ),
-    [src],
-  );
+  const [loaded, setLoaded] = useState(false);
+  const [errored, setErrored] = useState(false);
+  useEffect(() => {
+    setLoaded(false);
+    setErrored(false);
+  }, [src]);
   return (
     <div
       data-ref="image"
@@ -104,22 +109,32 @@ export const Image = ({
       data-colorset={colorSet}
       {...aria}
     >
-      {loadIndicator}
-      <img
-        alt={alt ?? src}
-        src={src}
-        loading="lazy"
-        crossOrigin="anonymous"
-        className={classNames(
-          "fabric-media",
-          "pointer-events-none w-full h-full",
-          cover[fit],
-        )}
-        onLoad={(e) => {
-          e.currentTarget.previousElementSibling?.remove();
-          setColorSet(getImageColorset(e.currentTarget));
-        }}
-      />
+      {!loaded && !errored && loadIndicator}
+      {!errored && (
+        <img
+          alt={alt ?? src}
+          src={src}
+          loading="lazy"
+          crossOrigin="anonymous"
+          className={classNames(
+            "fabric-media",
+            "pointer-events-none w-full h-full",
+            cover[fit],
+          )}
+          onLoad={(e) => {
+            setLoaded(true);
+            setColorSet(getImageColorset(e.currentTarget));
+          }}
+          onError={() => setErrored(true)}
+        />
+      )}
+      {errored && (
+        <Icon
+          size="2rem"
+          className="absolute text-tint-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+          icon={CoreIcons.mediaImageBroken}
+        />
+      )}
     </div>
   );
 };
@@ -135,10 +150,20 @@ export const Video = ({
   ...aria
 }: VideoProps) => {
   const videoRef = useRef<HTMLVideoElement>(null);
+  const [loaded, setLoaded] = useState(false);
+  const [errored, setErrored] = useState(false);
+  useEffect(() => {
+    setLoaded(false);
+    setErrored(false);
+  }, [src]);
 
   const [state, setState] = useState(true);
   const [volume, setVolume] = useState(false);
 
+  useEffect(() => {
+    setErrored(false);
+  }, [src]);
+
   return (
     <div
       data-ref="video"
@@ -156,74 +181,79 @@ export const Video = ({
       }}
       {...aria}
     >
-      <div
-        className={classNames(
-          "fabric-mediaPlaceholder",
-          "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-5xl animate-pulse",
-        )}
-      >
-        ●●●
-      </div>
-      <video
-        loop
-        ref={videoRef}
-        controls={false}
-        poster={poster}
-        autoPlay={autoPlay}
-        className={classNames(
-          "fabric-media",
-          "pointer-events-none w-full h-full",
-          fit && `object-${fit}`,
-        )}
-        onPlay={() => setState(true)}
-        onPause={() => setState(false)}
-        onVolumeChange={(e) => setVolume(!!e.currentTarget.volume)}
-        onLoadedData={(e) => {
-          e.currentTarget.volume = 0;
-          e.currentTarget.previousElementSibling?.remove();
-        }}
-      >
-        <source src={src} />
-        <track kind="captions" />
-      </video>
-      <div
-        data-inner-clickable
-        className={classNames(
-          "fabric-mediaControls",
-          "absolute bottom-6 end-6 rounded-full flex flex-col",
-        )}
-      >
-        <Button
-          rounded
-          variant="link"
-          className={"fabric-mediaControlPlaceholder"}
-          icon={CoreIcons.ellipsis}
-          aria-label="controls"
-        />
-        <Button
-          rounded
-          variant="link"
-          aria-label="controls"
-          className={"fabric-mediaControlAction"}
-          onClick={() => {
-            videoRef.current &&
-              (videoRef.current.volume = videoRef.current.volume ? 0 : 1);
-          }}
-          icon={volume ? CoreIcons.volumeOn : CoreIcons.volumeOff}
-        />
-        <Button
-          rounded
-          variant="link"
-          aria-label="controls"
-          className={"fabric-mediaControlAction"}
-          onClick={() => {
-            videoRef.current?.paused
-              ? videoRef.current?.play()
-              : videoRef.current?.pause();
-          }}
-          icon={state ? CoreIcons.pause : CoreIcons.play}
+      {!loaded && !errored && loadIndicator}
+      {!errored && (
+        <Fragment>
+          <video
+            loop
+            ref={videoRef}
+            controls={false}
+            poster={poster}
+            autoPlay={autoPlay}
+            className={classNames(
+              "fabric-media",
+              "pointer-events-none w-full h-full",
+              fit && `object-${fit}`,
+            )}
+            onPlay={() => setState(true)}
+            onPause={() => setState(false)}
+            onVolumeChange={(e) => setVolume(!!e.currentTarget.volume)}
+            onLoadedData={(e) => {
+              e.currentTarget.volume = 0;
+              setLoaded(true);
+            }}
+            onError={() => setErrored(true)}
+          >
+            <source src={src} />
+            <track kind="captions" />
+          </video>
+          <div
+            data-inner-clickable
+            className={classNames(
+              "fabric-mediaControls",
+              "absolute bottom-6 end-6 rounded-full flex flex-col",
+            )}
+          >
+            <Button
+              rounded
+              variant="link"
+              className={"fabric-mediaControlPlaceholder"}
+              icon={CoreIcons.ellipsis}
+              aria-label="controls"
+            />
+            <Button
+              rounded
+              variant="link"
+              aria-label="controls"
+              className={"fabric-mediaControlAction"}
+              onClick={() => {
+                videoRef.current &&
+                  (videoRef.current.volume = videoRef.current.volume ? 0 : 1);
+              }}
+              icon={volume ? CoreIcons.volumeOn : CoreIcons.volumeOff}
+            />
+            <Button
+              rounded
+              variant="link"
+              aria-label="controls"
+              className={"fabric-mediaControlAction"}
+              onClick={() => {
+                videoRef.current?.paused
+                  ? videoRef.current?.play()
+                  : videoRef.current?.pause();
+              }}
+              icon={state ? CoreIcons.pause : CoreIcons.play}
+            />
+          </div>
+        </Fragment>
+      )}
+      {errored && (
+        <Icon
+          size="2rem"
+          className="absolute text-tint-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+          icon={CoreIcons.mediaVideoBroken}
         />
-      </div>
+      )}
     </div>
   );
 };

package/src/components/menu/Menu.tsx

@@ -275,6 +275,15 @@ export const Menu = (props: MenuProps) => {
   const parentId = useFloatingParentNodeId();
   const tree = useFloatingTree();
 
+  if (tree) {
+    return (
+      <MenuComponent
+        {...(props as AnyObject)}
+        menuClassName={props.className}
+      />
+    );
+  }
+
   if (parentId === null) {
     return (
       <FloatingTree>
@@ -286,14 +295,5 @@ export const Menu = (props: MenuProps) => {
     );
   }
 
-  if (tree) {
-    return (
-      <MenuComponent
-        {...(props as AnyObject)}
-        menuClassName={props.className}
-      />
-    );
-  }
-
   return <MenuComponent {...props} />;
 };

package/src/components/tabpanel/Tab.tsx

@@ -172,7 +172,9 @@ export const Tab = <Tag extends React.ElementType = "button">({
           />
         )}
         {actions && active && (
-          <DropdownTool className="bg-base/20 me-1 z-5">{actions}</DropdownTool>
+          <DropdownTool className="bg-tint-50/20 me-1 z-5">
+            {actions}
+          </DropdownTool>
         )}
         {onClose && (
           <span

package/src/hotkeys/HotKeyLabel.tsx

@@ -54,7 +54,7 @@ export const HotKeyLabel = ({
   );
 
   return (
-    <kbd className="hotkey-label inline-flex gap-1 select-none self-center font-mono items-center text-[0.625rem] leading-4 bg-tint-500/10 text-base/50 whitespace-nowrap rounded px-2 mx-1">
+    <kbd className="hotkey-label inline-flex gap-1 select-none self-center font-mono items-center text-[0.625rem] leading-4 bg-tint-500/20 text-tint-900/65 whitespace-nowrap rounded px-2 mx-1">
       {label}
     </kbd>
   );

package/src/hotkeys/HotKeyWrapper.tsx

@@ -76,7 +76,9 @@ export const HotKeyWrapper: FC<PropsWithChildren> = memo(
       const find = items.find(
         ({ key, alt, ctrl, meta, shift }: KeyValue) =>
           (key.toLowerCase() === keyCode.toLowerCase() ||
-            key.toLowerCase() === code.toLowerCase()) &&
+            key.toLowerCase() === code.toLowerCase() ||
+            // work around for macos alt+key issue
+            `key${key.toLowerCase()}` === code.toLowerCase()) &&
           alt === altKey &&
           ctrl === ctrlKey &&
           meta === metaKey &&

package/src/overlays/alert/Alert.tsx

@@ -156,7 +156,7 @@ export const Alert = ({
       <FloatingOverlay
         lockScroll
         style={{ zIndex: "var(--z-overlay-mask)" }}
-        className="bg-base/50 backdrop-blur-sm grid place-items-center"
+        className="bg-tint-100/50 backdrop-blur-sm grid place-items-center"
       >
         <FloatingFocusManager context={context}>
           <dialog

package/src/overlays/flyout/Flyout.tsx

@@ -202,7 +202,7 @@ export const Flyout = ({
         <FloatingOverlay
           lockScroll
           style={{ zIndex: "var(--z-overlay-mask)" }}
-          className="bg-base/10 backdrop-blur-sm transition-all"
+          className="bg-tint-100/10 backdrop-blur-sm transition-all"
         >
           {children}
         </FloatingOverlay>
@@ -239,6 +239,7 @@ export const Flyout = ({
             <HotKeyWrapper>
               <Header
                 flex
+                align="center"
                 className={classNames("fabric-flyoutHeader", headerClassName)}
               >
                 {isString(icon) && (

package/src/overlays/modal/Modal.tsx

@@ -177,7 +177,7 @@ export const Modal = ({
       <FloatingOverlay
         lockScroll
         style={{ zIndex: "var(--z-overlay-mask)" }}
-        className="bg-base/20 backdrop-blur-sm grid place-items-center"
+        className="bg-tint-100/20 backdrop-blur-sm grid place-items-center"
       >
         <FloatingFocusManager context={context}>
           <dialog
@@ -204,6 +204,7 @@ export const Modal = ({
             <HotKeyWrapper>
               <Header
                 flex
+                align="center"
                 className={classNames("fabric-modalHeader", headerClassName)}
               >
                 {isString(icon) && (