@homebound/beam 2.414.0-alpha.1 → 2.414.0-alpha.3

package/dist/index.d.cts

@@ -4769,6 +4769,8 @@ interface ButtonProps extends BeamButtonProps, BeamFocusableProps {
     contrast?: boolean;
     /** Additional text to further customize button during an async request is in progress. */
     labelInFlight?: string;
+    /** Shows pressed/active styles (useful when a menu is open) */
+    active?: boolean;
 }
 declare function Button(props: ButtonProps): _emotion_react_jsx_runtime.JSX.Element;
 type ButtonSize = "sm" | "md" | "lg";

package/dist/index.d.ts

@@ -4769,6 +4769,8 @@ interface ButtonProps extends BeamButtonProps, BeamFocusableProps {
     contrast?: boolean;
     /** Additional text to further customize button during an async request is in progress. */
     labelInFlight?: string;
+    /** Shows pressed/active styles (useful when a menu is open) */
+    active?: boolean;
 }
 declare function Button(props: ButtonProps): _emotion_react_jsx_runtime.JSX.Element;
 type ButtonSize = "sm" | "md" | "lg";

package/dist/index.js

@@ -6684,6 +6684,7 @@ function Button(props) {
     download,
     contrast = false,
     forceFocusStyles = false,
+    active = false,
     labelInFlight,
     ...otherProps
   } = props;
@@ -6737,8 +6738,8 @@ function Button(props) {
     css: {
       ...Css.buttonBase.tt("inherit").$,
       ...baseStyles5,
-      ...isHovered && !isPressed ? hoverStyles4 : {},
-      ...isPressed ? pressedStyles3 : {},
+      ...isHovered && !isPressed && !active ? hoverStyles4 : {},
+      ...isPressed || active ? pressedStyles3 : {},
       ...isDisabled || asyncInProgress ? { ...disabledStyles4, ...Css.cursorNotAllowed.$ } : {},
       ...isFocusVisible || forceFocusStyles ? focusStyles2 : {}
     },
@@ -6778,7 +6779,7 @@ var variantStyles = (contrast) => ({
   secondaryBlack: {
     baseStyles: Css.bgWhite.bcGray300.bw1.ba.gray900.$,
     hoverStyles: Css.bgGray100.if(contrast).bgGray700.white.$,
-    pressedStyles: Css.gray900.if(contrast).bgWhite.gray900.$,
+    pressedStyles: Css.bgGray100.gray900.if(contrast).bgWhite.gray900.$,
     disabledStyles: Css.gray400.if(contrast).gray700.$,
     focusStyles: Css.boxShadow(`0px 0px 0px 2px ${"rgba(255,255,255,1)" /* White */}, 0px 0px 0px 4px ${"rgba(36, 36, 36, 1)" /* Gray900 */}`).if(contrast).boxShadow(`0px 0px 0px 2px ${"rgba(175, 175, 175, 1)" /* Gray500 */}`).$
   },
@@ -6835,7 +6836,7 @@ var variantStyles = (contrast) => ({
 });
 var sizeStyles = {
   sm: Css.hPx(32).pxPx(12).$,
-  md: Css.hPx(40).px1.$,
+  md: Css.hPx(40).px2.$,
   lg: Css.hPx(48).px3.$
 };
 var iconStyles = {
@@ -8490,16 +8491,14 @@ function TextFieldBase(props) {
       ...labelStyle === "hidden" && Css.mhPx(fieldHeight - maybeSmaller).if(compact).mhPx(compactFieldHeight - maybeSmaller).$
     },
     input: {
-      ...Css.w100.mw0.outline0.fg1.bgColor(bgColor).$,
+      ...Css.w100.mw0.outline0.fg1.bgTransparent.$,
       // Not using Truss's inline `if` statement here because `addIn` properties do not respect the if statement.
       ...contrast && !inputStylePalette && Css.addIn("&::selection", Css.bgGray800.$).$,
-      // Make the background transparent when highlighting the field on hover
-      ...borderOnHover && Css.bgTransparent.$,
       // For "multiline" fields we add top and bottom padding of 7px for compact, or 11px for non-compact, to properly match the height of the single line fields
       ...multiline ? Css.br4.pyPx(compact ? 7 : textFieldBaseMultilineTopPadding).add("resize", "none").$ : Css.truncate.$
     },
     hover: Css.bgColor(hoverBgColor).if(contrast).bcGray600.$,
-    focus: Css.bcBlue700.if(contrast).bcBlue500.if(borderOnHover).bgColor(hoverBgColor).bcBlue500.$,
+    focus: Css.bcBlue700.bgColor(hoverBgColor).if(contrast).bcBlue500.if(borderOnHover).bcBlue500.$,
     disabled: visuallyDisabled ? Css.cursorNotAllowed.gray600.bgColor(disabledBgColor).if(contrast).gray500.$ : Css.cursorNotAllowed.$,
     error: Css.bcRed600.if(contrast).bcRed400.$
   };
@@ -16754,10 +16753,11 @@ function FilterDropdownMenu(props) {
         ] }),
         variant: "secondaryBlack",
         onClick: () => setIsOpen(!isOpen),
+        active: isOpen,
         ...testId.button
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs68("div", { css: Css.df.aic.fww.gap1.order(1).$, children: [
+    isOpen && /* @__PURE__ */ jsxs68("div", { css: Css.df.aic.fww.gap1.w100.$, children: [
       groupBy && /* @__PURE__ */ jsx140(
         SelectField,
         {