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

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,8 +81,8 @@
   unicode-bidi: plaintext;
 }
 
-@utility flex-auto {
-  flex: 0 0 auto;
+@utility flex-content {
+  flex: 0 1 auto;
 }
 
 @utility flex-full {

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/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/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/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/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/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/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.53",
   "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": "1042327831f9c908912c552d5c2704b765a6f9c2"
 }

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/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/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,