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

package/css/components/_button.css

@@ -98,10 +98,6 @@
     & > .fabric-buttonWrapper {
       flex: 0 1 1em;
     }
-
-    &:not(.flex) + &:not(.flex) {
-      margin-inline-start: 0.5rem;
-    }
   }
 }
 
@@ -328,6 +324,10 @@
         border-start-start-radius: 0;
         border-end-start-radius: 0;
       }
+
+      &:not(.flex) + &:not(.flex) {
+        margin-inline-start: 0.5rem;
+      }
     }
 
     &.vertical {
@@ -360,6 +360,10 @@
         border-start-start-radius: 0;
         border-start-end-radius: 0;
       }
+
+      &:not(.flex) + &:not(.flex) {
+        margin-top: 0.5rem;
+      }
     }
   }
 }

package/css/components/_tabPanel.css

@@ -120,13 +120,14 @@
       }
     }
 
-    &[data-variant="soft"] {
+    &[data-variant="soft"],
+    &[data-variant="pills"] {
       & .fabric-tabList > .fabric-tabButton.active {
         background-color: color-mix(in lab, var(--color) 20%, var(--fabric-bg));
       }
     }
 
-    &[data-orientation="top"] .fabric-tabList {
+    &[data-orientation="top"]:not([data-variant="pills"]) .fabric-tabList {
       & > .fabric-tabButton.active {
         box-shadow:
           0 -2px 0 var(--active-color) inset,
@@ -134,7 +135,7 @@
       }
     }
 
-    &[data-orientation="bottom"] .fabric-tabList {
+    &[data-orientation="bottom"]:not([data-variant="pills"]) .fabric-tabList {
       & > .fabric-tabButton.active {
         box-shadow:
           0 2px 0 var(--active-color) inset,
@@ -142,7 +143,7 @@
       }
     }
 
-    &[data-orientation="start"] .fabric-tabList {
+    &[data-orientation="start"]:not([data-variant="pills"]) .fabric-tabList {
       & > .fabric-tabButton.active {
         box-shadow:
           -2px 0 0 var(--active-color) inset,
@@ -150,7 +151,7 @@
       }
     }
 
-    &[data-orientation="end"] .fabric-tabList {
+    &[data-orientation="end"]:not([data-variant="pills"]) .fabric-tabList {
       & > .fabric-tabButton.active {
         box-shadow:
           2px 0 0 var(--active-color) inset,
@@ -158,32 +159,47 @@
       }
     }
 
-    &[data-orientation="top"] .fabric-tabList > .fabric-tabButton {
+    &[data-orientation="top"]:not([data-variant="pills"])
+      .fabric-tabList
+      > .fabric-tabButton {
       margin-top: 2px;
       margin-inline: 1px;
       border-end-start-radius: 0;
       border-end-end-radius: 0;
     }
 
-    &[data-orientation="bottom"] .fabric-tabList > .fabric-tabButton {
+    &[data-orientation="bottom"]:not([data-variant="pills"])
+      .fabric-tabList
+      > .fabric-tabButton {
       margin-bottom: 2px;
       margin-inline: 1px;
       border-start-start-radius: 0;
       border-start-end-radius: 0;
     }
 
-    &[data-orientation="start"] .fabric-tabList > .fabric-tabButton {
+    &[data-orientation="start"]:not([data-variant="pills"])
+      .fabric-tabList
+      > .fabric-tabButton {
       margin-block: 1px;
       margin-inline-start: 2px;
       border-start-end-radius: 0;
       border-end-end-radius: 0;
     }
 
-    &[data-orientation="end"] .fabric-tabList > .fabric-tabButton {
+    &[data-orientation="end"]:not([data-variant="pills"])
+      .fabric-tabList
+      > .fabric-tabButton {
       margin-block: 1px;
       margin-inline-end: 2px;
       border-start-start-radius: 0;
       border-end-start-radius: 0;
     }
+
+    &[data-variant="pills"] {
+      .fabric-tabList > .fabric-tabButton {
+        margin: 2px;
+        box-shadow: 0 0 2px var(--active-color) inset;
+      }
+    }
   }
 }

package/css/theme/_utilities.css

@@ -82,7 +82,7 @@
 }
 
 @utility flex-content {
-  flex: 0 1 auto;
+  flex: 0 0 auto;
 }
 
 @utility flex-full {

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/Menu.js

@@ -241,12 +241,14 @@ var Menu = function Menu(props) {
   var tree = react.useFloatingTree();
   if (tree) {
     return /*#__PURE__*/jsxRuntime.jsx(MenuComponent, _objectSpread(_objectSpread({}, props), {}, {
+      className: "",
       menuClassName: props.className
     }));
   }
   if (parentId === null) {
     return /*#__PURE__*/jsxRuntime.jsx(react.FloatingTree, {
       children: /*#__PURE__*/jsxRuntime.jsx(MenuComponent, _objectSpread(_objectSpread({}, props), {}, {
+        className: "",
         menuClassName: props.className
       }))
     });

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/components/tabpanel/Tab.js

@@ -92,7 +92,7 @@ var Tab = function Tab(_ref) {
       disabled: disabled,
       "data-color": color,
       "data-inner-clickable": true,
-      className: classNames("fabric-tabButton", className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36", minimal ? "min-w-6" : "min-w-18", "flex items-center justify-center px-1 rounded overflow-hidden cursor-pointer"),
+      className: classNames("fabric-tabButton", className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36", minimal ? "min-w-6 rounded" : "min-w-18 rounded-capped", "flex items-center justify-center px-1 overflow-hidden cursor-pointer"),
       onClick: function onClick() {
         return !active && (_onClick === null || _onClick === void 0 ? void 0 : _onClick(id));
       },

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

@@ -49,6 +49,7 @@ var TabPanel = function TabPanel(_ref) {
     _ref$orientation = _ref.orientation,
     orientation = _ref$orientation === void 0 ? "top" : _ref$orientation,
     activeTab = _ref.activeTab,
+    activeClassName = _ref.activeClassName,
     justify = _ref.justify,
     variant = _ref.variant,
     tabFlex = _ref.tabFlex,
@@ -99,9 +100,10 @@ var TabPanel = function TabPanel(_ref) {
           gap: gap
         },
         children: tabs.map(function (node) {
-          var _node$props$tabFlex;
+          var _node$props$tabFlex, _node$props$activeCla;
           return /*#__PURE__*/react.cloneElement(node, {
             tabFlex: (_node$props$tabFlex = node.props.tabFlex) !== null && _node$props$tabFlex !== void 0 ? _node$props$tabFlex : tabFlex,
+            activeClassName: (_node$props$activeCla = node.props.activeClassName) !== null && _node$props$activeCla !== void 0 ? _node$props$activeCla : activeClassName,
             onClick: handleClick,
             active: node.props.id === active
           });

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/cjs/types/icons.js

@@ -194,7 +194,7 @@ exports.CoreIcons = void 0;
   _CoreIcons.mediaSplitter = "M3 15V17H5V15M15 19V21H17V19M19 3H5C3.9 3 3 3.9 3 5V9H5V5H19V9H21V5C21 3.9 20.1 3 19 3M21 19H19V21C20.1 21 21 20.1 21 19M1 11V13H23V11M7 19V21H9V19M19 15V17H21V15M11 19V21H13V19M3 19C3 20.1 3.9 21 5 21V19Z";
   _CoreIcons.mediaPlay = "M8,5.14V19.14L19,12.14L8,5.14Z";
   _CoreIcons.mediaPause = "M14,19H18V5H14M6,19H10V5H6V19Z";
-  _CoreIcons.mediaContrast = "M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z";
+  _CoreIcons.mediaContrast = "M12,20C9.79,20 7.79,19.1 6.34,17.66L17.66,6.34C19.1,7.79 20,9.79 20,12A8,8 0 0,1 12,20M6,8H8V6H9.5V8H11.5V9.5H9.5V11.5H8V9.5H6M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,16H17V14.5H12V16Z";
   _CoreIcons.mediaEqs = "M7 3H5V9H7V3M19 3H17V13H19V3M3 13H5V21H7V13H9V11H3V13M15 7H13V3H11V7H9V9H15V7M11 21H13V11H11V21M15 15V17H17V21H19V17H21V15H15Z";
   _CoreIcons.mediaCaptionOff = "M5,4C4.45,4 4,4.18 3.59,4.57C3.2,4.96 3,5.44 3,6V18C3,18.56 3.2,19.04 3.59,19.43C4,19.82 4.45,20 5,20H19C19.5,20 20,19.81 20.39,19.41C20.8,19 21,18.53 21,18V6C21,5.47 20.8,5 20.39,4.59C20,4.19 19.5,4 19,4H5M4.5,5.5H19.5V18.5H4.5V5.5M7,9C6.7,9 6.47,9.09 6.28,9.28C6.09,9.47 6,9.7 6,10V14C6,14.3 6.09,14.53 6.28,14.72C6.47,14.91 6.7,15 7,15H10C10.27,15 10.5,14.91 10.71,14.72C10.91,14.53 11,14.3 11,14V13H9.5V13.5H7.5V10.5H9.5V11H11V10C11,9.7 10.91,9.47 10.71,9.28C10.5,9.09 10.27,9 10,9H7M14,9C13.73,9 13.5,9.09 13.29,9.28C13.09,9.47 13,9.7 13,10V14C13,14.3 13.09,14.53 13.29,14.72C13.5,14.91 13.73,15 14,15H17C17.3,15 17.53,14.91 17.72,14.72C17.91,14.53 18,14.3 18,14V13H16.5V13.5H14.5V10.5H16.5V11H18V10C18,9.7 17.91,9.47 17.72,9.28C17.53,9.09 17.3,9 17,9H14Z";
   _CoreIcons.mediaCaptionOn = "M18,11H16.5V10.5H14.5V13.5H16.5V13H18V14A1,1 0 0,1 17,15H14A1,1 0 0,1 13,14V10A1,1 0 0,1 14,9H17A1,1 0 0,1 18,10M11,11H9.5V10.5H7.5V13.5H9.5V13H11V14A1,1 0 0,1 10,15H7A1,1 0 0,1 6,14V10A1,1 0 0,1 7,9H10A1,1 0 0,1 11,10M19,4H5C3.89,4 3,4.89 3,6V18A2,2 0 0,0 5,20H19A2,2 0 0,0 21,18V6C21,4.89 20.1,4 19,4Z";
@@ -205,4 +205,8 @@ exports.CoreIcons = void 0;
   _CoreIcons.mediaVolume3 = "M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z";
   _CoreIcons.mediaComment = "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M6,7H18V9H6V7M6,11H15V13H6V11Z";
   _CoreIcons.mediaCommentAdd = "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M11,6H13V9H16V11H13V14H11V11H8V9H11V6Z";
+  _CoreIcons.mediaLightness = "M12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z";
+  _CoreIcons.mediaColor = "M19,11.5C19,11.5 17,13.67 17,15A2,2 0 0,0 19,17A2,2 0 0,0 21,15C21,13.67 19,11.5 19,11.5M5.21,10L10,5.21L14.79,10M16.56,8.94L7.62,0L6.21,1.41L8.59,3.79L3.44,8.94C2.85,9.5 2.85,10.47 3.44,11.06L8.94,16.56C9.23,16.85 9.62,17 10,17C10.38,17 10.77,16.85 11.06,16.56L16.56,11.06C17.15,10.47 17.15,9.5 16.56,8.94Z";
+  _CoreIcons.mediaInvert = "M12,19.58V19.58C10.4,19.58 8.89,18.96 7.76,17.83C6.62,16.69 6,15.19 6,13.58C6,12 6.62,10.47 7.76,9.34L12,5.1M17.66,7.93L12,2.27V2.27L6.34,7.93C3.22,11.05 3.22,16.12 6.34,19.24C7.9,20.8 9.95,21.58 12,21.58C14.05,21.58 16.1,20.8 17.66,19.24C20.78,16.12 20.78,11.05 17.66,7.93Z";
+  _CoreIcons.mediaSaturate = "M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z";
 })(exports.CoreIcons || (exports.CoreIcons = {}));

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/Menu.js

@@ -241,12 +241,14 @@ var Menu = function Menu(props) {
   var tree = useFloatingTree();
   if (tree) {
     return /*#__PURE__*/jsx(MenuComponent, _objectSpread(_objectSpread({}, props), {}, {
+      className: "",
       menuClassName: props.className
     }));
   }
   if (parentId === null) {
     return /*#__PURE__*/jsx(FloatingTree, {
       children: /*#__PURE__*/jsx(MenuComponent, _objectSpread(_objectSpread({}, props), {}, {
+        className: "",
         menuClassName: props.className
       }))
     });

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/components/tabpanel/Tab.js

@@ -92,7 +92,7 @@ var Tab = function Tab(_ref) {
       disabled: disabled,
       "data-color": color,
       "data-inner-clickable": true,
-      className: classNames("fabric-tabButton", className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36", minimal ? "min-w-6" : "min-w-18", "flex items-center justify-center px-1 rounded overflow-hidden cursor-pointer"),
+      className: classNames("fabric-tabButton", className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36", minimal ? "min-w-6 rounded" : "min-w-18 rounded-capped", "flex items-center justify-center px-1 overflow-hidden cursor-pointer"),
       onClick: function onClick() {
         return !active && (_onClick === null || _onClick === void 0 ? void 0 : _onClick(id));
       },

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

@@ -49,6 +49,7 @@ var TabPanel = function TabPanel(_ref) {
     _ref$orientation = _ref.orientation,
     orientation = _ref$orientation === void 0 ? "top" : _ref$orientation,
     activeTab = _ref.activeTab,
+    activeClassName = _ref.activeClassName,
     justify = _ref.justify,
     variant = _ref.variant,
     tabFlex = _ref.tabFlex,
@@ -99,9 +100,10 @@ var TabPanel = function TabPanel(_ref) {
           gap: gap
         },
         children: tabs.map(function (node) {
-          var _node$props$tabFlex;
+          var _node$props$tabFlex, _node$props$activeCla;
           return /*#__PURE__*/cloneElement(node, {
             tabFlex: (_node$props$tabFlex = node.props.tabFlex) !== null && _node$props$tabFlex !== void 0 ? _node$props$tabFlex : tabFlex,
+            activeClassName: (_node$props$activeCla = node.props.activeClassName) !== null && _node$props$activeCla !== void 0 ? _node$props$activeCla : activeClassName,
             onClick: handleClick,
             active: node.props.id === active
           });

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/esm/types/icons.js

@@ -194,7 +194,7 @@ var CoreIcons;
   _CoreIcons.mediaSplitter = "M3 15V17H5V15M15 19V21H17V19M19 3H5C3.9 3 3 3.9 3 5V9H5V5H19V9H21V5C21 3.9 20.1 3 19 3M21 19H19V21C20.1 21 21 20.1 21 19M1 11V13H23V11M7 19V21H9V19M19 15V17H21V15M11 19V21H13V19M3 19C3 20.1 3.9 21 5 21V19Z";
   _CoreIcons.mediaPlay = "M8,5.14V19.14L19,12.14L8,5.14Z";
   _CoreIcons.mediaPause = "M14,19H18V5H14M6,19H10V5H6V19Z";
-  _CoreIcons.mediaContrast = "M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z";
+  _CoreIcons.mediaContrast = "M12,20C9.79,20 7.79,19.1 6.34,17.66L17.66,6.34C19.1,7.79 20,9.79 20,12A8,8 0 0,1 12,20M6,8H8V6H9.5V8H11.5V9.5H9.5V11.5H8V9.5H6M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,16H17V14.5H12V16Z";
   _CoreIcons.mediaEqs = "M7 3H5V9H7V3M19 3H17V13H19V3M3 13H5V21H7V13H9V11H3V13M15 7H13V3H11V7H9V9H15V7M11 21H13V11H11V21M15 15V17H17V21H19V17H21V15H15Z";
   _CoreIcons.mediaCaptionOff = "M5,4C4.45,4 4,4.18 3.59,4.57C3.2,4.96 3,5.44 3,6V18C3,18.56 3.2,19.04 3.59,19.43C4,19.82 4.45,20 5,20H19C19.5,20 20,19.81 20.39,19.41C20.8,19 21,18.53 21,18V6C21,5.47 20.8,5 20.39,4.59C20,4.19 19.5,4 19,4H5M4.5,5.5H19.5V18.5H4.5V5.5M7,9C6.7,9 6.47,9.09 6.28,9.28C6.09,9.47 6,9.7 6,10V14C6,14.3 6.09,14.53 6.28,14.72C6.47,14.91 6.7,15 7,15H10C10.27,15 10.5,14.91 10.71,14.72C10.91,14.53 11,14.3 11,14V13H9.5V13.5H7.5V10.5H9.5V11H11V10C11,9.7 10.91,9.47 10.71,9.28C10.5,9.09 10.27,9 10,9H7M14,9C13.73,9 13.5,9.09 13.29,9.28C13.09,9.47 13,9.7 13,10V14C13,14.3 13.09,14.53 13.29,14.72C13.5,14.91 13.73,15 14,15H17C17.3,15 17.53,14.91 17.72,14.72C17.91,14.53 18,14.3 18,14V13H16.5V13.5H14.5V10.5H16.5V11H18V10C18,9.7 17.91,9.47 17.72,9.28C17.53,9.09 17.3,9 17,9H14Z";
   _CoreIcons.mediaCaptionOn = "M18,11H16.5V10.5H14.5V13.5H16.5V13H18V14A1,1 0 0,1 17,15H14A1,1 0 0,1 13,14V10A1,1 0 0,1 14,9H17A1,1 0 0,1 18,10M11,11H9.5V10.5H7.5V13.5H9.5V13H11V14A1,1 0 0,1 10,15H7A1,1 0 0,1 6,14V10A1,1 0 0,1 7,9H10A1,1 0 0,1 11,10M19,4H5C3.89,4 3,4.89 3,6V18A2,2 0 0,0 5,20H19A2,2 0 0,0 21,18V6C21,4.89 20.1,4 19,4Z";
@@ -205,6 +205,10 @@ var CoreIcons;
   _CoreIcons.mediaVolume3 = "M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z";
   _CoreIcons.mediaComment = "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M6,7H18V9H6V7M6,11H15V13H6V11Z";
   _CoreIcons.mediaCommentAdd = "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M11,6H13V9H16V11H13V14H11V11H8V9H11V6Z";
+  _CoreIcons.mediaLightness = "M12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z";
+  _CoreIcons.mediaColor = "M19,11.5C19,11.5 17,13.67 17,15A2,2 0 0,0 19,17A2,2 0 0,0 21,15C21,13.67 19,11.5 19,11.5M5.21,10L10,5.21L14.79,10M16.56,8.94L7.62,0L6.21,1.41L8.59,3.79L3.44,8.94C2.85,9.5 2.85,10.47 3.44,11.06L8.94,16.56C9.23,16.85 9.62,17 10,17C10.38,17 10.77,16.85 11.06,16.56L16.56,11.06C17.15,10.47 17.15,9.5 16.56,8.94Z";
+  _CoreIcons.mediaInvert = "M12,19.58V19.58C10.4,19.58 8.89,18.96 7.76,17.83C6.62,16.69 6,15.19 6,13.58C6,12 6.62,10.47 7.76,9.34L12,5.1M17.66,7.93L12,2.27V2.27L6.34,7.93C3.22,11.05 3.22,16.12 6.34,19.24C7.9,20.8 9.95,21.58 12,21.58C14.05,21.58 16.1,20.8 17.66,19.24C20.78,16.12 20.78,11.05 17.66,7.93Z";
+  _CoreIcons.mediaSaturate = "M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z";
 })(CoreIcons || (CoreIcons = {}));
 
 export { CoreIcons };

package/dist/types/components/tabpanel/TabPanel.d.ts

@@ -13,7 +13,7 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
     /**
      * tab variations
      */
-    variant?: "soft" | "solid" | "outline";
+    variant?: "soft" | "solid" | "outline" | "pills";
     /**
      * tab button flex to fill tabs
      */
@@ -30,6 +30,10 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
      * tab list className
      */
     headerClassName?: string;
+    /**
+     * active tab className
+     */
+    activeClassName?: string;
     /**
      * append element
      */
@@ -80,4 +84,4 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-tabpanel--docs} for more details.
  */
-export declare const TabPanel: ({ children, headerClassName, orientation, activeTab, justify, variant, tabFlex, append, prepend, gap, onBeforeChange, onChange, }: TabPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TabPanel: ({ children, headerClassName, orientation, activeTab, activeClassName, justify, variant, tabFlex, append, prepend, gap, onBeforeChange, onChange, }: TabPanelProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -191,7 +191,7 @@ export declare namespace CoreIcons {
     const mediaSplitter = "M3 15V17H5V15M15 19V21H17V19M19 3H5C3.9 3 3 3.9 3 5V9H5V5H19V9H21V5C21 3.9 20.1 3 19 3M21 19H19V21C20.1 21 21 20.1 21 19M1 11V13H23V11M7 19V21H9V19M19 15V17H21V15M11 19V21H13V19M3 19C3 20.1 3.9 21 5 21V19Z";
     const mediaPlay = "M8,5.14V19.14L19,12.14L8,5.14Z";
     const mediaPause = "M14,19H18V5H14M6,19H10V5H6V19Z";
-    const mediaContrast = "M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z";
+    const mediaContrast = "M12,20C9.79,20 7.79,19.1 6.34,17.66L17.66,6.34C19.1,7.79 20,9.79 20,12A8,8 0 0,1 12,20M6,8H8V6H9.5V8H11.5V9.5H9.5V11.5H8V9.5H6M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,16H17V14.5H12V16Z";
     const mediaEqs = "M7 3H5V9H7V3M19 3H17V13H19V3M3 13H5V21H7V13H9V11H3V13M15 7H13V3H11V7H9V9H15V7M11 21H13V11H11V21M15 15V17H17V21H19V17H21V15H15Z";
     const mediaCaptionOff = "M5,4C4.45,4 4,4.18 3.59,4.57C3.2,4.96 3,5.44 3,6V18C3,18.56 3.2,19.04 3.59,19.43C4,19.82 4.45,20 5,20H19C19.5,20 20,19.81 20.39,19.41C20.8,19 21,18.53 21,18V6C21,5.47 20.8,5 20.39,4.59C20,4.19 19.5,4 19,4H5M4.5,5.5H19.5V18.5H4.5V5.5M7,9C6.7,9 6.47,9.09 6.28,9.28C6.09,9.47 6,9.7 6,10V14C6,14.3 6.09,14.53 6.28,14.72C6.47,14.91 6.7,15 7,15H10C10.27,15 10.5,14.91 10.71,14.72C10.91,14.53 11,14.3 11,14V13H9.5V13.5H7.5V10.5H9.5V11H11V10C11,9.7 10.91,9.47 10.71,9.28C10.5,9.09 10.27,9 10,9H7M14,9C13.73,9 13.5,9.09 13.29,9.28C13.09,9.47 13,9.7 13,10V14C13,14.3 13.09,14.53 13.29,14.72C13.5,14.91 13.73,15 14,15H17C17.3,15 17.53,14.91 17.72,14.72C17.91,14.53 18,14.3 18,14V13H16.5V13.5H14.5V10.5H16.5V11H18V10C18,9.7 17.91,9.47 17.72,9.28C17.53,9.09 17.3,9 17,9H14Z";
     const mediaCaptionOn = "M18,11H16.5V10.5H14.5V13.5H16.5V13H18V14A1,1 0 0,1 17,15H14A1,1 0 0,1 13,14V10A1,1 0 0,1 14,9H17A1,1 0 0,1 18,10M11,11H9.5V10.5H7.5V13.5H9.5V13H11V14A1,1 0 0,1 10,15H7A1,1 0 0,1 6,14V10A1,1 0 0,1 7,9H10A1,1 0 0,1 11,10M19,4H5C3.89,4 3,4.89 3,6V18A2,2 0 0,0 5,20H19A2,2 0 0,0 21,18V6C21,4.89 20.1,4 19,4Z";
@@ -202,4 +202,8 @@ export declare namespace CoreIcons {
     const mediaVolume3 = "M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z";
     const mediaComment = "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M6,7H18V9H6V7M6,11H15V13H6V11Z";
     const mediaCommentAdd = "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M11,6H13V9H16V11H13V14H11V11H8V9H11V6Z";
+    const mediaLightness = "M12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z";
+    const mediaColor = "M19,11.5C19,11.5 17,13.67 17,15A2,2 0 0,0 19,17A2,2 0 0,0 21,15C21,13.67 19,11.5 19,11.5M5.21,10L10,5.21L14.79,10M16.56,8.94L7.62,0L6.21,1.41L8.59,3.79L3.44,8.94C2.85,9.5 2.85,10.47 3.44,11.06L8.94,16.56C9.23,16.85 9.62,17 10,17C10.38,17 10.77,16.85 11.06,16.56L16.56,11.06C17.15,10.47 17.15,9.5 16.56,8.94Z";
+    const mediaInvert = "M12,19.58V19.58C10.4,19.58 8.89,18.96 7.76,17.83C6.62,16.69 6,15.19 6,13.58C6,12 6.62,10.47 7.76,9.34L12,5.1M17.66,7.93L12,2.27V2.27L6.34,7.93C3.22,11.05 3.22,16.12 6.34,19.24C7.9,20.8 9.95,21.58 12,21.58C14.05,21.58 16.1,20.8 17.66,19.24C20.78,16.12 20.78,11.05 17.66,7.93Z";
+    const mediaSaturate = "M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z";
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.53",
+  "version": "1.0.0-beta.55",
   "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": "1042327831f9c908912c552d5c2704b765a6f9c2"
+  "gitHead": "c8454798fb7546174ee8c7ea10e491c5e903e789"
 }

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/Menu.tsx

@@ -313,6 +313,7 @@ export const Menu = (props: MenuProps) => {
     return (
       <MenuComponent
         {...(props as AnyObject)}
+        className=""
         menuClassName={props.className}
       />
     );
@@ -323,6 +324,7 @@ export const Menu = (props: MenuProps) => {
       <FloatingTree>
         <MenuComponent
           {...(props as AnyObject)}
+          className=""
           menuClassName={props.className}
         />
       </FloatingTree>

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/components/tabpanel/Tab.tsx

@@ -174,8 +174,8 @@ export const Tab = <Tag extends React.ElementType = "button">({
           active && activeClassName,
           disabled && "text-tint-500 pointer-events-none",
           tabFlex ? "flex-1" : "flex-initial max-w-36",
-          minimal ? "min-w-6" : "min-w-18",
-          "flex items-center justify-center px-1 rounded overflow-hidden cursor-pointer",
+          minimal ? "min-w-6 rounded" : "min-w-18 rounded-capped",
+          "flex items-center justify-center px-1 overflow-hidden cursor-pointer",
         )}
         onClick={() => !active && onClick?.(id)}
         ref={ref as AnyObject}

package/src/components/tabpanel/TabPanel.tsx

@@ -47,7 +47,7 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
   /**
    * tab variations
    */
-  variant?: "soft" | "solid" | "outline";
+  variant?: "soft" | "solid" | "outline" | "pills";
   /**
    * tab button flex to fill tabs
    */
@@ -64,6 +64,10 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
    * tab list className
    */
   headerClassName?: string;
+  /**
+   * active tab className
+   */
+  activeClassName?: string;
   /**
    * append element
    */
@@ -122,6 +126,7 @@ export const TabPanel = ({
   headerClassName,
   orientation = "top",
   activeTab,
+  activeClassName,
   justify,
   variant,
   tabFlex,
@@ -196,6 +201,7 @@ export const TabPanel = ({
           {tabs.map((node: AnyObject) =>
             cloneElement(node, {
               tabFlex: node.props.tabFlex ?? tabFlex,
+              activeClassName: node.props.activeClassName ?? activeClassName,
               onClick: handleClick,
               active: node.props.id === active,
             }),

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)}

package/src/types/icons.ts

@@ -417,7 +417,7 @@ export namespace CoreIcons {
   export const mediaPlay = "M8,5.14V19.14L19,12.14L8,5.14Z";
   export const mediaPause = "M14,19H18V5H14M6,19H10V5H6V19Z";
   export const mediaContrast =
-    "M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z";
+    "M12,20C9.79,20 7.79,19.1 6.34,17.66L17.66,6.34C19.1,7.79 20,9.79 20,12A8,8 0 0,1 12,20M6,8H8V6H9.5V8H11.5V9.5H9.5V11.5H8V9.5H6M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,16H17V14.5H12V16Z";
   export const mediaEqs =
     "M7 3H5V9H7V3M19 3H17V13H19V3M3 13H5V21H7V13H9V11H3V13M15 7H13V3H11V7H9V9H15V7M11 21H13V11H11V21M15 15V17H17V21H19V17H21V15H15Z";
   export const mediaCaptionOff =
@@ -437,4 +437,13 @@ export namespace CoreIcons {
     "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M6,7H18V9H6V7M6,11H15V13H6V11Z";
   export const mediaCommentAdd =
     "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M11,6H13V9H16V11H13V14H11V11H8V9H11V6Z";
+
+  export const mediaLightness =
+    "M12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z";
+  export const mediaColor =
+    "M19,11.5C19,11.5 17,13.67 17,15A2,2 0 0,0 19,17A2,2 0 0,0 21,15C21,13.67 19,11.5 19,11.5M5.21,10L10,5.21L14.79,10M16.56,8.94L7.62,0L6.21,1.41L8.59,3.79L3.44,8.94C2.85,9.5 2.85,10.47 3.44,11.06L8.94,16.56C9.23,16.85 9.62,17 10,17C10.38,17 10.77,16.85 11.06,16.56L16.56,11.06C17.15,10.47 17.15,9.5 16.56,8.94Z";
+  export const mediaInvert =
+    "M12,19.58V19.58C10.4,19.58 8.89,18.96 7.76,17.83C6.62,16.69 6,15.19 6,13.58C6,12 6.62,10.47 7.76,9.34L12,5.1M17.66,7.93L12,2.27V2.27L6.34,7.93C3.22,11.05 3.22,16.12 6.34,19.24C7.9,20.8 9.95,21.58 12,21.58C14.05,21.58 16.1,20.8 17.66,19.24C20.78,16.12 20.78,11.05 17.66,7.93Z";
+  export const mediaSaturate =
+    "M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z";
 }