@noxlovette/material 0.1.18 → 0.1.19

package/dist/components/buttons/FAB.svelte

@@ -14,7 +14,6 @@ Floating action buttons (FABs) help people take primary actions.
   import { fab } from './theme.js';
   import type { FABProps } from './types.js';
   import FABMenu from './FABMenu.svelte';
-  import ButtonIcon from './ButtonIcon.svelte';
   import { Layer, Icon } from '../../utils/index.js';
   import { clickOutside } from '../../actions/index.js';
   import { Button, type ButtonRootProps } from 'bits-ui';
@@ -34,10 +33,19 @@ Floating action buttons (FABs) help people take primary actions.
   }: FABProps = $props();
 
   const { base, icon, label: labelClass } = $derived(fab({ size, config, expanded }));
-  const btnCls = $derived(base({ class: clsx(className) }));
 
   let showMenu = $state(false);
 
+  const btnCls = $derived(
+    base({
+      class: clsx(
+        className,
+        'transition-[border-radius] duration-300',
+        withMenu && showMenu && '!rounded-full'
+      )
+    })
+  );
+
   function handleClick(e: MouseEvent) {
     if (disabled) {
       e.preventDefault();
@@ -45,24 +53,12 @@ Floating action buttons (FABs) help people take primary actions.
     }
     if (withMenu) {
       e.preventDefault();
-      showMenu = true;
+      showMenu = !showMenu;
     }
   }
 </script>
 
-{#if withMenu && showMenu}
-  <div class="relative z-50" use:clickOutside={() => (showMenu = false)}>
-    <FABMenu>
-      {@render children?.()}
-    </FABMenu>
-    <ButtonIcon
-      variant="filled"
-      class="shadow-elevation-3"
-      iconProps={{ name: 'close' }}
-      onclick={() => (showMenu = !showMenu)}
-    />
-  </div>
-{:else}
+<div class="contents" use:clickOutside={() => (showMenu = false)}>
   <Button.Root
     {disabled}
     {formaction}
@@ -71,12 +67,18 @@ Floating action buttons (FABs) help people take primary actions.
     data-cy="m3-fab"
     {...restProps as ButtonRootProps}
   >
-    <Icon {...iconProps} class={icon()} />
+    <Icon {...withMenu && showMenu ? { name: 'close' } : iconProps} class={icon()} />
     <Layer />
-    {#if expanded}
+    {#if expanded && !(withMenu && showMenu)}
       <p class={labelClass()}>
         {label}
       </p>
     {/if}
   </Button.Root>
-{/if}
+
+  {#if withMenu && showMenu}
+    <FABMenu>
+      {@render children?.()}
+    </FABMenu>
+  {/if}
+</div>

package/dist/components/buttons/FABMenu.svelte

@@ -10,21 +10,19 @@ Should be used with `FABMenuItem` as children.
   import { enterExit } from '../../animation/enterExit.js';
   import { easeEmphasizedDecel } from '../../animation/easing.js';
 
-  let { children, class: className, position = 'top', ...restProps }: FABMenuProps = $props();
+  let { children, class: className, ...restProps }: FABMenuProps = $props();
 
-  const { base } = $derived(fabMenu({ position }));
+  const { base } = fabMenu();
 
   const margin = 8;
   const gap = 8;
   let coords = $state({
     x: 0,
     y: 0,
-    originX: 'left',
-    originY: 'top',
+    originX: 'right',
+    originY: 'bottom',
     maxHeight: 0
   });
-
-  // TODO: out:enterExit={{ duration: 200, easing: easeEmphasizedAccel, mode: 'scale' }} – if you can solve how to eliminate another button from appearing here, use this too
 </script>
 
 <ul
@@ -38,9 +36,11 @@ Should be used with `FABMenuItem` as children.
   style:max-height={coords.maxHeight ? `${coords.maxHeight}px` : undefined}
   style:--enter-exit-origin={`${coords.originY} ${coords.originX}`}
   {@attach (menu) => {
+    const anchorEl = menu.previousElementSibling as HTMLElement;
+    if (!anchorEl) return;
+
+    const anchorRect = anchorEl.getBoundingClientRect();
     const rect = menu.getBoundingClientRect();
-    const anchorRect = menu.parentElement?.getBoundingClientRect();
-    if (!anchorRect) return;
 
     const spaceAbove = anchorRect.top - gap - margin;
     const spaceBelow = window.innerHeight - margin - (anchorRect.bottom + gap);
@@ -52,29 +52,22 @@ Should be used with `FABMenuItem` as children.
     const targetTop = placeAbove ? anchorRect.top - gap - maxHeight : anchorRect.bottom + gap;
 
     let targetLeft = anchorRect.right - rect.width;
-
     if (targetLeft + rect.width > window.innerWidth - margin) {
       targetLeft = window.innerWidth - margin - rect.width;
     }
-    if (targetLeft < margin) {
-      targetLeft = margin;
-    }
+    if (targetLeft < margin) targetLeft = margin;
 
     let clampedTop = targetTop;
-    if (clampedTop < margin) {
-      clampedTop = margin;
-    }
+    if (clampedTop < margin) clampedTop = margin;
     if (clampedTop + maxHeight > window.innerHeight - margin) {
       clampedTop = window.innerHeight - margin - maxHeight;
     }
 
-    const x = targetLeft - rect.left;
-    const y = clampedTop - rect.top;
     const originY = placeAbove ? 'bottom' : 'top';
     const originX =
       anchorRect.left + anchorRect.width / 2 < targetLeft + rect.width / 2 ? 'left' : 'right';
 
-    coords = { x, y, originX, originY, maxHeight };
+    coords = { x: targetLeft, y: clampedTop, originX, originY, maxHeight };
   }}
 >
   {@render children()}

package/dist/components/buttons/theme.d.ts

@@ -491,22 +491,28 @@ export declare const fab: import("tailwind-variants").TVReturnType<{
     label: string;
 }, undefined, unknown, unknown, undefined>>;
 export declare const fabMenu: import("tailwind-variants").TVReturnType<{
-    position: {
-        top: string;
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
     };
-}, {
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
     base: string;
 }, undefined, {
-    position: {
-        top: string;
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
     };
-}, {
+} | {}, {
     base: string;
-}, import("tailwind-variants").TVReturnType<{
-    position: {
-        top: string;
-    };
-}, {
+}, import("tailwind-variants").TVReturnType<unknown, {
     base: string;
 }, undefined, unknown, unknown, undefined>>;
 export declare const fabMenuItem: import("tailwind-variants").TVReturnType<{

package/dist/components/buttons/theme.js

@@ -474,10 +474,7 @@ export const fab = tv({
 });
 export const fabMenu = tv({
     slots: {
-        base: 'gap-2 pb-2 flex flex-col absolute z-[100] overflow-visible p-1'
-    },
-    variants: {
-        position: { top: 'top-16' }
+        base: 'gap-2 pb-2 flex flex-col fixed left-0 top-0 z-[9999] overflow-visible p-1'
     }
 });
 export const fabMenuItem = tv({

package/dist/components/buttons/types.d.ts

@@ -1,7 +1,7 @@
 import type { AnchorButtonAttributes, IconProps } from '../../utils/index.js';
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
-import type { ButtonGroupVariants, ButtonIconVariants, ButtonMDVariants, FABMenuItemVariants, FABMenuVariants, FABVariants } from './theme.js';
+import type { ButtonGroupVariants, ButtonIconVariants, ButtonMDVariants, FABMenuItemVariants, FABVariants } from './theme.js';
 export interface ButtonGroupProps extends ButtonGroupVariants, HTMLAttributes<HTMLDivElement> {
     /**
      * The content of the button group.
@@ -157,11 +157,7 @@ export type FABProps = FABVariants & AnchorButtonAttributes & {
      */
     children?: Snippet;
 };
-export type FABMenuProps = FABMenuVariants & HTMLAttributes<HTMLUListElement> & {
-    /**
-     * The vertical position of the menu relative to the anchor.
-     */
-    position?: FABMenuVariants['position'];
+export type FABMenuProps = HTMLAttributes<HTMLUListElement> & {
     /**
      * The menu items. Use `FABMenuItem` components.
      */

package/dist/components/containers/context-menu/ContextMenu.svelte

@@ -26,7 +26,6 @@ Context menus appear on right-click and provide actions related to the clicked e
   import Divider from '../divider/Divider.svelte';
   import { enterExit } from '../../../animation/enterExit.js';
   import { easeEmphasizedDecel } from '../../../animation/easing.js';
-  import clsx from 'clsx';
 
   let {
     items = [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "type": "module",
   "license": "MIT",
   "repository": {