@react-fabric/core 1.0.0-beta.52 → 1.0.0-beta.54

package/css/components/_breadcrumbs.css

@@ -95,7 +95,7 @@
 
   .fabric-breadcrumbs[data-variant="modern"] {
     & > .fabric-breadcrumbLink {
-      --linkcolor: color-mix(in lab, var(--color) 50%, var(--fabric-bg));
+      --linkcolor: color-mix(in lab, var(--color) 35%, var(--fabric-bg));
 
       position: relative;
       list-style: none;
@@ -164,11 +164,11 @@
       }
 
       &:hover {
-        --linkcolor: color-mix(in lab, var(--color) 65%, var(--fabric-bg));
+        --linkcolor: color-mix(in lab, var(--color) 40%, var(--fabric-bg));
       }
 
       &:active {
-        --linkcolor: color-mix(in lab, var(--color) 35%, var(--fabric-bg));
+        --linkcolor: color-mix(in lab, var(--color) 45%, var(--fabric-bg));
       }
     }
   }

package/css/components/_menu.css

@@ -70,6 +70,8 @@
     &.active {
       pointer-events: none;
       background-color: color-mix(in lab, var(--color) 20%, var(--fabric-bg));
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
 
       & > div {
         box-shadow: 4px 0 0 var(--color) inset;

package/css/core/_aside.css

@@ -112,14 +112,14 @@
 
       &::before {
         height: 32px;
-        border: 1px solid var(--color-tint-700);
+        border: 1px solid var(--color-tint-500);
         border-width: 0 1.5px;
       }
 
       &:hover::before,
       &:active::before {
         height: 100%;
-        background-color: var(--color-primary-600);
+        background-color: var(--color-primary-300);
         border-color: var(--bg-color-base);
         border-width: 0 1.25px;
       }

package/css/theme/_utilities.css

@@ -81,7 +81,7 @@
   unicode-bidi: plaintext;
 }
 
-@utility flex-auto {
+@utility flex-content {
   flex: 0 0 auto;
 }
 

package/dist/cjs/components/badge/Badge.js

@@ -95,7 +95,7 @@ var Badge = function Badge(_ref) {
       "data-ref": "badge",
       "data-ping": ping,
       "data-placement": placement,
-      className: classNames("fabric-badge", className, "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-2 pointer-events-none", forButton && !placement || inline ? "relative" : "absolute"),
+      className: classNames("fabric-badge", className, "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-2 pointer-events-none", forButton && !placement || inline ? "relative flex-content" : "absolute"),
       children: [label && /*#__PURE__*/jsxRuntime.jsx("span", {
         className: "p-1",
         children: label

package/dist/cjs/components/breadcrumbs/Breadcrumbs.js

@@ -51,7 +51,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     color = _ref.color,
     aria = _objectWithoutProperties(_ref, _excluded);
   var _useMemo = react.useMemo(function () {
-      var nodeList = react.Children.toArray(children);
+      var nodeList = react.Children.toArray(children).filter(Boolean);
       if (nodeList.length > 7) {
         return [nodeList.slice(0, 3), nodeList.slice(3, -3), nodeList.slice(-3)];
       }

package/dist/cjs/components/button/Button.js

@@ -174,7 +174,7 @@ var Button = function Button(_ref) {
           className: classNames("fabric-buttonLabel", "truncate"),
           "data-colored-icon": !!iconBg,
           children: children
-        }), !utilities.isNil(badge) && /*#__PURE__*/jsxRuntime.jsx(Badge.Badge, _objectSpread({}, badgeProps)), hotKey && /*#__PURE__*/jsxRuntime.jsx(HotKeyLabel.HotKeyLabel, {
+        }), !utilities.isNil(badge) && /*#__PURE__*/jsxRuntime.jsx(Badge.Badge, _objectSpread({}, badgeProps)), hotKey && children && /*#__PURE__*/jsxRuntime.jsx(HotKeyLabel.HotKeyLabel, {
           keyCombo: hotKey
         }), altIcon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
           className: "fabric-altIcon",

package/dist/cjs/components/chip/Chip.js

@@ -95,7 +95,7 @@ var Chip = function Chip(_ref) {
   }, aria), {}, {
     children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
       "data-ref": "chipIcon",
-      className: classNames("fabric-chipIcon", "m-1 flex-auto"),
+      className: classNames("fabric-chipIcon", "m-1 flex-content"),
       icon: icon,
       bg: iconBg,
       onClick: onIconClick,

package/dist/cjs/components/empty/EmptyContent.js

@@ -101,13 +101,13 @@ var EmptyContent = function EmptyContent(_ref) {
         icon: icon
       }), /*#__PURE__*/react.isValidElement(icon) && icon, !icon && /*#__PURE__*/jsxRuntime.jsx(DefaultIcon, {})]
     }), title && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "font-medium text-center text-dimmed",
+      className: "font-medium text-center opacity-85",
       style: {
         fontSize: "1.5em"
       },
       children: title
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "font-medium text-center text-muted",
+      className: "font-medium text-center opacity-65",
       style: {
         fontSize: "0.875em"
       },

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

@@ -130,7 +130,7 @@ var MenuItem = function MenuItem(_ref) {
       ref: utilities.mergeRefs(ref, elRef),
       "data-dropdown-dismiss": true,
       "data-color": color,
-      className: classNames("fabric-menuItem cursor-pointer", className, active && "active", minimal && "minimal", disabled && "disabled", "rounded-capped relative max-w-[50vw] my-0.5"),
+      className: classNames("fabric-menuItem cursor-pointer", className, active && "active", minimal && "minimal", disabled && "disabled", "rounded relative max-w-[50vw] my-0.5"),
       "data-active": active,
       "data-open": childOpen,
       disabled: disabled,

package/dist/cjs/components/panel/Panel.js

@@ -9,6 +9,7 @@ var usePropToggle = require('../../hooks/usePropToggle.js');
 var icons = require('../../types/icons.js');
 var Animations = require('../animations/Animations.js');
 var Icon = require('../icon/Icon.js');
+var HotKey = require('../../hotkeys/HotKey.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["children", "className", "titleClassName", "headerClassName", "title", "actions", "icon", "iconBg", "iconColor", "rtlFlip", "panelId", "height", "width", "minHeight", "minWidth", "maxHeight", "maxWidth", "loading", "expandable", "expanded", "onExpand", "collapsable", "collapsed", "onCollapse", "onClose", "onBack"];
@@ -107,7 +108,10 @@ var Panel = function Panel(_ref) {
       maxHeight: maxHeight
     }
   }, aria), {}, {
-    children: [/*#__PURE__*/jsxRuntime.jsxs("header", {
+    children: [expanded && /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
+      keyCombo: "esc",
+      handler: toggleExpand
+    }), /*#__PURE__*/jsxRuntime.jsxs("header", {
       role: "none",
       className: classNames("fabric-panelHeader", headerClassName, "flex flex-nowrap items-center area-head"),
       "data-ref": "panelHeader",

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

@@ -106,7 +106,7 @@ var Col = function Col(_ref3) {
     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), truncate && "truncate")
+    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-content", align && "self-".concat(align), truncate && "truncate")
   }, aria), {}, {
     children: children
   }));

package/dist/cjs/core/section/Section.js

@@ -1,46 +1,30 @@
 'use strict';
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var classNames = require('classnames');
 var ErrorBoundary = require('../boundary/ErrorBoundary.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 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.
- */
-
+var _excluded = ["children", "className", "dir", "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; }
 var Section = function Section(_ref) {
   var children = _ref.children,
     className = _ref.className,
     dir = _ref.dir,
-    ref = _ref.ref;
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref = _ref.ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
     "data-ref": "section",
     dir: dir,
-    ref: ref,
+    ref: ref
+  }, rest), {}, {
     className: classNames("fabric-section", className, "grid area-content overflow-hidden"),
     children: /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, {
       children: children
     })
-  });
+  }));
 };
 
 exports.Section = Section;

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

@@ -120,7 +120,7 @@ var Flyout = function Flyout(_ref) {
               children: title
             }), actions, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
               "data-ref": "panelClose",
-              className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-stretch"),
+              className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-center"),
               icon: icons.CoreIcons.close,
               onClick: function onClick() {
                 return handleClose(false);

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

@@ -114,7 +114,7 @@ var Modal = function Modal(_ref) {
                 children: title
               }), actions, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
                 "data-ref": "panelClose",
-                className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-stretch"),
+                className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-center"),
                 icon: icons.CoreIcons.close,
                 onClick: function onClick() {
                   return handleClose(false);

package/dist/esm/components/badge/Badge.js

@@ -95,7 +95,7 @@ var Badge = function Badge(_ref) {
       "data-ref": "badge",
       "data-ping": ping,
       "data-placement": placement,
-      className: classNames("fabric-badge", className, "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-2 pointer-events-none", forButton && !placement || inline ? "relative" : "absolute"),
+      className: classNames("fabric-badge", className, "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-2 pointer-events-none", forButton && !placement || inline ? "relative flex-content" : "absolute"),
       children: [label && /*#__PURE__*/jsx("span", {
         className: "p-1",
         children: label

package/dist/esm/components/breadcrumbs/Breadcrumbs.js

@@ -51,7 +51,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     color = _ref.color,
     aria = _objectWithoutProperties(_ref, _excluded);
   var _useMemo = useMemo(function () {
-      var nodeList = Children.toArray(children);
+      var nodeList = Children.toArray(children).filter(Boolean);
       if (nodeList.length > 7) {
         return [nodeList.slice(0, 3), nodeList.slice(3, -3), nodeList.slice(-3)];
       }

package/dist/esm/components/button/Button.js

@@ -174,7 +174,7 @@ var Button = function Button(_ref) {
           className: classNames("fabric-buttonLabel", "truncate"),
           "data-colored-icon": !!iconBg,
           children: children
-        }), !isNil(badge) && /*#__PURE__*/jsx(Badge, _objectSpread({}, badgeProps)), hotKey && /*#__PURE__*/jsx(HotKeyLabel, {
+        }), !isNil(badge) && /*#__PURE__*/jsx(Badge, _objectSpread({}, badgeProps)), hotKey && children && /*#__PURE__*/jsx(HotKeyLabel, {
           keyCombo: hotKey
         }), altIcon && /*#__PURE__*/jsx(Icon, {
           className: "fabric-altIcon",

package/dist/esm/components/chip/Chip.js

@@ -95,7 +95,7 @@ var Chip = function Chip(_ref) {
   }, aria), {}, {
     children: [icon && /*#__PURE__*/jsx(Icon, {
       "data-ref": "chipIcon",
-      className: classNames("fabric-chipIcon", "m-1 flex-auto"),
+      className: classNames("fabric-chipIcon", "m-1 flex-content"),
       icon: icon,
       bg: iconBg,
       onClick: onIconClick,

package/dist/esm/components/empty/EmptyContent.js

@@ -101,13 +101,13 @@ var EmptyContent = function EmptyContent(_ref) {
         icon: icon
       }), /*#__PURE__*/isValidElement(icon) && icon, !icon && /*#__PURE__*/jsx(DefaultIcon, {})]
     }), title && /*#__PURE__*/jsx("div", {
-      className: "font-medium text-center text-dimmed",
+      className: "font-medium text-center opacity-85",
       style: {
         fontSize: "1.5em"
       },
       children: title
     }), /*#__PURE__*/jsx("div", {
-      className: "font-medium text-center text-muted",
+      className: "font-medium text-center opacity-65",
       style: {
         fontSize: "0.875em"
       },

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

@@ -130,7 +130,7 @@ var MenuItem = function MenuItem(_ref) {
       ref: mergeRefs(ref, elRef),
       "data-dropdown-dismiss": true,
       "data-color": color,
-      className: classNames("fabric-menuItem cursor-pointer", className, active && "active", minimal && "minimal", disabled && "disabled", "rounded-capped relative max-w-[50vw] my-0.5"),
+      className: classNames("fabric-menuItem cursor-pointer", className, active && "active", minimal && "minimal", disabled && "disabled", "rounded relative max-w-[50vw] my-0.5"),
       "data-active": active,
       "data-open": childOpen,
       disabled: disabled,

package/dist/esm/components/panel/Panel.js

@@ -9,6 +9,7 @@ import { usePropToggle } from '../../hooks/usePropToggle.js';
 import { CoreIcons } from '../../types/icons.js';
 import { Loading } from '../animations/Animations.js';
 import { Icon } from '../icon/Icon.js';
+import { HotKey } from '../../hotkeys/HotKey.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["children", "className", "titleClassName", "headerClassName", "title", "actions", "icon", "iconBg", "iconColor", "rtlFlip", "panelId", "height", "width", "minHeight", "minWidth", "maxHeight", "maxWidth", "loading", "expandable", "expanded", "onExpand", "collapsable", "collapsed", "onCollapse", "onClose", "onBack"];
@@ -107,7 +108,10 @@ var Panel = function Panel(_ref) {
       maxHeight: maxHeight
     }
   }, aria), {}, {
-    children: [/*#__PURE__*/jsxs("header", {
+    children: [expanded && /*#__PURE__*/jsx(HotKey, {
+      keyCombo: "esc",
+      handler: toggleExpand
+    }), /*#__PURE__*/jsxs("header", {
       role: "none",
       className: classNames("fabric-panelHeader", headerClassName, "flex flex-nowrap items-center area-head"),
       "data-ref": "panelHeader",

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

@@ -106,7 +106,7 @@ var Col = function Col(_ref3) {
     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), truncate && "truncate")
+    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-content", align && "self-".concat(align), truncate && "truncate")
   }, aria), {}, {
     children: children
   }));

package/dist/esm/core/section/Section.js

@@ -1,46 +1,30 @@
 'use client';
 
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
 import { ErrorBoundary } from '../boundary/ErrorBoundary.js';
 import { jsx } from 'react/jsx-runtime';
 
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 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.
- */
-
+var _excluded = ["children", "className", "dir", "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; }
 var Section = function Section(_ref) {
   var children = _ref.children,
     className = _ref.className,
     dir = _ref.dir,
-    ref = _ref.ref;
-  return /*#__PURE__*/jsx("div", {
+    ref = _ref.ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
     "data-ref": "section",
     dir: dir,
-    ref: ref,
+    ref: ref
+  }, rest), {}, {
     className: classNames("fabric-section", className, "grid area-content overflow-hidden"),
     children: /*#__PURE__*/jsx(ErrorBoundary, {
       children: children
     })
-  });
+  }));
 };
 
 export { Section };

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

@@ -120,7 +120,7 @@ var Flyout = function Flyout(_ref) {
               children: title
             }), actions, /*#__PURE__*/jsx(Icon, {
               "data-ref": "panelClose",
-              className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-stretch"),
+              className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-center"),
               icon: CoreIcons.close,
               onClick: function onClick() {
                 return handleClose(false);

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

@@ -114,7 +114,7 @@ var Modal = function Modal(_ref) {
                 children: title
               }), actions, /*#__PURE__*/jsx(Icon, {
                 "data-ref": "panelClose",
-                className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-stretch"),
+                className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-center"),
                 icon: CoreIcons.close,
                 onClick: function onClick() {
                   return handleClose(false);

package/dist/types/core/section/Section.d.ts

@@ -1,4 +1,4 @@
-import { type ChildrenProp, type CssProp, type RefProp } from "../../types";
+import { TestProps, type ChildrenProp, type CssProp, type RefProp } from "../../types";
 /**
  * A component that represents a section of content within a page, with templated grid layout.
  * It can be used to group related content together and can be styled with additional CSS classes.
@@ -17,6 +17,6 @@ import { type ChildrenProp, type CssProp, type RefProp } from "../../types";
  *
  *  @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-application--section} for more details.
  */
-export declare const Section: ({ children, className, dir, ref, }: ChildrenProp & CssProp & RefProp<HTMLDivElement> & {
+export declare const Section: ({ children, className, dir, ref, ...rest }: ChildrenProp & CssProp & TestProps & RefProp<HTMLDivElement> & {
     dir?: "ltr" | "rtl";
 }) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.52",
+  "version": "1.0.0-beta.54",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "0eabb9d88d91af93d657bcc209b226fd576e8260"
+  "gitHead": "242f15e3de29d365cce6f41f4ef99ab36bb6b995"
 }

package/src/components/badge/Badge.tsx

@@ -170,7 +170,9 @@ export const Badge = ({
             "fabric-badge",
             className,
             "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-2 pointer-events-none",
-            (forButton && !placement) || inline ? "relative" : "absolute",
+            (forButton && !placement) || inline
+              ? "relative flex-content"
+              : "absolute",
           )}
         >
           {label && <span className="p-1">{label}</span>}

package/src/components/breadcrumbs/Breadcrumbs.tsx

@@ -83,7 +83,7 @@ export const Breadcrumbs = ({
   ...aria
 }: BreadcrumbProps) => {
   const [start, overflow, end] = useMemo(() => {
-    const nodeList = Children.toArray(children as AnyObject);
+    const nodeList = Children.toArray(children as AnyObject).filter(Boolean);
     if (nodeList.length > 7) {
       return [nodeList.slice(0, 3), nodeList.slice(3, -3), nodeList.slice(-3)];
     }

package/src/components/button/Button.tsx

@@ -329,7 +329,7 @@ export const Button = <Tag extends React.ElementType = "button">({
             </label>
           )}
           {!isNil(badge) && <Badge {...badgeProps} />}
-          {hotKey && <HotKeyLabel keyCombo={hotKey} />}
+          {hotKey && children && <HotKeyLabel keyCombo={hotKey} />}
           {altIcon && (
             <Icon className={"fabric-altIcon"} icon={altIcon} rtlFlip />
           )}

package/src/components/chip/Chip.tsx

@@ -190,7 +190,7 @@ export const Chip = <Tag extends React.ElementType = "div">({
       {icon && (
         <Icon
           data-ref="chipIcon"
-          className={classNames("fabric-chipIcon", "m-1 flex-auto")}
+          className={classNames("fabric-chipIcon", "m-1 flex-content")}
           icon={icon}
           bg={iconBg}
           onClick={onIconClick}

package/src/components/empty/EmptyContent.tsx

@@ -164,14 +164,14 @@ export const EmptyContent = ({
       </div>
       {title && (
         <div
-          className="font-medium text-center text-dimmed"
+          className="font-medium text-center opacity-85"
           style={{ fontSize: "1.5em" }}
         >
           {title}
         </div>
       )}
       <div
-        className="font-medium text-center text-muted"
+        className="font-medium text-center opacity-65"
         style={{ fontSize: "0.875em" }}
       >
         {message}

package/src/components/menu/MenuItem.tsx

@@ -171,7 +171,7 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
           active && "active",
           minimal && "minimal",
           disabled && "disabled",
-          "rounded-capped relative max-w-[50vw] my-0.5",
+          "rounded relative max-w-[50vw] my-0.5",
         )}
         data-active={active}
         data-open={childOpen}

package/src/components/panel/Panel.tsx

@@ -38,6 +38,7 @@ import {
 import { CoreIcons } from "../../types/icons";
 import { Loading } from "../animations/Animations";
 import { Icon } from "../icon/Icon";
+import { HotKey } from "../../hotkeys/HotKey";
 
 export interface PanelProps
   extends CssProp,
@@ -205,6 +206,7 @@ export const Panel = ({
       }
       {...aria}
     >
+      {expanded && <HotKey keyCombo="esc" handler={toggleExpand} />}
       <header
         role="none"
         className={classNames(

package/src/core/responsive/Responsive.tsx

@@ -218,7 +218,7 @@ export const Col = ({
         flex === "full" && "flex-full",
         flex === "auto" && "flex-auto",
         flex === "initial" && "flex-initial",
-        flex === "content" && "flex-none",
+        flex === "content" && "flex-content",
         align && `self-${align}`,
         truncate && "truncate",
       )}

package/src/core/section/Section.tsx

@@ -22,7 +22,12 @@
  */
 
 import classNames from "classnames";
-import { type ChildrenProp, type CssProp, type RefProp } from "../../types";
+import {
+  TestProps,
+  type ChildrenProp,
+  type CssProp,
+  type RefProp,
+} from "../../types";
 import { ErrorBoundary } from "../boundary/ErrorBoundary";
 
 /**
@@ -48,14 +53,17 @@ export const Section = ({
   className,
   dir,
   ref,
+  ...rest
 }: ChildrenProp &
   CssProp &
+  TestProps &
   RefProp<HTMLDivElement> & { dir?: "ltr" | "rtl" }) => {
   return (
     <div
       data-ref="section"
       dir={dir}
       ref={ref}
+      {...rest}
       className={classNames(
         "fabric-section",
         className,

package/src/overlays/flyout/Flyout.tsx

@@ -245,7 +245,7 @@ export const Flyout = ({
                 data-ref="panelClose"
                 className={classNames(
                   "fabric-panelAction",
-                  "cursor-pointer p-1 text-xl self-stretch",
+                  "cursor-pointer p-1 text-xl self-center",
                 )}
                 icon={CoreIcons.close}
                 onClick={() => handleClose(false)}

package/src/overlays/modal/Modal.tsx

@@ -240,7 +240,7 @@ export const Modal = ({
                   data-ref="panelClose"
                   className={classNames(
                     "fabric-panelAction",
-                    "cursor-pointer p-1 text-xl self-stretch",
+                    "cursor-pointer p-1 text-xl self-center",
                   )}
                   icon={CoreIcons.close}
                   onClick={() => handleClose(false)}